 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
drake14
Joined: 29 Jul 2005
Posts: 132
Location: around...
|
 Posted: Wed May 14, 2008 5:18 am fluid css? |
 |
|
|
ok....this is really upsetting....everything i try isn't working.
i'm not sure if anyone knows what i REALLY want. so i'll try and explain it the best i can.
when i place my divs, i use an image for the background, a layout that i've sliced. but say if i minimize my browser window, each div gets messed up and everything is moved out of place, the same thing if i view it in a different resolution....
and if i put text divs over my background image divs, then those divs move around too. it doesnt make any sense. i'm pretty sure that i'm looking for a fluid layout...but it's not working at all...
is there another way to make everything line up? i've tried using tables but i'm not sure if i'm doing it right. |
|
sticks464
Joined: 31 Dec 2006
Posts: 837
|
| Posted: Wed May 14, 2008 5:57 am |
|
|
|
| You'll need to post your code for us to look at. Most likely there is not a main container to hold all the elements and keep them in place. You can google for 'fluid css layout' |
|
drake14
Joined: 29 Jul 2005
Posts: 132
Location: around...
|
| Posted: Wed May 14, 2008 7:23 am |
|
|
|
HTML
| Code: |
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div id="header">
</div>
<div id="nav">
</div>
<div id="text">
</div> |
CSS
| Code: |
body
{
font-size: 100%;
font-family: Times New Roman;
}
#header
{
background-image: url('images/header.jpg');
background-repeat: no-repeat;
width: 800px;
height: 130px;
margin: 28px 0 0 80px;
float: middle;
}
#nav
{
background-image: url('images/nav.jpg');
background-repeat: no-repeat;
width: 800px;
height: 130px;
margin: 0px 0 0 80px;
float: middle;
}
#text
{
background-image: url('images/text.jpg');
background-repeat: no-repeat;
width: 800px;
height: 400px;
margin: -108px 0 0 80px;
float: middle;
} |
|
|
sticks464
Joined: 31 Dec 2006
Posts: 837
|
| Posted: Wed May 14, 2008 8:53 am |
|
|
|
Give this a try
| Code: |
css
body{
font-size: 100%;
font-family: Times New Roman;
}
#container {
width:800px;
margin:0 auto;
}
#header{
background: url('images/header.jpg') no-repeat;
height: 130px;
margin: 28px 0 0 80px;
}
#nav{
background: url('images/nav.jpg') no-repeat;
background-repeat: no-repeat;
height: 130px;
margin: 0px 0 0 80px;
}
#text{
background-image: url('images/text.jpg') no-repeat;
height: 400px;
margin: 0 0 0 80px;
} |
| Code: |
html
<div id="container">
<div id="header"> Test
</div>
<div id="nav"> Test
</div>
<div id="text"> Test
</div>
</div> |
|
|
drake14
Joined: 29 Jul 2005
Posts: 132
Location: around...
|
| Posted: Thu May 15, 2008 4:58 am |
|
|
|
that worked perfectly!!!!!
thanks so much! i appreciate it!  |
|
drake14
Joined: 29 Jul 2005
Posts: 132
Location: around...
|
| Posted: Thu May 22, 2008 5:04 am |
|
|
|
I'm having a problem.
my text div won't line up next to my nav divs unless i have the margin for the text at -560. is that supposed to happen?
also, how would i get the text in the side navigation to show up in the middle of the navigation areas, make a seperate div for those? heres what my code looks like.
CSS
| Code: |
body{
font-size: 100%;
font-family: Times New Roman;
background-color: #0064A1;
}
h1, h2, h3, h4, h5, h6
{color: #FFFFFF}
li, u, b, i
{color: #990033;}
p {color: #990033}
hr {color: #990033}
a:link {color: #990033}
a:visited {color: #990033}
a:hover {color: #FFFFFF}
a:active {color: #990033}
td
{color: #990033}
#container {
width: 100%;
margin:0 auto;
}
#header{
background: url('images/header.jpg') no-repeat;
height: 273px;
margin: 0 auto;
}
#nav{
background: url('images/nav.jpg') no-repeat;
height: 50px;
margin: 0 auto;
text-align: center;
}
#leftnavtop{
background: url('images/top_nav_left.jpg') no-repeat;
height: 280px;
margin: 0 auto;
}
#leftnavbottom{
background: url('images/bottom_nav_left.jpg') no-repeat;
height: 280px;
margin: 0 auto;
}
#text{
background: url('images/text.jpg') repeat-y;
height: 500px;
margin: -560 147 auto;
text-align: left;
padding: 15px;
}
#footer{
background: url('images/footer.jpg') no-repeat;
height: 50px;
margin: 0 auto;
} |
HTML
| Code: |
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
<title>Home</title>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="nav">
<p>
text
</p>
</div>
<div id="leftnavtop"
<p>
text
</p>
</div>
<div id="leftnavbottom"
<p>
text
</p>
</div>
<div id="text">
<p>
text
</p>
</div>
<div id="footer">
</div>
</div> |
|
|
Straystudio
Joined: 14 Apr 2008
Posts: 182
Location: Nord Italy
|
| Posted: Thu May 22, 2008 8:17 am |
|
|
|
First of all, and since all the DIVs are well sized in pixel, I would process the Document as the below version, where colored borders have been entered to recognize how things move and interfere; and each DIVs' Data readly show on the field, too.
This helps the helpers so much.
You could even get background-images not to load.
| Code: |
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
<title>Home</title>
<style type="text/css">
body{
font-size: 100%;
font-family: Times New Roman;
background-color: #0064A1;
}
h1, h2, h3, h4, h5, h6
{color: #FFFFFF}
li, u, b, i
{color: #990033;}
p {color: #990033}
hr {color: #990033}
a:link {color: #990033}
a:visited {color: #990033}
a:hover {color: #FFFFFF}
a:active {color: #990033}
td
{color: #990033}
#container {
width: 100%;
margin:0 auto;
border: 1px dashed black;
}
#header{
background: url('images/header.jpg') no-repeat;
height: 273px;
margin: 0 auto;
border: 1px solid yellow;
}
#nav{
background: url('images/nav.jpg') no-repeat;
height: 50px;
margin: 0 auto;
text-align: center;
border: 1px solid red;
}
#leftnavtop{
background: url('images/top_nav_left.jpg') no-repeat;
height: 280px;
margin: 0 auto;
border: 1px solid lime;
}
#leftnavbottom{
background: url('images/bottom_nav_left.jpg') no-repeat;
height: 280px;
margin: 0 auto;
border: 1px solid blue;
}
#text{
background: url('images/text.jpg') repeat-y;
height: 500px;
margin: -560 147 auto;
text-align: left;
padding: 15px;
border: 1px solid white;
}
#footer{
background: url('images/footer.jpg') no-repeat;
height: 50px;
margin: 0 auto;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<font color="#ffff00">div id="header"</font> <br />
background: url('images/header.jpg') no-repeat; <br />
height: 273px; <br />
margin: 0 auto; <br />
</div>
<div id="nav">
<font color="#ff0000">div id="nav"</font>
background: url('images/nav.jpg') no-repeat; <br />
height: 50px; <br />
margin: 0 auto; <br />
text-align: center; <br />
<p>
text
</p>
</div>
<div id="leftnavtop"
<font color="#00ff00">div id="leftnavtop"</font> <br />
background: url('images/top_nav_left.jpg') no-repeat; <br />
height: 280px; <br />
margin: 0 auto; <br />
<p>
text
</p>
</div>
<div id="leftnavbottom"
<font color="#0000ff">div id="leftnavbottom"</font> <br />
background: url('images/bottom_nav_left.jpg') no-repeat; <br />
height: 280px; <br />
margin: 0 auto; <br />
<p>
text
</p>
</div>
<div id="text">
<font color=#ffffff">div id="text"</font> <br />
background: url('images/text.jpg') repeat-y; <br />
height: 500px; <br />
margin: -560 147 auto; <br />
text-align: left; <br />
padding: 15px; <br />
<p>
text
</p>
</div>
<div id="footer">
<font color="">div id="footer"</font> <br />
background: url('images/footer.jpg') no-repeat; <br />
height: 50px; <br />
margin: 0 auto; <br />
</div>
</div>
</body>
</html>
|
|
|
Straystudio
Joined: 14 Apr 2008
Posts: 182
Location: Nord Italy
|
| Posted: Thu May 22, 2008 9:00 am |
|
|
|
| drake14 wrote: |
my text div won't line up next to my nav divs unless i have the margin for the text at -560. is that supposed to happen?
|
Regular behaviour of DIV, TABLE as well, is to start own new-line detaching from everything previous. They start below the previous Element.
As well, where DIV ends, the next Element finds its place below the DIV.
This happens also if the DIV's WIDTH is sized not to take the whole screen's width.
This is why DIV and TABLE are called Block Elements; in-line Elements make the other category.
Different behaviours can be achieved per style="position: relative/absolute/fixed; top:; left:;"
So, what You really built is a vertical sequence of DIVs.
That margin at -560 acts likewise position:relative; moving the DIV from the place it takes naturally, towards the top of the layout.
As a consequence, "text" div leaves room to the following "footer" div, this also moving to top.
Using my version and without backgr.imgs, cut off margin: -560 147 auto; from the "text" div style and You will see their actual, natural vertical sequence.
And yes, that is supposed to happen.
If not sized, DIV shape interests the whole width it can find available; in this case, the whole BODY. |
|
drake14
Joined: 29 Jul 2005
Posts: 132
Location: around...
|
| Posted: Fri May 23, 2008 4:51 am |
|
|
|
| ok...well i set the position to relative, and it didn't do anything at all. maybe i don't understand what you're saying....the text div stayed at the bottom of the page >.< |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
