Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Positioning problem with image and text in css

    Hi everyone-
    I'm having a tough time on the home page of this site. As you can see, the text, which should be next to the picture, is floated right but won't line up with the image. I feel like I've tried everything! Also, I'm unhappy with the amount of space between the nav bar and top of the picture, but I can't get that to close up either. Any help as soon as possible (this is supposed to go live) would be appreciated so much!
    here is the html and css for it.

    Code:
    <?xml version="1.0" encoding="utf-8"?> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head>
    <title> </title><link rel="stylesheet" type="text/css" href="index_style.css"/>
    <meta name="language" content="English" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript">
    <!-- 
    function ViewSource() {
    window.location = "view-source:" + window.location.href }
    // -->
    </script>
    
    </head>
    <body>
    
     <div class="container">  
     
      
      <div id="logo"><img class="logo" src="logo_add_large.png" alt="b10 logo"  width="958" height="160" /></div>
    
       
    <div class="bar"><img src="orange_bar.png" width="900" height="37" alt="bar"/></div>
        
     
    <div id="navbar"><ul>
     
     <li><a href="index.html">Home</a></li>
     <li><a href="menu_page.html">Menu</a> </li>
     <li><a href="news.html">News</a></li>
    <li><a href="staff.html">Staff</a></li>
    
        
    <li><a href="gallery.html">Gallery</a></li>
     </ul>
    </div>
      
     
      <img class="painting" src="paintings.gif" alt="copper pot and apple" width="600" height="466" />
        
       <div id="maincontent">
      <h1>French-Inspired American Cuisine </h1>
        <div id="text">
        <p>text</p>
        </div>
        
        <div class="hours">
    
    <p class="hour_titles">
    Lunch</p>
    
    <p class="timedate">
    Tuesday&ndash;Friday<br/>
    
    11:30 am&ndash;2:00 pm</p>
    
    <p class="hour_titles">Dinner<br/></p>
    
    <p class="timedate">Tuesday&ndash;Saturday<br/>
    
    5:00&ndash;close</p>
    
    <p class="hour_titles">Happy Hour</p>
    <p class="timedate">
    Tuesday&ndash;Saturday<br/>
    4:00&ndash;6:00<br/><br/>
    
    Closed Sunday and Monday</p>
    </div>
    </div>
    
    
    
    </div>
    </body>
    </html>
    and css

    Code:
    body  {
    
    	background-image:url(brown_back.gif);
    	     background-repeat: no-repeat;
    	margin: 0 auto; 
    		padding: 0;
    	text-align: center; 
    }
    
    
    .container {
     
      margin-top:20px;
      margin-bottom: 20px;
      margin-left: auto;
      margin-right: auto;
      padding-bottom:20px;
      text-align:left; 
      width: 900px; 
       width: 900px; 
    }
    html>body #content {
      width: 900px; 
    }
    
    img.logo {display: block;
        float:left;
    	padding-top:0px;
    	}
    
    img{border:none;}
    
    
    
    #bar{float: left;
    z-index:1;}
    
    
    
    
    
    #navbar
    {
    	position:relative;
    	z-index:20;
    	
    	width:800px;
    	bottom: 55px;
    }
    
    #navbar ul li {
    display:inline;
    padding-left:50px;
    margin:0;
    margin-right:45px;
    }
    
    
    #navbar a:link,
     #navbar a:visited { 
    color:#FFFFFF;
    text-decoration:none;
    font-family:"Monotype Corsiva", "Apple Chancery", cursive;
    font-size: 1.35em;
    }
    
    #navbar a:hover  {
    color: #CC0000;
    }
    
    
    
    #navbar ul{padding-top:5px;
    }
    
    
    #nav a:active {
    color: #FFCC00;
    }
    
    
    #text{
    	display:inline-block;	
    	width: 200px;
    	height: 184px;
    font-family: “Tahoma”, Geneva, sans-serif;
    color: #FFFFFF;
    padding-left:20px;
    }
    
    img.painting 
    {
    margin:0;
    padding:0;
    	border-style:double;
    	border-color:#4c2e1f;
    	border-width:.55em;
    
    }	
    
    
    
    #maincontent
    
    {float:right;
    	margin:0;
    	width:230px;
    	text-align:left;
    	font-size: .80em;
    	}
    
    
    h1{
    	font-family: "lucinda sans", Helvetica, Sans-serif;
    	color: #990000;
    	margin-left:20px;
    	width: 268px;
    }
    
    p{margin:0;
    padding:4px;;}
    
    .hours
    {font-family:“Tahoma”, Geneva, sans-serif;
    color:#FFFFFF;
    	
    	font-size:.9em;
    	line-height:.25em;
    	margin-left: 20px;
    	padding-top:30px;
    	height: 175px;
    }
    
    .timedate{
    line-height:15px;
    }
    
    
    .hour_titles
    {line-height: 5px;
    color:#CC0000;
    font-size: 1.75em;
    font-family:"Monotype Corsiva", "Apple Chancery", cursive;
    
     }
    And I'm really sorry if I didn't put the code in correctly--If someone could advise me on what I need to do I will do so in the future. thanks again
    Last edited by inkgrrl; 01-23-2009 at 06:25 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello inkgrrl,
    A few problems there... your .container is only 900px wide but your putting a 958px wide header image into it. You have an orange .png background for the menu but it's too narrow for either the ul or #navbar.

    I can help with a little start here if you're interested - http://nopeople.com/inkgrrl/ Look at the source to see how it's done, you're welcome to use it if you like.
    I know it's valid but there is plenty that could still be fixed, I didn't do anything with your text in #maincontent.


    Edit: I went back and did a little more. Thought that was a good place for a dl and I made your menu a little better
    Last edited by Excavator; 01-23-2009 at 04:24 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hi Excavaor-
    thanks for the tips..I meant to fix the logo being larger than the container..i did notice that. Thanks for the link to what you did--I viewed the code but don't see the css--did you eliminate the orange bar img? I wanted to but couldn't get it to extend far enough, although that was when my idea was to have the nav bar go across the length of the screen.
    I am examining and comparing codes carefully--I know I take the long road in some of this..still learning!

    Any clue about the text not coming up? I can tweak the other stuff, but this issue make the website unviewable, really. Thanks again!
    Last edited by inkgrrl; 01-23-2009 at 04:19 AM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by inkgrrl View Post
    Hi Excavaor-
    thanks for the tips..I meant to fix the logo being larger than the container..i did notice that. Thanks for the link to what you did--I viewed the code but don't see the css--did you eliminate the orange bar img?!
    I cut a slice out of the orange bar and repeated it.
    You can get the files at http://nopeople.com/inkgrrl/files.zip, that will have the .css in it.

    You should get the web developers toolbar for FireFox. You would be able to see the .css easier then, edit it live too.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by inkgrrl View Post
    Any clue about the text not coming up?
    I guess I don't understand where you want it to be. Can put it anywhere you want though.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Jan 2009
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks so much for the toolbar tip! I will certainly do that. My friend told me to do everything in dreamweaver but since I learned to code it by hand dreamweaver seems more a pain than anything, the only thing I have used it for is browser viewing that is a little quicker.

    I just want the header to be lined with the top of the img, the text in the center, and the hours down towards the bottom with it's last line (closed sunday..) lined with the bottom of the img. Basically where it is now, but shifted up! thanks so much!
    Last edited by inkgrrl; 01-23-2009 at 04:46 AM.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by inkgrrl View Post


    But I have to say, the pressing issue is the darn text that won't move up. Please help! I'm stumped.
    Sorry I'm being so dense... exactly what text are you wanting to move up and exactly where do you want to move it to?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Jan 2009
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts
    No problem--I'm thankful you are being so helpful, maybe I'm not being clear. Basically, in the code it's #maincontent. If you look at the site you did as an example for me, it's the text that has the header "French-Inspired American Cuisine" that starts in the bottom right corner, you can see the content if you scroll down. I just want it moved up to sit next to the image of the pot.

  • #9
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Add float: left; to your painting class in the CSS.

    Code:
    img.painting 
    {
    	margin:0;
    	padding:0;
    	border-style:double;
    	border-color:#4c2e1f;
    	border-width:0.55em;
    	float: left;
    
    }
    edit: Sorry, that only fixes it in Firefox. Perhaps in IE7 it's okay, but in IE6 the problem remains.
    Last edited by Fisher; 01-23-2009 at 06:05 AM.

  • Users who have thanked Fisher for this post:

    inkgrrl (01-23-2009)

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by inkgrrl View Post
    No problem--I'm thankful you are being so helpful, maybe I'm not being clear. Basically, in the code it's #maincontent. If you look at the site you did as an example for me, it's the text that has the header "French-Inspired American Cuisine" that starts in the bottom right corner, you can see the content if you scroll down. I just want it moved up to sit next to the image of the pot.
    Gotta love IE6!
    I was looking at it in FF3, IE8 and IE7... didn't have the IE6 machine on.

    It's fixed now. float:left; does it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    inkgrrl (01-23-2009)

  • #11
    New Coder
    Join Date
    Jan 2009
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks so much to both of you! I was fiddling around, and because i was scared float wouldn't work in Explorer (and because it was approaching 2 am) I ended up putting a negative position on the text and that seemed to work too, although it made me nervous. I will change it to float, though. Is it bad for any reason to use negative positioning, for the record?

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I don't like to use negative margins unless they're needed.
    Float is the way to do it.

    One more change for you (the bits in red):
    css
    Code:
    body  {
    	text-align: center;
    	background: #250F00;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	margin: 20px auto;
      	padding-bottom: 20px;
      	text-align:left; 
      	width: 958px; 
    }
    #logo {
    	height: 160px;
    }
    /*************nav***************/
    			ul#navbar {
    				height: 37px;
    				line-height: 37px;
    				background: url(orange_bar.png) repeat-x;
    			}
    			ul#navbar li {
    				display: inline;
    			}	
    			#navbar a:link, #navbar a:visited { 
    				color: #fff;
    				padding: 4px 45px 5px 50px; /*makes the clickable area bigger*/
    				text-decoration: none;
    				font: 1.35em "Monotype Corsiva", "Apple Chancery", cursive;
    			}
    			#navbar a:hover  {
    				color: #cc0000;
    			}
    			#nav a:active {
    				color: #ffcc00;
    			}
    #painting {
    	border: double .55em #4c2e1f;
    	margin: 30px 0 0 0; /*adjust space between nav and image here*/
    	float: left;
    }	
    #maincontent {
    	float: right;
    	width: 230px;
    	text-align: left;
    	font-size: .80em;
    	margin: 30px 30px 0 0;
    	padding: 0 0 0 20px
    }
    h1 {
    	font-family: "lucinda sans", Helvetica, Sans-serif;
    	color: #990000;	
    }
    #text{
    	width: 200px;
    	color: #fff;
    }
    
    /***********dl styles*********/
    		dl#hours {
    			font: .9em Tahoma, Geneva, sans-serif;
    			color: #fff;
    			margin: 50px 0 0 0;
    		}
    		dt.hour_titles {
    			color: #cc0000;
    			font: 1.75em "Monotype Corsiva", "Apple Chancery", cursive;
    		}
    		dd.timedate{
    			color: #fff;
    		}
    		dd.last {
    			margin: 50px 0 0 0;
    		}
    markup:
    Code:
    <dl id="hours">
                    <dt class="hour_titles">Lunch</dt>
                        <dd class="timedate">Tuesday&ndash;Friday</dd>
                        <dd class="timedate">11:30 am&ndash;2:00 pm</dd>
                    <dt class="hour_titles">Dinner</dt>
                        <dd class="timedate">Tuesday&ndash;Saturday</dd>
                        <dd class="timedate">5:00&ndash;close</dd>
                    <dt class="hour_titles">Happy Hour</dt>
                        <dd class="timedate">Tuesday&ndash;Saturday</dd>
                        <dd class="timedate">4:00&ndash;6:00</dd>
                    <dd class="timedate last">Closed Sunday and Monday</dd>
                </dl>
            <!--end maincontent--></div>
        <!--end container--></div>
    </body>
    </html>
    Last edited by Excavator; 01-23-2009 at 05:15 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    New Coder
    Join Date
    Jan 2009
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks so much. You've been extremely helpful. I will change the negative numbers to float when i get home. A friend told me that on his internet explorer the words are bunched up, like the line height is off. I don't know which IE he's running, but mine at work looked fine, and i checked it on http://ipinfo.info/netrenderer last night in, i think, ie7 and 6 and they looked ok, assuming it's accurate. hmmm...

  • #14
    New Coder
    Join Date
    Jan 2009
    Posts
    27
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thanks everyone!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •