14 svar · 619 visningar · startad av netfeed
säg att jag vill ha en sida som ser ut så här:
----------------
| |
----------------
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
-----------------
jaja väldigt grovt då
detta vill jag bygga upp med css
men hur skall man göra för att de två yttre sidorna skall bli lika långa som den mittre om man har mycke text i den mittre och någon längd inte för deffinierad... går detta?
och nej jag vill inte göra det i tabbeller eller ramar
En rejäl genomgång om hur man kan kombinera nästlade <div>:ar och CSS för att få till detta hittar du t.ex. i artikeln http://webreference.com/authoring/style/sheets/layout/advanced/
En bra länksamling med referenser flera bra CSS-layout-teknikartiklar hittar du här
Här är en idé:
<!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">
<title>CSS</title>
<style type="text/css">
<!--
body {
text-align: center;
background-color: #6495ed;
}
body,div,p {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.omkring {
margin: auto;
border: 1px solid black;
background-color: #fff8dc;
width: 628px;
}
.top {
text-align: left;
height: 50px;
border-bottom: 1px solid black;
padding: 5px;
}
.left {
float:left;
width: 110px;
text-align: left;
}
.right {
float: right;
width: 110px;
text-align: left;
}
.middle {
text-align: left;
width: 400px;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid #fff8dc;
margin:auto;
}
.inre {
margin:5px;
}
.transp {
float: right;
width: 1px;
height: 400px; /* för minihöjd */
}
-->
</style>
</head>
<body>
<div class="omkring">
<div class="top">Topp</div>
<div class="left">
<div class="inre">
Vänster
</div></div>
<div class="right">
<div class="inre">
Höger
</div></div>
<div class="middle">
<!-- en transparent bild för minihöjd -->
<img src="transparent.gif" alt="" class="transp">
<div class="inre">
Och en massa text
<br><br><br><br>
Och en massa text
<br><br><br><br>
Och en massa text
<br><br><br><br>
Och en massa text
</div>
<br style="clear:both">
</div>
</div><br style="clear:both">
</body>
</html>
Matte -> jag testade det som du gjorde men det fungerar inte så bra i Mozilla. Men man såg det mycket bra i IE någon som vet varför?
Faktum är att jag testade det även i Mozilla och det såg Ok ut för mig. Testade det med godkänt resultat på IE6, Mozilla 1.0 och Opera 6.04. Samtliga i windows.
Testade det även på NN4.78 (windows) och det fungerade i stort sett där också, men linjerna behöver fixas på annan sätt.
Så här såg det ut för mig i Mozilla: http://member.webforum.nu/818/mozilla.jpg
först en liten fråga:
vad gör:
<br style="clear:both"> ???
sedan:
http://it.hule.harryda.se/itda00a/vicber/visa/index.php
titta på den lilla rutan i mitten tillvänster
varför är den så? hur kan jag få den "inskjuten"?
<br style="clear:both"> är samma sak som <br clear="all"> om du gör det med html. Clear betyder att gå till slutet på det som är flytande, vänster, höger eller som i det här fallet båda.
Det är svårt att med CSS fixa till något i stil med det du vill ha, kanske får man arbeta lite med <img> för att få till linjer rätt. Och kanske också få det att funka i Opera. Här är ett försök: http://member.webforum.nu/818/netfeedCSS.html med CSS http://member.webforum.nu/818/netfeed.css
Matte -> om du skriver mycket mer i mitt delen så kommer texten utanför linjerna (Under sista stecket) i mozilla. I alla fall när jag testade...
Coper skrev:
Matte -> om du skriver mycket mer i mitt delen så kommer texten utanför linjerna (Under sista stecket) i mozilla. I alla fall när jag testade...
Det händer om du låser höjden med height. Det är därför jag har lagt en smal transparent bild flytande längst till höger. Den håller minihöjden istället.
ah och då skulle jag inte tagit bort den.... :)
Netfeed =>
I den här tråden ställde du följande fråga:
tack för den matte...
uhm... kan du hjälpa till med en sak till?
rubrikerna... hur skall man få dem att gå enda ut?
Förmodar att det var den här tråden du tänkt svara i. Svarar därför här.
IE lägger till en liten marginal till en float. Jag vet inte hur man kan få bort den. Ställer man in bredderna så att det funkar i Mozilla kommer mitten-delen inte att få plats i IE och kommer därför att skjutas nedåt.
Kanske detta går att lösa med ett fulhack. Ska ta en titt ikväll.
http://www.tantek.com/CSS/Examples/boxmodelhack.html
Fast det är kanske det du syftar på?
Nej OlleBoop, det var inte det jag syftade på. Det är dock en viktig länk, delvis tillämpad i det jag visade, och det är därför man hittar class="inre" i koden.
Netfeed:
Här är "hacket" jag lovade dig. Det finns lite fulkod med, men det var vad jag lyckades åstadkomma nu på en liten stund. Du får bearbeta det vidare själv.
Länk: http://member.webforum.nu/818/netfeedCSS2.html
snyggt
tack nu är jag glad igen
*puss*
