Expression >
Forums Home
>
Expression Studio Forums
>
Expression Web and SuperPreview
>
Positioning images in DIV Tags
Positioning images in DIV Tags
I can not get DIV tags positioned correctly. I have two images side by side. The one on the left is highest and the one on the right is widest. These two images together make up my logo. Then I want to make a navigation menu in the space that remains below the least highest image. (I hope this is making sense). However, I can not get a navigation div to butt up directly underneath the wider image. What do I need to do or is there a tutorial I can watch or read about that tells me everything about positioning images and div tags? Please help.
Thanks in advance.
Answers
- I will suggest that you use the method described here to target IE6-only with your CSS while working to correct the display http://www.positioniseverything.net/articles/cc-plus.html. It has the great advantage of pemitting you to add CSS rules as you wish without worrying about affecting any other browser, and without requiring more than the single conditional comment to create the wrapper div that is visible only to IE6.
Once that is done, you write your selectors for IE6 as descendants of ie6root, and can experiment as much as you want, like so
#ie6root #masthead {
... css rules
}
#ie6root #container {
,,, css rules
}
and so forth. Only IE6 will see those rules, so you don't have to worry about breaking anything while you work on addressing IE6.
cheers,
scott
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's).- Marked As Answer byFPC_D Wednesday, November 18, 2009 8:27 PM
All Replies
- No. I'm afraid that it's not that simple. There is no quickie that will tell you "everything you need to know about positioning." There is an entire body of knowledge about HTML and CSS, which is far too extensive for that kind of single tutorial treatment.See the learning resources section of the BEFORE POSTING thread to find a number of resources to learn these technologies.cheers,scott
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's). - Try to put in a float:right; in the navigation div
and a margin:0px;
/senn- Unproposed As Answer byAnna UllrichMSFT, ModeratorMonday, November 09, 2009 6:14 PM
- Proposed As Answer bySiva Sivakumar Friday, November 06, 2009 1:55 PM
- Thank you so much for the suggestion...I tried it but it did not work. I started going a different route though. I am not too sure how this is going to work, but I have an image that I created in Expression design. It is basically 5 oval buttons that are beveled. It gives it kind of a shadow look to it. I am going to try and use this image for my navigation menu, but now that I have my anchor tags in place, I am not too sure how I am going to get them aligned right over the 5 image buttons.
This is my css for the navigation menu:
#navigation {
background-image: url('../images/navigationimg.png');
background-repeat: repeat-x;
background-attachment: inherit;
height: 36px;
}
#navigation ul {
list-style-type: none;
width: auto;
margin: 0px;
padding: 0px;
}
#navigation li {
float: left;
}
#navigation a {
color: #E3B000;
text-decoration: none;
display: block;
padding: 5px;
margin: 5px;
}
This gets the text in place but it is definatley not aligned over the buttons. My navigation image is 626 px wide and 36 px high. Each button is 125 px wide and 36 px high.
Any suggestions would be greatly appreciated. - Clearly you did not read or follow the instructions in the " BEFORE POSTING" study as Scott requested in the fist response.
Providing a small portion of the CSS will not lead to help. IF you want help put the page online and provide a link to it. We have to SEE the HTML & CSS since mark-up on the page plus what inheritance may be applying to the CSS. We also need to see the images as well.
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes S.E. threw out a random guess, which the rest of us won't usually do anymore because we know it often wastes time. It requires assuming what you did, and such assumptions are often wrong.
As you found out, we cannot help you without knowing what your full page, and everything affecting it, looks like. Read the Before Posting instructions. Publish the page, the images, and all the CSS files affecting it, and post a link here.
Note also that for what you are trying to do, you will run into complications. Text can be resized in the user's browser without resizing your underlying images. What will happen to the look of your navigation when that happens?- I believe that this thread relates to this other thread by the same poster. It was explained to him there the possible consequence (upon resizing) of trying to position text coincident with images. Both threads appear to indicate a need on the part of the OP to learn a good bit more about HTML and CSS before proceeding, and he has been advised to do so in both threads.
FWIW, here's another try. To the OP: There really is no quick and easy tutorial you can view that will automagically infuse you with the extensive body of knowledge that represents today's Web technologies. And make no mistake, this is technology, not just drawing a page and posting it on a site.
At a minimum, you need a fundamental understanding of the hierarchical nature (containership structure) of a Web page, and how that structure is created and affected by source order. In other words, basic HTML.
To achieve anything beyond the simplest of layouts, you will also need to understand how CSS can be used to modify the presentation of the content from that which would otherwise be dictated by source order.
There are tens or dozens of other technologies, Flash, ASP.NET, PHP, ASP, Perl, MySQL, etc., but the sine qua non of Web development is HTML and CSS, and until you learn them you will be thrashing about in the darkness, taking one step forward, then two back and one sideways. Do yourself a favor and visit w3schools and take their tutorials. You will be much, much more productive and will know enough to couch your questions in a way that they can be easily answered.
cheers,
scott
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's). - FWIW,Your post is already a week old had you taken the first advice given you you may have had at least a clearer grasp of the concept you are trying to use if not the answer to your question. I know this from experience. These folks want to help you they do not get paid to do it but genuinely want to help but you have to meet the m half way . They HAvE done this before WE have not.Good luckMike
"Two things are infinite: the universe and human stupidity; and I'm not sure about the the universe." -- Albert Einstein - FWIW,
My apologies to all. It is not my intention to waste your time. I need to be better at responding to the posts. Scott, thank you very much for your original post. I did take your advice and read the "Before you post" section of the forum. I also have started to look at some of the sites that are listed there. I am aware that there is more to web design than just a tutorial or just cutting and pasting something in for your design. I am very thankful for you all offering your time to answer questions for the ones that do not have as much experience in the technology of building websites as you do.
Also, thank you Cheryl D Wise for suggesting to have a link for you all to check out. When I get it set up on my web server to do that, I will be sure to send you all the link in my posts.
Thanks for all that you do.
You posted having trouble sending more informational material. So it can only be guesses.
When people here is using time travelling up and down looking for posts to answer, even when no
new post to find and answer, instead using their time making incessant complaints, it won't hurd to
propose an answer at all. It's of no justice to the OP presenting him complaints of wasting our times.
Another guess to you:
When you set in a float:right; in the #navigation div, you must also define the width of the div.
You must set in
width:XXXpx;
height:YYYpx;
-This is the size of the picture !.
At the same time, you must assure, that the width is no more than there's room for. Normally, the width should
be slightly less than the available room. It seems that your navigation is a horizontal one. There will be no place
but for a few buttons.
Good luck !.
/senn
- Good job S.E.I don't understand why people spend so much time complaining that their time is wasted.
Good job S.E.
Umm, no offense, but just out of curiosity, how do you know? Have you tested the proposed solution? If so, how did you manage it, since we've seen none of the markup or CSS which currently applies, and have no way to set up a test bed for any possible suggestions?
No one has any idea what the current markup looks like, so any specific suggestions regarding what CSS to apply to that markup is no more than a SWAG, as likely to be wrong as to be correct, or even more likely to be so far off the mark as to be completely irrelevant. No one, no matter how astute or how experienced, can offer accurate advice on how to address presentation issues without knowledge certain of the markup to which that advice will apply.
I think that perhaps you may have missed the point. Most of the regular contributors here, the folks who provide the majority of the accepted answers, spend a great deal of our own, unpaid volunteer time trying to help others. In point of fact, it is a waste of time to have to repeatedly request, over and over, that someone with a presentation issue provide a link to the page displaying the issue.I don't understand why people spend so much time complaining that their time is wasted.
First, without that access, we have no hope of actually being of help, which is what we are all striving to do. Second, it has been demonstrated repeatedly that within 15-30 minutes of providing a link to the page displaying the issue, one of us has analyzed the markup and CSS and determined the cause of the problem, and posted a resolution. This sometimes happens after literally a week of back and forth with the OP trying to convince them to show us the page. We are not asking for a link to the page out of some caprice; it is necessary to the resolution of presentation issues, and we do truly have to waste far too much time trying to persuade people of that fact, when we could instead solve their problem(s) and go on to someone else's.
You may not understand this, even now, but that's as straightforward an explanation as I can provide of the situation. I invite you to check the profiles of any of the regular answerers here, and compare their level of participation and the number of answers they provide to the record of... well, others who post here occasionally, and primarily with complaints about those who actually try to support the forum and to help its users. You might be enlightened...
cheers,
scott
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's).- Brian Wood's video Expression Web: CSS Workflow at lynda.com is very helpful, both for those who are new to web design and for those who have experience with CSS but need to learn EW's user interface.
- Sorry, after several years in this forum I know all this. What I wonder is just why you take time repeating it all over instead of just trying an educated guess or just saying. "please send us a link to your site." S.E. at last tried.(BTW just out of curiosity I tried to recreate the problem of FPC_D and also found a "solution". However, I am afraid with such heretical means that you would ban me for ever from this forum I showed it to you which would make me very sorry. And I am afraid it would not render well e.g., in the Chinese browser Maxthon ;-) I also understand that you cannot take time to do this all the time.)Then, if it was my modest attempt to encourage S.E. that triggered his last comment, I can only apologize.Bengt
- The problem with an educated guess is that the person posting isn't educated in web design so we are found to guess wrong. with display issues you need to see the html & css used are and all of it not just snippets because inheritance plays a big part in display issues.
Typical reasons for display issues are the use of position: absolute usually caused by dragging or otherwise moving Content around in design view, math errors usually due to not understanding box model and inheritance, or using toolbar buttons without knowing anything about css. Frequently we see html w/o a single heading or even paragraph tags. So you tell me how we are supposed to make an "educated" guess over how the OP structured his page, what html is used, what his css ids class names or definitions are?
WAG (wild a* guess) area waste of time and bandwidth. This is a user to user forum nobody is being paid to answer here with the exception of Paul Bartholomew and he is here as a representative of the Dev team to help with Expression Web bugs and issues not web design questions.
I'm only willing to take WAG when I'm being paid to do so.
98% of display issues brought to this forum are solved in minutes when the information requested in the "BEFORE POSTING" thread.
The url doesn't have to be to a production site. It doesn't even have to contain real content-res ipsa or other placeholder text is fine, as is the use of placeholder images if sealed to the correct size. Unless server side processing is being used even free ISP provided hosting is fine.
As for senn he needs no encouragement to make his comments and frankly his comments are frequently offensive for no reason other than his own dislike of many regular contributors to this group. Many here no longer participate in the Microsoft newsgroups because of his vitriol.
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes ... I invite you to check the profiles of any of the regular answerers here, and compare their level of participation and the number of answers they provide to the record of... well, others who post here occasionally, and primarily with complaints about those who actually try to support the forum and to help its users. You might be enlightened...
Hmm... Let's see now. Bill Pearson: 100 answers. Scott (paladyn): 423 answers. Cheryl: 439 answers. S.E: 0 answers! Now I wonder who people should listen to. I guess it depends on whether you want "educated guesses" or actual answers.
cheers,
scott
Jim- http://www.css3.info/the-big-css3-validation-debate/
Using CSS3, where it is already supported, is not an indication of lack of webdesign skill. Apparently you don't recognize it or realize that validators mark it as wrong (it not yet being official).- Edited byKathyW2 Monday, November 09, 2009 9:54 PM
- In the case of the rounded corners its actually a good way to design an element with rounded corners that can die gracefully on browsers without support for CSS3. Rounded corners can be a pita depending on the spec - one reason I'm looking forward to CSS3.
--
Chris Hanscom - Microsoft MVP
On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign The fickeness of the fourm platform has decided that the report abue links all of the sudden fust reappeared. So with that in mind please disregard report of thre removal in my last poting.
"Two things are infinite: the universe and human stupidity; and I'm not sure about the the universe." -- Albert Einstein- Yeah, boy, I guess he told me. My CSS3 markup doesn't validate (a fact I was well aware of and completely unconcerned about), and the CSS for Lightbox (a really cool javascript add-in which was created by someone else) turns up a few minor errors. With validation problems like that, it's truly amazing that the page works at all!
Now I did find a quote from Oct. 2008 in a thread referring to a table-based, quirks mode page with over 400 errors: "Webdesign is not my business in general, in fact, It´s my first and only one til this day." Who do you suppose that would be?
The validation check on my site does bring up one question for me though. I had forgotten that I still had the -o-border-radius and -o-box-shadow code in there in an unsuccessful attempt to make Opera behave the same. Does it support these, and if so, what is the correct code? I appreciate any help with that, and I know that there are those here who do have actual answers. ;-)
Jim - Here's a hack for cross-browser usage of border radious:
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
Here's another way for Opera support (assuming it support some CSS3):
http://24ways.org/2006/rounded-corner-boxes-the-css3-way
And if you're looking for a CSS3 reference guide .
--
Chris Hanscom - Microsoft MVP
On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign - Just curious, How does this forums page get the round corner drop shadow if not css?MIke
"Two things are infinite: the universe and human stupidity; and I'm not sure about the the universe." -- Albert Einstein - Positioned images. There are plenty of samples on the web about doing it. Just search Rounded Corners CSS
--
Chris Hanscom - Microsoft MVP
On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign - Normally you would use images and sometimes nested divs.
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes - Viegen and CherylThanks for the reply to my off topiceI will not drag this thread onThanksMIke
"Two things are infinite: the universe and human stupidity; and I'm not sure about the the universe." -- Albert Einstein - Thank you Cheryl for your suggestion. I have now since put up a test url to let you take a look at. The drop down menu created works fine in Firefox however, doesn't work in IE. If there is no way to make this work, I will can it and try and us the tutorial you provided with the Project Seven CSS Express Menu. Thanks for taking a look and for all of your help. Here is the link: http://calvin.hereyallgo.com
- Just FYI, it seems to be working fine in IE8, FF3.5.5, and Safari 4. The submenus only disappear in IE versions below IE8. I haven't looked at the source or CSS yet, but the issue doesn't appear to be a problem in standards-compliant browsers.
cheers,
scott
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's). - Thanks for letting me know it's okay in IE 8. Maybe I can still try and find some type of workaround for the other versions. Thanks for taking a look.
- Truth be told, that can't really happen. Like all such "pure CSS" menus that I know of besides one crafted by Stu Nichols, it suffers from a singular problem with respect to IE6. It depends upon browser support for the :hover pseudo-class on arbitrary (i.e. non-anchor) elements such as <li> elements. IE6 does not, and AFAIK, will never, support :hover on arbitrary elements, so some javascript will be required to make any CSS menu work in that browser.
You might want to look into the CSS Express menu tutorial Cheryl provides. It may meet your needs satisfactorily.
cheers,
scot
P.S. I used to live in Jackson, in the 1200 block or so of N. West, IIRC, about two or three blocks down from Milsaps College, and a block or so down from CS's Restaurant across the street from the school, if it's still there (the restaurant, not the school ;-). CS's had some of the best red beans and rice I've ever had anywhere, and there used to be regular crawfish boils/impromptu concerts in the field next to CS's in the warm season. I left in '83. Good people down there.
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's). - Wow Scott,
It's a small world. I remember the place you are talking about. I beleive it might still be there, they have just changed the name of it to Que Sera. The reason I say this is because the red beans and rice they serve there are some of the best I have tasted as well. It is kind of a cajun/New Orleans type food. My wife and I live in the Belhaven area, so we were not far from where you lived. I have lived here my whole life.
Thanks so much for your help in this forum. It is evident that you answer a lot of questions for people. I fixed the problem in IE 7 by adding a relative position and a z index of 2. I don't know if this will potentially run into trouble later and I do not think it will fix it in IE 6 however, I tried putting a javascript link in from google to try and see if it will fix IE 6. But I have no way of checking it. Is there a way to test my pages in all versions of IE? If you have a free moment, check it out.
http://calvin.hereyallgo.com
Thanks for your help.
David - "But I have no way of checking it. Is there a way to test my pages in all versions of IE?"
Download Microsoft's free Virtual PC, and an IE6 image file for it. IE7 and IE8 are also available if needed. This lets you fire up multiple Virtual PCs to test your site on real copies of the various versions of IE.
It's easier to do than it sounds.
http://www.microsoft.com/downloads/details.aspx?FamilyId=04D26402-3199-48A3-AFA2-2DC0B40A73B6&displaylang=en
then
http://www.microsoft.com/downloads/details.aspx?familyid=28C97D22-6EB8-4A09-A7F7-F6C7A1F000B5&displaylang=en
then pick what you need from
http://www.microsoft.com/Downloads/details.aspx?familyid=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en
(Save the link. When they expire, go back and download the ones with updated expiration dates.) - Hi, David. Good to hear that CS's is still around. I had some good times there back in the day. One of these days I'll have to see if I can't contact some of my old friends down there (not as impossible as it might have been before Facebook, Twitter, etc.).
As to your page, your changes seem to have worked fairly well, in that the menu dropdowns now remain visible in all three major versions of IE, including IE6. I didn't do any extensive testing, just checked to be sure that the disappearing list item issue was resolved.
You do have a display problem in IE6, brought on by its defective box model. Here is what I see when viewed in IE6:
As you can see, some elements are dropping. When I have seen this before, it has been because the widths of the items within the container add up exactly to the container's (#masthead) width. The resolution (for IE6) was to either increase the container's width by a few pixels or decrease the items' total width, either of which creates enough room for the items to be displayed within the container in IE6.
You can do this using a conditional comment to set the container's width attribute for IE6 only. Since the container's background is the same color as the body background, you mght try just increasing the width attribute in the #masthead style, since it won't be evident in browsers anyway, instead of using a conditional comment.
To test in all versions of IE, all you need are IE8 installed, since it has an IE7 mode that accurately represents pages as they appear in IE7, and a Virtual PC and IE6 image. You can get VPC2007 free from here http://www.microsoft.com/downloads/details.aspx?FamilyId=04D26402-3199-48A3-AFA2-2DC0B40A73B6&displaylang=en. You will also need an IE6 image to install in the VPC, which you can get from here http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF&displaylang=en. Note that these image files expire every four months and have to be redownloaded.
Between IE8/7 and a VPC with IE6, you will be able to test in all three, including dynamic effects such as dropdowns, javascript or jQuery, Flash, etc. which cannot be tested in SuperPreview, BrowserLab, or other static page representations. Good luck!
cheers,
scott
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's). - Thanks for the info. I am now able to preview in IE6 however, do you have any more suggestions on the layout in IE6. I have been working on it for a while now....not getting anywhere. :( It looks like IE6 is enough to drive anybody crazy. :)
- I will suggest that you use the method described here to target IE6-only with your CSS while working to correct the display http://www.positioniseverything.net/articles/cc-plus.html. It has the great advantage of pemitting you to add CSS rules as you wish without worrying about affecting any other browser, and without requiring more than the single conditional comment to create the wrapper div that is visible only to IE6.
Once that is done, you write your selectors for IE6 as descendants of ie6root, and can experiment as much as you want, like so
#ie6root #masthead {
... css rules
}
#ie6root #container {
,,, css rules
}
and so forth. Only IE6 will see those rules, so you don't have to worry about breaking anything while you work on addressing IE6.
cheers,
scott
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's).- Marked As Answer byFPC_D Wednesday, November 18, 2009 8:27 PM
- Scott,
Thanks for all of your help. I now have the menu working in IE 6,7,8, Chrome, Safari, Firefox and Opera. There might be some glitches in IE6 as I go along though. I found when I preview it on my VPC at the office it works the same as all the others. However, when I view it from my VPC at home, it flashes as I go down the menu. Here is the updated link if you want to take a look. http://calvin.hereyallgo.com/default_copy(1).aspx
I am sure you will be hearing from me soon with more questions. :) - Great! Glad you got it working, David. It looks fine in IE6 on my local VPC. I don't see any flashing; that may have been because the background images had not yet been cached on your local machine at home. It may go away with repeat viewing, which would confirm that it is an image caching issue.
You're coming along great. Every time you face down and resolve an issue like this you learn a little more. Keep on learning, and feel free to come back and ask anytime; that's what we're here for. ;-)
cheers,
scott
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's).
