11 svar · 518 visningar · startad av stephan
Har problem med att en floatad bild i en div fortsätter över kanten. Jag vill att divven ska omkapsla allt innehåll, oavsett om det är floatat eller inte.
Se bifogade bilder.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
div {
background:#999999;
width:500px;
padding:10px;
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
img {
float:left;
margin-right:5px;
}
</style>
</head>
<body>
<div><img src="http://www.w3.org/Icons/w3c_main" alt="w3" width="315" height="48">Test test </div>
</body>
</html>
Jag har redan fått tips här på WF om en lösning, men tyvärr så ställer den lösningen till med andra problem för mig så jag kan inte använda den.
<div><img src="http://www.w3.org/Icons/w3c_main" alt="w3" width="315" height="48">Test test<div style="clear:both;"></div>
Här är några alternativ:
div { overflow:hidden; }
div { overflow:auto; }
div::after { content:""; display:block; clear:left; }
Firefox 1.0.x har en bugg med den sista metoden och behöver nånting i den här stilen har jag för mig:
div::after { content:""; display:block; clear:left; height:1px; margin-top:-1px; }
För IE kan du trigga hasLayout på ett eller annat sätt för att "cleara floats".
Försöker nu implementera detta i min riktiga sidstruktur, men jag får det inte att fungera riktigt. Inga problem med Firefox, där både overflow:auto och den första div::after fungerar bra.
Men i IE händer inget :(
Här är den fullständiga koden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
body {
margin:10px;
text-align:center;
background:#FFFFFF;
}
.container {
width:758px;
text-align:left;
margin:0px auto;
}
#template1 div#header {
margin-bottom:20px;
clear:both;
background:#009933;
}
#template1 div#wrapper {
clear:both;
}
#template1 div#menu {
width:180px;
float:left;
background:#CCCCCC;
}
#template1 div#area1 {
background:#0099FF;
padding-left:10px;
margin-left:180px;
}
#template1 div#footer {
margin-top:20px;
clear:both;
background:#99CCCC;
}
/*div#header { overflow:hidden; }*/
div#header { overflow:auto; }
/*div#header::after { content:""; display:block; clear:left; }*/
/*div#header::after { content:""; display:block; clear:left; height:1px; margin-top:-1px; }*/
#header .logo {
float:left;
margin-right:5px;
}
</style>
</head>
<body>
<div id="template1" class="container">
<div id="header"><img class="logo" src="http://www.w3.org/Icons/w3c_main" alt="w3" width="315" height="48">Test test</div>
<div class="wrapper">
<div id="menu"> Lorem ipsum </div>
<div id="area1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="footer"> footer </div>
</div>
</body>
</html>
Ursäkta att jag flikar in lite frågor ;)
Vad betyder det när du har två kolon och vad kommer after ifrån? div::after?
Sen har jag stött på att man ibland skriver t ex "div[class] .klass". Vad gör [class]?
Och på sidan du länkade till, vad gör följande, jag hängde inte riktigt med?:
/* \*/
* html .gainlayout { height: 1%; }
/* */
/* \*/
* html .gainlayout { height: 1%; }
/* */
Det är ett css-hack för att endast visa för IE på PC.
*html gör att bara IE ser. och
/*\*/
nånting
/* */
Gör så att "nånting" ses som en kommentar om man kör IE på Mac.
(Om jag har förstått det rätt...)
Jaha, jag trodde att "* html .gainlayout" var att * = alla element (p, div etc), html = html-"elementet" och .gainlevel = en klass.
Jag trodde att det skulle vara att t ex en tom div annars kan uppfattas som "innehållslös" och därmed se till att layouten inte blir som man har tänkt sig. Varpå man slängde in 1% höjd eller nåt...
bassebhu skrev:
Jaha, jag trodde att "* html .gainlayout" var att * = alla element (p, div etc), html = html-"elementet" och .gainlevel = en klass.
Jag trodde att det skulle vara att t ex en tom div annars kan uppfattas som "innehållslös" och därmed se till att layouten inte blir som man har tänkt sig. Varpå man slängde in 1% höjd eller nåt...
men jag har sett att man ibland använder bara en asterisk:
* {
blaha
}
...varav min tanke att * står för alla element som * i sql-frågor och andra sammanhang. Vad är vitsen med * { annars?
IE hack.
Börjar tröttna rejält på alla desa floats, clears, displays och alla jäkla css-hacks för att få det att funka i alla browsers.
Funderar på att skita i detta och göra det i tabeller istället. Har suttit hela dan nu och testat. Har också testat att utgå från css-templates från bl.a. Intensivstation m.m. Och de funkar så lägne man ska ha exakt så som de har gjort, men för mig skiter det sig bl.a. eftersom jag vill ha en marginal mellan headern och innehåll.
Använde mig av padding istället för margins, och nu har jag nästan nått ända fram. Lite ful-lösning tycker jag, men eftersom jag har samma bakgrundsfärg på alla divvar så kommer det inte synas i praktiken.
Lite av nackdelen med att jag använder padding istället är att margin-top på h1 som jag satt till 20px inte ignoreras som den brukar göra när den ligger först i en div. Så jag fick sätta om den till 0. Men det kanske inte gör nåt iofs, eftersom H1 kanske man ändå bara har först, och en gång, i varje dokument.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<title></title>
<style type="text/css">
/* main begin */
/* ---------- layout styles begin ---------- */
body {
margin:10px;
text-align:center;
background:#FFFFFF;
}
.container {
width:758px;
text-align:left;
margin:0px auto;
position:relative;
}
div#header {
clear:both;
}
div#footer {
padding-top:20px;
clear:both;
}
*html div#footer {
padding-top:15px;
}
/* ---------- layout styles begin ---------- */
/* ---------- layout styles for templates begin ---------- */
#template1 div#area1 {
padding-top:20px;
float:right;
width:558px;
}
#template1 div#area2 {
padding-top:20px;
width:180px;
float:left;
}
#area1 img {
float:right;
margin: 0px 0px 3px 5px;
}
.editLink img {
width:10px !important;
height:10px !important;
float:none !important;
}
/* ---------- fonts begin ---------- */
body, td, th, input, textearea, select, h3, h4, h5, h6 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#286ea0;
}
h1, h2 {
font-family: Arial, Helvetica, sans-serif;
color:#286ea0;
}
body, th, td, textearea, input, select {
color:#1A1A1A;
}
body, th, td {
font-size: 11px;
line-height:14px;
}
input, select, textearea {
font-size:10px;
}
input, select {
height:auto;
}
/* ---------- fonts end ---------- */
/* ---------- headings begin ---------- */
h3, h4, h5, h6 {
font-weight:bold;
font-size:11px;
margin-top:10px;
margin-bottom:4px;
}
h1 {
font-size:22px;
margin-top:0px;
margin-bottom:10px;
}
h2 {
font-size:16px;
margin-top:20px;
margin-bottom:10px;
}
/* ---------- headings end ---------- */
/* ---------- main menu begin ---------- */
#area2 ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#area2 li {
margin-bottom: 2px;
}
#area2 li li {
margin-top: 2px;
margin-bottom:0px;
}
#area2 li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 10px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}
#area2 li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}
#area2 li li a {
color: #505050;
background: #f4f4f4;
border-left: 4px solid #cccccc;
padding-left:15px;
}
#area2 li li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}
/* ---------- main menu end ---------- */
/* ---------- header menu begin ---------- */
#header ul
{
padding: 0px;
margin: 0px;
width: 100%;
float:left;
background-color:#cccccc;
}
#header ul li {
display: inline;
}
#header ul li a {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 14px;
padding-right: 21px;
text-decoration:none;
float: left;
color: #286ea0;
font-weight:bold;
}
#header ul li a:hover {
color:#FFFFFF;
}
/* ---------- header menu end ---------- */
/* ---------- footer menu begin ---------- */
#footer ul
{
padding: 0px;
margin: 0px;
width: 100%;
float:left;
background-color:#E5E5E5;
}
#footer ul li {
display: inline;
}
#footer ul li a {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 14px;
padding-right: 21px;
text-decoration:none;
float: left;
color: #286ea0;
font-weight:bold;
}
#footer ul li a:hover {
color:#FFFFFF;
}
/* ---------- footer menu end ---------- */
</style>
</head>
<body >
<div id="template1" class="container">
<div id="header"> <img src="http://www.w3.org/Icons/w3c_main" alt="w3-logo" border="0">
<ul class="listLevel1">
<li><a href="showpage.jsp?page_cd=SKI.H.START" target="main">Start</a> </li>
<li><a href="showpage.jsp?page_cd=SKI.H.START" target="main">Test</a> </li>
</ul>
</div>
<div id="area2">
<ul class="listLevel1">
<li><a href="showpage.jsp?page_cd=SKI.H.START" target="main">Start</a> </li>
<li><a href="showpage.jsp?page_cd=SKI.H.START" target="main">Lorem</a>
<ul class="listLevel2">
<li><a href="showpage.jsp?page_cd=SKI.H.START" target="main">ipsum</a></li>
<li><a href="showpage.jsp?page_cd=SKI.H.START" target="main">dolor</a></li>
</ul>
</li>
<li><a href="showpage.jsp?page_cd=SKI.H.START" target="main">sit</a> </li>
</ul>
</div>
<div id="area1">
<h1> Välkommen </h1>
<img src="http://www.w3.org/2006/03/15-Workshop.jpg" alt="people" border="0">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
<div id="footer">
<ul class="listLevel1">
<li><a href="#">Lorem ipsum</a> </li>
</ul>
</div>
</div>
</body>
</html>
bassebhu skrev:
Ursäkta att jag flikar in lite frågor ;)
Vad betyder det när du har två kolon och vad kommer after ifrån? div::after?
Sen har jag stött på att man ibland skriver t ex "div[class] .klass". Vad gör [class]?
Se http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/
bassebhu skrev:
Och på sidan du länkade till, vad gör följande, jag hängde inte riktigt med?:
/* \*/ * html .gainlayout { height: 1%; } /* */
* matchar alla element.
Selektorn "* html" matchar ett element "html" som är avkomling till något element (vilket som helst). I HTML är "html" rotelementet, och kan därför inte vara avkomling till något annat element, alltså bör inte selektorn matcha någonting. Men i IE tror att det finns ett element som är förälder till rotelementet.
IE för Mac har en bugg i sin CSS-tolk där \*/ inte tolkas som slutet på en kommentar.
Alternativt kan man använda nånting i stil med detta för att få "layout" i IE5.5+:
.gainlayout { zoom:1; }