HTML & CSSur HTML, XHTML & CSS
18 svar · 581 visningar · startad av clearvolume
får inte till det...
jag har en table som innehåller tre fält, en logga (137px), en meny(20px) och en "content". I content vill jag lägga 3 andra lager, rubrik, brödtext och en bild.
Nu vill jag att content diven ska vara resterande av skärmen (under loggan och menyn asså) och när bröd texten är längre än "orginalfönstret" så ska hela sidan scrollas...
<html>
<head>
<title>title</title>
<link rel=stylesheet href=css/stylesheet.css type=text/css media=all>
</head>
<body>
<table cellspacing=0 cellpadding=0 border=0 width=100% height=100%>
<tr>
<td valign=top align=center>
<table cellspacing=0 cellpadding=0 border=0 width=640>
<tr>
<td valign=top align=center height=137 width=640 colspan=1>
<div id=logo></div>
</td>
</tr>
<tr>
<td valign=top align=center width=640 colspan=1>
<div id=topmenu>
meny
</div>
</td>
</tr>
<tr>
<td valign=top align=center width=640 colspan=1>
<div id=content>
<div id=rubrik>Rubrik</div>
<div id=brod>Bröd text<br><br><br><br><br><br></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
html {
height:100%;
margin:0px;
padding:0px;
}
body {
margin: 0px;
overflow:auto;
background-color:#b35900;
}
#logo {
position:relative;
top:0px;
left:0px;
width:640;
height:137;
background-image: url(../images/logo.gif);
background-position: top center;
background-repeat: none;
}
#topmenu {
position:relative;
top:0px;
left:0px;
width:640;
height:20;
background-color:#ff8000;
border:1px solid #000000;
}
#content {
position:relative;
top:0px;
left:0px;
width:640px;
height:100% -157px;
background-color :#ffffff;
border:1px solid #000;
}
#rubrik {
position:absolute;
top:10px;
left:10px;
width:100px;
height:30px;
padding:5px;
background-color:#d3d3d3;
font: 24px "trebuchet ms", tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
font-size-adjust: 0.51;
text-align:left;
}
#brod {
position:absolute;
top:65px;
left:5px;
width:400px;
height:auto;
background-color:#d4d4d4;
font: 13px "trebuchet ms", tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
font-size-adjust: 0.51;
text-align:left;
}
...jag skulle behöva lite hjälp att lösa detta så det funkar i både IE och NS.
(blev visst mycket kod, men det då ser ni hur jag har det iaf)
Jag har precis börjat få häng på det här med div-"lager" och skulle rekomendera dig att ersätta layouttabellen med divar.
Kolla på http://www.w3.org/TR/CSS2/visudet.html , och kapitel "10.6.4 Absolutely positioned, non-replaced elements", tror det står där hur du lyckas få till det du vill komma åt.
Men tyvärr har jag ingen kod som löser det direkt åt dig
tanken var från början att bara köra divar, men när jag inte fick till det försökte jag med hederliga tables... men fick inte till det i NS iaf... :/
...men jag ska kika på w3 se om jag kommer fram till något.
Tack!
Här är en alternativ lösning på ditt problem...
Kör med bara div:ar.
Lägg bakgrundsfärgen för "resten av skärmen" som bakgrundsfärg i en "container-div" så "simulerar" du att den ligger bakom din brödtext ;)
Trixa sedan lite med container-div:en så att den blir "100%" i de "vanligaste" webbläsarna (idealt skulle man bara behöva skriva
min-height:100%
för containern för att få det att funka, men varken MSIE eller Opera stödjer dessa f.n. som det verkar - så man får fulkoda CSS:en för #container lite - på två ställen närmare bestämt ;) ).
Kolla källkoden i detta dokument: http://member.webforum.nu/2241/autohojd_alternativ.html
"fulkodningarna" är dokumenterade med kommentarer...
fasen vad bra.. sååå tacksam!
Nu tänkte jag vara lite besvärlig... när bröd texten blir längre än sidan (så den scrollar) hänger inte content rutan med ända ner längre i NS...
kan du/ni hjälpa mig med det så vore jag ännu mer tacksam!
:r (Känns som att jag får sätta mig en helg och läsa på min css, inget funkar för mig längre) :l
Hmm...
Funkade för mig (kör iofs Firebird 0.6.1 / Win - så det kanske beror på att någon äldre NS-webbläsare blir konfunderad av "opera-fulhacket" i exemplet på något sätt... Eller nåt! )
Hursomhelst!
Exemplet jag gav i förra inlägget lägger webbläsarna i "quirks" mode (eftersom det var så du körde enligt ditt kodexempel)...
Men nu provade jag med att slänga in en <!DOCTYPE som lägger dem i Standards mode istället - och vips behövdes inget fulhack för Opera längre...
Det enda som behövdes efter det, var att sätta height:100% även på body ;)
Annars är koden ganska så lik ;)
Här är alternativ 2: http://member.webforum.nu/2241/autohojd_alternativ_2.html
Funkar detta även i din NS? (nyfiken - vilken version var det du fick problem i förresten ;) )
PS.
Ditt problem har nog mer att göra med att olika webbläsare buggar ur på olika sätt när man kör "rena" CSS-lösningar... Och det är *många* som slåss med sådant just nu ;)
Ge inte upp!
Googla om du kan klura ut vad man skall söka efter och fråga här istället annars - det är ju så man lär sig i praktiken, eller hur ? ;)
:bire
super... nu verkar det funka!
Bara en sista grej.... jag vill nu placera ut rubrik och bröd text på den vita ytan... om jag anger
#rubrik {
position:relative;
top:10px;
left:10px;
margin:auto;
width:100px;
height:30px;
padding:5px;
background-color:#d3d3d3;
font: 24px "trebuchet ms", tahoma, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
}
så utgår den ifrån mitten av sidan och inte från kanten på containern... jag har tagit bort alla "center" men ändå är de align center... varför?
Man lär sig genom praktik helt klart!!
Jag har NS7.02
Hmm....
Position:relative från den position där föregående tagg slutar (dvs den punkt där taggens innehåll skulle börja "ritas ut" i det "normala flödet")... Den är alltså relativ "insättningspunkten" och inte containern. Kanske har det med det att göra ?
Detaljer om positionering:
http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme
Om du bara vill "peta in och ner" en blocktagg lite, kanske du kan prova att meka med margin-left och margin-top på den istället för att köra med position:relative.
jag har tagit bort alla "center" men ändå är de align center... varför?
Har du en länk till koden som den ser ut nu så att man kan se helheten innan man gissar fel på orsaken - det är antagligen flera detaljer i detta det skulle kunna bero på ;)
/Red:
Hmm... Förresten... Kom på en sak...
Du har en fast width och margin:auto - då "skall" den centrera blocket enligt http://www.w3.org/TR/CSS2/visudet.html#q6
If both 'margin-left' and 'margin-right' are 'auto', their computed values are equal.
De där text-align:center som är med i mina exempel är i de flesta fall "standard-workarounds" för MSIE (som inte följer CSS2 och alltså inte bryr sig om detta ;) ) som jag plockat upp från t.ex. http://bluerobot.com/web/css/center1.html
Jag vill lägga en div med brödtext och en med bild brevid varandra och då kan jag inte använda position:relative.
Men eftersom jag har de divarna i container, borde de då inte räkna position från det övre vänstra hörnet av containern och inte hela fönstret vid position:absolute?
Och margin räknas väl från boxen över, så jag kan inte lägga två brevid varandra.
Jag håller på och tar mig igenom texten om positionering på w3, men det är svårt att få en klar bild över det... men jag jobbar på det.
(Jag kan PM:a dig en länk, då jag inte vill ha den ligga ute)
Hmm....
Jag menade nog egentligen att du inte behöver fundera över position:relative överhuvudtaget i detta fall, utan att du kan göra enklare positioneringar med individuella marginalvärden som t.ex. margin-left och margin-top... (du har ju möjlighet att lägga alla block i "rätt" ordning för din layout i källkoden ;) )
Och det där med bilden bredvid går att lösa med float: om man vill... (t.ex. genom att begränsa bredden på både brödtexten och bild-div:en, och sedan t.ex. "floata" det block som skall vara till höger...
Fungerar http://member.webforum.nu/2241/autohojd_alternativ_3.html för dina behov ?
Om inte så får du gärna PM:a mig med en länk till sidan du har problem med - på villkor att du lovar att sammanfatta lösningen här i forumet sedan (eller att vi gör det tillsammans) - jag antar att det finns några fler nyfikna därute ;)
hmm.. jag fick till om jag tog bort centreringen av sidan och sen sätta position:absolute på rubrik och bild och bröd texten placerade jag med margins...
försökte placera rubriken med margins oxå först, men det gick inte, men jag ser nu att du har gjort så, så jag måste ha haft nått annat fel.
...med lösningen du hade nu kan jag behålla centreringen om jag vill.
kom på att jag kanske skulle visa min "lösning"... så här ser det ut nu...
http://member.webforum.nu/5366/autohojd_ett_alternativ.html
(får inte till det om jag kör med margins för att placera rubrik)
Mekade lite med din kod -
Tog bl.a. bort dina absolutpositioneringar och "positionerade" med marginaler och paddings i #content...
och då blev det såhär:
http://member.webforum.nu/2241/autohojd_ett_nytt_alternativ.html
Ligger det i linje med det du är ute efter ?
det är precis vad jag är ute efter...
än en gång grymt tacksam!
stöter jag på mer problem hör jag av mig... hahah... :e
givetvis har jag stöt på ett problem. När jag kortar ner texten så den blir kortare än bilderna så följer inte #content med riktigt, samma sak om jag bara har en bild.. grr...
http://member.webforum.nu/5366/autohojd_ett_nytt_problem.html
då tänkte jag att om jag lägger bild diven i content så borde det ju gå.. jodå, det funkar i IE men inte i NS...
http://member.webforum.nu/5366/autohojd_ett_nytt_problem_test2.html
hur jag än försöker får jag bara inte till det... :l
If all else fails - use tables ;)
Gammalt vist webb-ordspråk
Skämt åsido...
Antar att det är float:right på div:en som innehåller bilderna som ställer till det...
Har ingen lösning på rak arm dock...
Men du kan ju t.ex. göra om content till en tabell med två kolumner (och ta bort float:right på #img) så länge tills någon lyckas klura ut en bättre (eller iallafall helt div-baserad) lösning...
Återkommer om jag kommer på något bättre!
gamla hederliga tables... :)
Hmm....
Nu kom jag på var jag sett lösningen: http://realworldstyle.com har en snygg variant på hur man löser multikolumnlayouter med CSS...
Den består i princip i att du "floatar" både #img och #brod och sedan lägger till en "spacer-div"
<div style="clear:both">&nbsp;</div>
efter den sista av de två i koden...
Spacer-div:en ser då till att #content sträcks ut som du förväntar dig ;)
Kolla resultatet på http://member.webforum.nu/2241/autohojd_mekat_ett_nytt_problem.html (mer bilder än text)
och
http://member.webforum.nu/2241/autohojd_mekat_ett_nytt_problem2.html (med mer text än bilder)
Hoppas det löser sig för dig nu! ;)
det gick ju bra.. men inte om jag bara kör en bild. Men det löser jag med att lägga in en transparent bild som bild två... så blir det skit snyggt.
Tack än en gång!