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 11 of 11
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Position of three div in a row

    Hello world!

    I´m trying to make a homepage that has two image, one on the left and one at the right side of the content.

    I have tried to put the images in the body (both of them) and one in body and other in html. But then it gets problem when im about to give them their position that I want. So I created one div for the left image and one div for the content and another for the right image.
    I want the image to be at the bottom (one to the left bottom, and other to the right bottom). And the content in the middle at the top.

    Have you any suggestions how this could be possible?

    Take a look at the code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
      <head>
        <title>Webb-TV</title>
    
    <link rel="stylesheet" type="text/css" href="style.css">
    
      </head>
    
      <body>
    <!-- här är page -->
        <div id="page">
    	   
    <!-- meny --> 
    
          <div id="navcontainer">
            <ul>
            <li><a href="index.html"><img src="bilder/okan_webbtv.png" alt="Kultur webbtv i Malmö"></a></li>
            <li><a href="synpunkter.html">Om Ikán</a></li>
            <li><a href="profilprodukter.html">Kontakt</a></li> 
    		</ul>
    
    <!-- sluttag för navcontainer -->
      </div>
    
    <!-- contentleft ricardo -->
    
    <div id="contentleft">
    
    <img src="bilder/webbtv.png" alt="Reporter Ricardo Fidelis">
    
    <!-- contentleft slutar -->
    </div>
    
    <!-- content -->
    
    <div id="content">
       
       <!-- webbtv live -->
    <object id="bplayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="550"><embed name="bplayer" src="http://static.bambuser.com/r/player.swf?username=sincway" type="application/x-shockwave-flash" width="320" height="550" allowfullscreen="true" allowscriptaccess="always" wmode="opaque"></embed><param name="movie" value="http://static.bambuser.com/r/player.swf?username=sincway"></param><param name="allowfullscreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="opaque"></param></object>
    
     <!-- webbtv live slutar -->
    
    
    <!-- content slutar -->      
    	  </div>
    
    <!-- contentright sean -->
    <div id="contentleft">
    
    <img src="bilder/webbtv_malmo.png" alt="Reporter Sean">
    
    <!-- contentright slutar -->
    </div>
    
    <!-- footer börjar -->
    
          <div id="footer">
    
            <p>Denna webbplats är egenhändigt konstruerad av: <a href="mailto:christina.wallin@gmail.com">Christina Wallin</a></p> 
    
    <!-- avsluttagg för footer -->
    </div>
    
    
    <!-- Här avslutas page med div tagg -->
      </div>
    
      </body>
    </html>
    Code:
    /* Här styr jag hela sidan */
    #page{
           width: 800px; 
           height: 600px;
    
    }
    
    
    /* Har styr jag min meny och navigering*/
    
    #navcontainer ul {
    	width: 800px;
    	float: left;
    	padding: 0;
    	margin: 0;
    	margin-bottom:10px;
    	background-color: #000;
    	font-size: medium;/*storlek*/
    	border-top: 3px solid #FF0000;
    }
    
    #navcontainer li { 
    	display: inline;
    }
    
    #navcontainer a {
    	float: left;
    	padding: 0.3em 1.4em; 
    	background-color: #000;	
    	color: #FFF;		 	
    	text-decoration: none;
    }
    
    #navcontainer a:hover {
    	background-color: #000000;	
    	color: #FF0000;
    }
    
    /* Här styr jag ricardo till vänster */
    
    #contentleft{ 
                 width:200px;
                 height:500px; 
                 background-color:#000;
                 
            
    }
    
    /* Här styr jag innehåll */
    
    #content{
           width: 370px;
           height: 500px;
           clear:both;
           margin: auto;
           background-color: #FFF;
           overflow-x: hidden; overflow-y: scroll;
           font-family: Verdana, Arial; font-size: 12px;
    }
    
    /* Här styr jag sean till höger */
    #contentright{ 
                  width:200px;
                  height:500px;
                  background-color:#000;
           
    }
    
    
    
    /* Här styr jag p */
    
    p{
          text-align: justify; margin-right: 0.5em;
    }
    
    /* Här styr jag img */
    
    img{
          border: 0;
    }
    
    /* Här styr jag footer */
    #footer {
           width: 800px;
           height: 20px;
           clear: both;
           overflow: hidden;
           background-color: #000000;
           font-family: Georgia, Garamond; font-size:12px; color:#FFF;
    }
    
    #footer p{text-align: center; margin: 3px;}
    #footer a{color: #FFF;}
    #footer a:hover{color: #FF0000;}
    Great if you could help me out here
    Last edited by venegal; 03-04-2011 at 01:18 PM. Reason: resolved

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Energia,
    I'm a little confused where you want these images. You say one to the bottom left and one to the bottom right but your code has 2 divs with the id of contentleft.

    Do you want these two 500x200 images on the right and left of #page? Inside it or outside of 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

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Thanks for notis that Excavator. I did not understood why the div:s were fallowing the same position when ever I gave one of them a new position!

    Now Im trying to find the best way to give them the position I want, one bottom left other bottom right and in between I have an other div that I want in the middle at the top.

    Ideas?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    I'm kind of shooting in the dark a bit but try this. Just copy/paste the entire code into a new .html document and view it in your browser -
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Webb-TV</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    	font: 100% Verdana, Geneva, sans-serif;
    	color: #ccc;
    }
    #page {
    	width: 800px;
    	margin: 0 auto;
    	background: #0f0;
    }
    #contentleft,
    #contentright  {
    	width: 200px;
    	height: 500px;
    	position: relative;
    	background: #000;
    }
    	#contentleft img,
    	#contentright img {
    		position: absolute;
    		left: 0;
    		bottom: 0;
    	}
    		#contentleft {float: left;}
    		#contentright {float: right;}
    #content {
    	width: 370px;
    	height: 500px;
    	margin: 0 auto;
    	padding: 0 10px;
    	background: #fff;
    	overflow-x: hidden;
    	overflow-y: scroll;
    }
    #footer {
    	width: 800px;
    	height: 20px;
    	clear: both;
    	background: #f00;
    }
    </style>
    </head>
    <body>  
        <div id="page">
            <div id="contentleft"> 
                <img src="bilder/webbtv.png" alt="Reporter Ricardo Fidelis" />     
            <!-- contentleft slutar --></div>
                <div id="contentright"> 
                    <img src="bilder/webbtv_malmo.png" alt="Reporter Sean" />     
                <!-- contentright slutar --></div>  
            <div id="content"> 
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    <br /><br />
                    <br /><br />
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    <br /><br />
                    <br /><br />
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    <br /><br />
                    <br /><br />
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    <br /><br />
                    <br /><br />
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            <!-- content slutar --></div>  
                <div id="footer">
                <!-- avsluttagg för footer --></div>
        <!--end page--></div>
    </body>
    </html>
    That's based on this 3-column layout.
    Last edited by Excavator; 02-15-2011 at 04:09 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

  • #5
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Thank you Excavator for you idea! It was not how I was thinking from the beginning but it was intresting to see your solution.


    Here is the result



    I would like to ask you what I can do to not make the color from html, body (I think its from there) to not go outside the page. I tried to put width 800px but that dident change anything.. Ideas?

    Then I would like to ask you how I can get the images to be on the side of content? Now they are over the menubar and I wold like them to be just before footer.

    This is the code:

    Code:
    /* Här styr jag hela sidan */
    #page{
           width: 800px; 
           height: 600px;
    	   background-color: #000;
    }
    
    html, body {
        width: 800px; 
    	margin: 0;
    	background: #000;
    	font: 100% Verdana, Geneva, sans-serif;
    	color: #ccc;
    }
    
    
    /* Har styr jag min meny och navigering*/
    
    #navcontainer ul {
    	width: 800px;
    	float: left;
    	padding: 0;
    	margin: 0;
    	margin-bottom:10px;
    	background-color: #000;
    	font-size: medium;/*storlek*/
    	border-top: 3px solid #FF0000;
    }
    
    #navcontainer li { 
    	display: inline;
    }
    
    #navcontainer a {
    	float: left;
    	padding: 0.3em 1.4em; 
    	background-color: #000;	
    	color: #FFF;		 	
    	text-decoration: none;
    }
    
    #navcontainer a:hover {
    	background-color: #000000;	
    	color: #FF0000;
    }
    
    /* Här styr jag bilderna på sean och Ricardo */
    
    #contentleft,
    #contentright  {
    	width: 200px;
    	height: 200px;
    	position: relative;
    	background: #000;
    }
    	#contentleft img,
    	#contentright img {
    		position: absolute;
    		left: 0;
    		bottom: 0;
    	}
    		#contentleft {float: left;}
    		#contentright {float: right;}
    
    
    /* Här styr jag innehåll */
    
    #content{
           width: 600px;
           height: 500px;
           clear: both;
           margin: 0 auto;
           padding: 0 10px;
           background-color: #FFF;
           overflow-x: hidden; overflow-y: scroll;
           font-family: Verdana, Arial; font-size: 12px;
           position: relative;
    }
    
    
    /* Här styr jag p */
    
    p{
          text-align: justify; margin-right: 0.5em; color: #000000;
    }
    
    /* Här styr jag img */
    
    img{
          border: 0;
    }
    
    /* Här styr jag footer */
    #footer {
           width: 800px;
           height: 20px;
           clear: both;
           overflow: hidden;
           background-color: #000000;
           font-family: Georgia, Garamond; font-size:12px; color:#FFF;
           border-top: 3px solid #FF0000;
    }
    
    #footer p{text-align: center; margin: 3px; color: #FFF;}
    #footer a{color: #FFF;}
    #footer a:hover{color: #FF0000;}
    HTML:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
      <head>
        <title>Webb-TV</title>
    
    <link rel="stylesheet" type="text/css" href="style.css">
    
      </head>
    
      <body>
    <!-- här är page -->
    
        <div id="page">
    
            <div id="contentleft"> 
                <img src="bilder/webbtv.png" alt="Reporter Ricardo Fidelis" />
    			
    <!-- contentleft slutar --></div>
    
                <div id="contentright"> 
                    <img src="bilder/webbtv_malmo.png" alt="Reporter Sean" />
    				
    <!-- contentright slutar --></div>  
    
    	   
    <!-- meny --> 
    
          <div id="navcontainer">
            <ul>
            <li><a href="index.html"><img src="bilder/okan_webbtv.png" alt="Kultur webbtv i Malmö"></a></li>
            <li><a href="synpunkter.html">Om Ikán</a></li>
            <li><a href="profilprodukter.html">Kontakt</a></li> 
    		</ul>
    
    <!-- sluttag för navcontainer -->
      </div>
    
    
    <!-- content -->
    
    <div id="content">
       
       <!-- webbtv live -->
    <object id="bplayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="550"><embed name="bplayer" src="http://static.bambuser.com/r/player.swf?username=sincway" type="application/x-shockwave-flash" width="320" height="550" allowfullscreen="true" allowscriptaccess="always" wmode="opaque"></embed><param name="movie" value="http://static.bambuser.com/r/player.swf?username=sincway"></param><param name="allowfullscreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="opaque"></param></object>
     <!-- webbtv live slutar -->
    
    
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    
                </p>
    
    
    <!-- content slutar -->      
    	  </div>
    
    <!-- footer börjar -->
    
          <div id="footer">
    
            <p>Denna webbplats är egenhändigt konstruerad av: <a href="mailto:christina.wallin@gmail.com">Christina Wallin</a></p> 
    
    <!-- avsluttagg för footer -->
    </div>
    
    
    <!-- Här avslutas page med div tagg -->
      </div>
    
      </body>
    </html>

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I would like to ask you what I can do to not make the color from html, body (I think its from there) to not go outside the page. I tried to put width 800px but that dident change anything.. Ideas?
    Move the color style rule to your #page div.

    #page {background-color:yourColor;}

    If I am understanding you correctly. The page div already has a width of 800px defined, so the background color of that div once set will only be 800px wide.
    Teed

  • Users who have thanked teedoff for this post:

    Energia (03-04-2011)

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Energia View Post
    I would like to ask you what I can do to not make the color from html, body (I think its from there) to not go outside the page. I tried to put width 800px but that dident change anything.. Ideas?
    600px is not enough height for the content you put in #page. Just remove that height so #page will expand to enclose it's contents naturally. I put a #ccc background color on it for demonstration -
    Code:
    #page{
           width: 800px; 
    /*height: 600px;*/
    	   background: #ccc;
    }
    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
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Energia View Post
    Then I would like to ask you how I can get the images to be on the side of content? Now they are over the menubar and I wold like them to be just before footer.
    Your images are in 200px square divs right now. Try making your CSS look like this -
    Code:
    /* Här styr jag hela sidan */
    html, body {
    /*width: 800px*/
    	margin: 0;
    	background: #000;
    	font: 100% Verdana, Geneva, sans-serif;
    	color: #ccc;
    }
    #page{
           width: 1020px; 
    margin: 0 auto;
    position: relative;
    	   background: #ccc;
    }
    
    
    
    /* Har styr jag min meny och navigering*/
    
    #navcontainer ul {
    width: 100%;
    	float: left;
    	padding: 0;
    	margin: 0;
    	margin-bottom:10px;
    	background-color: #000;
    	font-size: medium;/*storlek*/
    	border-top: 3px solid #FF0000;
    }
    
    #navcontainer li { 
    	display: inline;
    }
    
    #navcontainer a {
    	float: left;
    	padding: 0.3em 1.4em; 
    	background-color: #000;	
    	color: #FFF;		 	
    	text-decoration: none;
    }
    
    #navcontainer a:hover {
    	background-color: #000000;	
    	color: #FF0000;
    }
    
    /* Här styr jag bilderna på sean och Ricardo */
    
    /*#contentleft,
    #contentright  {
    	width: 200px;
    	height: 200px;
    	position: relative;
    	background: #000;
    }
    	#contentleft img,
    	#contentright img {
    		position: absolute;
    		left: 0;
    		bottom: 0;
    	}
    		#contentleft {float: left;}
    		#contentright {float: right;}
    */
    #leftImg, 
    #rightImg {
    	width: 200px;
    	height: 200px;
    position: absolute;
    bottom: 20px;
    }
    #leftImg {left: 0;}
    #rightImg {right: 0;}
    
    /* Här styr jag innehåll */
    
    #content{
           width: 600px;
           height: 500px;
           clear: both;
           margin: 0 auto;
           padding: 0 10px;
           background-color: #FFF;
           overflow-x: hidden; overflow-y: scroll;
           font-family: Verdana, Arial; font-size: 12px;
           position: relative;
    }
    
    
    /* Här styr jag p */
    
    p{
          text-align: justify; margin-right: 0.5em; color: #000000;
    }
    
    /* Här styr jag img */
    
    img{
          border: 0;
    }
    
    /* Här styr jag footer */
    #footer {
           width: 100%;
           height: 20px;
           clear: both;
           overflow: hidden;
           background-color: #000000;
           font-family: Georgia, Garamond; font-size:12px; color:#FFF;
           border-top: 3px solid #FF0000;
    }
    
    #footer p{text-align: center; margin: 3px; color: #FFF;}
    #footer a{color: #FFF;}
    #footer a:hover{color: #FF0000;}
    And change your markup to look like this -
    Code:
    <!-- här är page -->
    
        <div id="page">
                <img src="bilder/webbtv.png" alt="Reporter Ricardo Fidelis" id="leftImg">
                    <img src="bilder/webbtv_malmo.png" alt="Reporter Sean" id="rightImg">
    	   
    <!-- meny --> 
    
          <div id="navcontainer">
            <ul>
            <li><a href="index.html"><img src="bilder/okan_webbtv.png" alt="Kultur webbtv i Malmö"></a></li>
            <li><a href="synpunkter.html">Om Ikán</a></li>
            <li><a href="profilprodukter.html">Kontakt</a></li> 
    		</ul>
    
    <!-- sluttag för navcontainer -->
      </div>
    
    
    <!-- content -->
    
    <div id="content">
       
       <!-- webbtv live -->
    <object id="bplayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="550" width="320"><embed name="bplayer" src="http://static.bambuser.com/r/player.swf?username=sincway" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" height="550" width="320"><param name="movie" value="http://static.bambuser.com/r/player.swf?username=sincway"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="wmode" value="opaque"></object>
    
    
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    <br><br>
                    <br><br>
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    <br><br>
                    <br><br>
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    <br><br>
                    <br><br>
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    <br><br>
                    <br><br>
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
    
     <!-- webbtv live slutar -->
    
    <!-- content slutar -->      
    	  </div>
    
    <!-- footer börjar -->
    
          <div id="footer">
    
            <p>Denna webbplats är egenhändigt konstruerad av: <a href="mailto:christina.wallin@gmail.com">Christina Wallin</a></p> 
    
    <!-- avsluttagg för footer -->
    </div>
    
    
    <!-- Här avslutas page med div tagg -->
      </div>
    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:

    Energia (03-04-2011)

  • #9
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Were schould I put the id:s in the HTML?

    Teedoff, thanks for your concrete answer! It did the trick!

    Excavator, I admire your knowledge! But I dont understand how you mean. I see that the pictures are not correct in their size. Were schould I place #contentleft/#contentright in the HTML? And way you want to put another div on the images #leftimage #rightimage? Can I make one "rightdiv" and another "leftdiv" and still make the pictures be were you successfully putted them?

    Here is the site: http://capoeiras.se/okan/

    I learned a lot from you both, thanks for sharing knowledge!
    Last edited by Energia; 03-03-2011 at 11:03 AM.

  • #10
    New Coder
    Join Date
    Dec 2010
    Posts
    99
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Thumbs up Solved!

    I read trough your cod suggestion Exavator and found out it was me myself that had done some misstakes. Your suggestion was exelent!

    But I needed to take out height and width of the two id of my images (leftImg & rightImg) because the CSS validator dident agree, but it made no diffrent from the result.

    Im learning more here then in my school!

    Thanks!!

    How I do to make this thread solved?
    Last edited by Energia; 03-04-2011 at 11:18 AM.

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Energia View Post
    I read trough your cod suggestion Exavator and found out it was me myself that had done some misstakes. Your suggestion was exelent!

    But I needed to take out height and width of the two id of my images (leftImg & rightImg) because the CSS validator dident agree, but it made no diffrent from the result.

    Im learning more here then in my school!

    Thanks!!

    How I do to make this thread solved?
    Glad you got it working! Excavator is the man...if he gives you some code or help, you can count on it being right!
    Teed


  •  

    Tags for this Thread

    Posting Permissions

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