CSS div-es elrendezés, miért nem úgy néz ki, ahogy szeretném?
Egykis vázlatos rajz hogy hogyan is kellene hogy kinézzen:
De valamiért nemsikerűl pont úgy :/ egymásra csúsznak, pedig próbáltam figyelni a lezárásra minden, de nemértem, Segítsetek kérlek ha tudtok.
Mellékelem a jelenlegi állapotban levő forráskódokat:
index.html
<html>
<head>
<title>Főoldal</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<div class="header">
<div id="banner">
</div>
<div id="menu">
</div>
</div>
<div class="content">
<div class="left">
<p></p>
<div id="login">
</div>
</div>
<div class="right">
<p></p>
</div>
</div>
<div class="footer">
<p></p>
</div>
</div>
</body>
</html>
index.css
body {
font-style: Arial, Sans-Serif;
font-size: 15pt;
background-color: #f1f1f1;
}
.container {
width: 1000px;
height: 800px;
margin: 0 auto 0;
padding: 10px;
background-color: white;
}
.header {
width: 1000px;
height: 250px;
background-color: yellow;
}
#banner {
width: 1000px;
height: 210px;
margin: 0 auto 0;
background-color: orange;
}
#menu {
width: 1000px;
height: 40px;
margin: 0 auto 0;
background-color: green;
}
.content {
padding: 20px;
width: 960px;
margin-top: 10px;
background-color: red;
}
#login {
}
.left {
float: left;
width: 200px;
background-color: blue;
}
.right {
float: right;
width: 990px;
background-color: purple;
}
.footer {
margin-top: 20px;
background-color: black;
padding: 20px;
width: 1000px;
}
Köszönöm szépen!
válasza:float:left kell a jobb oldali elemre is, ha a bal oldali után akarod lebegtetni.
Amúgy meg 1190 px széles összesen a kettő, és ezt akarod egy 1000px széles divbe rakni?
100px volna a fő container div, és azon belűl lejön ugye a felső banner+menu alatti kis helyecske, az van még ugye körbe is, meg alul is a footer felett.
Melyik részt kellene átírnom?
válasza:Ki ír még kézzel CSS-t? :/
Bootstrap?
Reszponzivitás?
válasza:Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!