...

View Full Version : Resolved Position of three div in a row



Energia
02-15-2011, 02:05 PM
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:


<!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>


/* 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 :thumbsup:

Excavator
02-15-2011, 02:54 PM
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?

Energia
02-15-2011, 03:19 PM
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?

Excavator
02-15-2011, 04:06 PM
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 -

<!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 (http://nopeople.com/CSS%20tips/simple3column/index.html).

Energia
02-16-2011, 06:57 PM
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 (http://homeweb.mah.se/~m10k5976/asterix/webbtv/index.html)


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:


/* 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:


<!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>

teedoff
02-16-2011, 07:14 PM
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.

Excavator
02-16-2011, 07:16 PM
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 -
#page{
width: 800px;
/*height: 600px;*/
background: #ccc;
}

Excavator
02-16-2011, 07:36 PM
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 -
/* 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 -

<!-- 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>

Energia
03-03-2011, 10:38 AM
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!

Energia
03-04-2011, 11:06 AM
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?

teedoff
03-04-2011, 03:08 PM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum