HTML - DIV - CSS szétcsuszkálások
Az alábbi kódom van, és szétcsuszkál, még nagyon kezdetleges, de most csinálok ilyet először:
- need/elyts.css:
index.html
A szineket ne nézzétek, az scak a kiserletezés miatt olyan amilyen...
Ha tudtok rajtam segiteni. nagyon megköszönném.
■ - need/elyts.css:
body {
background-color: #e2e2e2;
font-family: Arial, Tahoma, "Trebuchet MS", sans;
margin: 0 0 0 0;
}
a:link, a:visited {
color: #2e2e2e;
text-decoration: none;
}
a:hover {
color: #262626;
text-decoration: none;
}
/*div | id*/
#topa {
position:absolute;
width:100%;
height: 65px;
background-color: /*#1b1b1b;*/ yellow;
left:0px;
top:0px;
}
#lefta {
position:absolute;
width: 15%;
background-color:green;
top:65px;
left:0px;
}
#centera {
position:absolute;
width: 70%;
margin-left:15%;
background-color:red;
top:65px;
}
#righta {
position:absolute;
margin-left:85%;
width: 15%;
background-color:white;
right:0px;
top:65px;
}
#bottoma{
position:absolute;
bottom:0px;
color:black;
width:100%;
height:60px;
background-color:blue;
left:0px;
right:0px;
margin-top: auto;
}
/*form | input*/
input {
background-color: #e2e2e2;
border:0px;
color:#1b1b1b;
}
background-color: #e2e2e2;
font-family: Arial, Tahoma, "Trebuchet MS", sans;
margin: 0 0 0 0;
}
a:link, a:visited {
color: #2e2e2e;
text-decoration: none;
}
a:hover {
color: #262626;
text-decoration: none;
}
/*div | id*/
#topa {
position:absolute;
width:100%;
height: 65px;
background-color: /*#1b1b1b;*/ yellow;
left:0px;
top:0px;
}
#lefta {
position:absolute;
width: 15%;
background-color:green;
top:65px;
left:0px;
}
#centera {
position:absolute;
width: 70%;
margin-left:15%;
background-color:red;
top:65px;
}
#righta {
position:absolute;
margin-left:85%;
width: 15%;
background-color:white;
right:0px;
top:65px;
}
#bottoma{
position:absolute;
bottom:0px;
color:black;
width:100%;
height:60px;
background-color:blue;
left:0px;
right:0px;
margin-top: auto;
}
/*form | input*/
input {
background-color: #e2e2e2;
border:0px;
color:#1b1b1b;
}
index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<title>demo</title>
<STYLE type=text/css>
@import url( need/elyts.css );
</STYLE>
</head>
<body>
<div id="topa"></div>
<div id="lefta"></div>
<div id="centera"></div>
<div id="righta"></div>
<div id="bottoma"></div>
</body>
</html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<title>demo</title>
<STYLE type=text/css>
@import url( need/elyts.css );
</STYLE>
</head>
<body>
<div id="topa"></div>
<div id="lefta"></div>
<div id="centera"></div>
<div id="righta"></div>
<div id="bottoma"></div>
</body>
</html>
A szineket ne nézzétek, az scak a kiserletezés miatt olyan amilyen...
Ha tudtok rajtam segiteni. nagyon megköszönném.
height, overflow, stb.
1. A body-nak adj meg egy
overflow: hidden;-t.2. A lefta-nak
height: 100%;-ot.3. A centera-nak
margin-left: 15%;helyettleft: 15%;ésheight: 100%;.4. A lefta-nál pedig töröld ki a
margin-left: 85%-ot, helyetteheight: 100%.Amiben kipróbáltam: IE 6, FF 1.5.0.4, Opera 9 beta 2, ezekben megy.
Üdv.:
nAgYu
Lehet kihagytam, az h.:
a kozépső divektől függően legyen lent, ha a tartalom kisebb akkor a többihez képest legyen speciel a többiek alatt.
..és még
:D
azért linkelem be hátha majd a későbbiekben valakinek még szüsége lesz erre a linkre.:
http://scott.sauyet.com/CSS/Demo/FooterDemo1.html