CSS Question
- Started
- Last post
- 29 Responses
- epikore
Is there a reason why the yahoo links below show up only twice even when it's listed 4 times?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Learning CSS</title><style type="text/css">
body {
background-color: grey;
background-image: url(palin.jpg);
font-size: 11px;
font-family: verdana;
font-color: white;
}#one {
background: #fef886;
width: 800px;
height: 1200px;
border: 1px;
border-color: solid black;
border-style: dotted dashed double solid
margin: 50px;
}</style>
</head><body>
<center>
<div id="one">
<p>
<center><a href="http://www.yahoo.com>One</a></center>
</p>
<p>
<center><a href="http://www.yahoo.com>One</a></center>
</p>
<p>
<center><a href="http://www.yahoo.com>One</a></center>
</p>
<p>
<center><a href="http://www.yahoo.com>One</a></center>
</p>
</div>
</center></body>
</html>
- ukit0
Can you post a link to the page?
- epikore0
Also, why doesn't my border show up in the div with the id "one"?
- Ravdyk0
you forgot ;
- imnotaplumber0
you left of the end quotes in the link too
<a href="http://www.yahoo.com">
- benfal990
CSS! That band sucks!
- epikore0
How do I make the id "left" stay left within the div tag "main" rather than all the way to the left of the browser?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Page</title><style type="text/css">
body {
background-color: #F9F1BF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Verdana, Geneva, sans-serif;
color: #600;
font-size: 11px;
}#main {
background-color:#930;
width: 800px;
height: 1200px;
}#header {
background-color:#C63;
width: 780px;
height: 50px;
padding: 10px;
}#menu {
background-color:#FC0;
width: 780px;
height: 20px;
padding: 10px;
}#left {
background-color:#396;
width: 200px;
height: 400px;
padding: 10px;
position:absolute;
top: 300px; left: 0;
}#middle {
background-color:#963;
width: 350px;
height: 900px;
padding: 10px;}
#right_top {
background-color:#FCC;
width: 200px;
height: 300px;
padding: 10px;
}#right_bottom {
background-color:#03C;
width: 200px;
height: 400px;
padding: 10px;
}</style>
</head><body>
<center>
<div id="main"><div id="header">
</div><div id="menu">
</div><div id="left">
hello<br/>
hello<br/>
hello<br/></div>
<div id="middle">
hello<br/>
hello<br/>
hello<br/>
</div><div id="right_top">
hello<br/>
hello<br/>
hello<br/>
</div><div id="right_bottom">
hello<br/>
hello<br/>
hello<br/>
</div></div>
</div>
</center>
</body>
</html>
- Dancer0
It would be more helpful if you showed the page live
- epikore0
Here's the page:
http://www.epikore.0catch.com/te…
I want the green box aligned to the left, the brown box centered, the pink and blue box aligned to the right with the pink on top of the blue.
- why not get some paid hosting ?? instead of some crappy free hosting with all those links floating around.pablito
- pylon0
Your code has some problems. Don't use <center> as mentioned above.
Just strip the CSS from the suggested layout above and modify to suit. http://layouts.ironmyers.com/950…
What do you mean all constipated together???
- janne760
get a css widget
- epikore0
I think the main issue i'm trying resolve at the moment is nested div tags extending the boundaries of the main div tag. I've uploaded a simpler version here:
http://www.epikore.0catch.com/te…
Notice the smaller box on the lower right of the browser. I want that box to stay inside the bigger box on the top right.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Test 2</title><style type="text/css">
body {
background-color: #F9F1BF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Verdana, Geneva, sans-serif;
color: #600;
font-size: 11px;
}#main {
background-color:#930;
width: 300px;
height: 300px;
}#inside {
background-color:#C63;
width: 100px;
height: 100px;
position: absolute;
bottom: 0px; right: 0px;}
</style>
</head><body>
<div id="main">
boogie woogie
<div id="inside">
boogie woogie
</div>
</div>
</body>
</html>- use floats, then control its position with margins.
pablito
- use floats, then control its position with margins.
- kerus0
stop that.
- epikore0
no
- 1pxsolid0
what the hell is that website?
Anyway... it's called Absolutely Relative. Any absolute position will escape to the nearest 'relatively' positioned parent...
So add 'position: relative" to #main
#main {
position: relative;
background-color:#930;
width: 300px;
height: 300px;
}
- pylon0
Hey epikore, why don't you draw us a picture of what you're trying to achieve and then we can maybe help you get there.
By we, I mean they because I'm going home.
But tomorrow...
- epikore0
I'm ~~~~~> <~~~~~~~ that close to using tables