arnir fyrir 18 árum, 11 mánuðum Fjöldi lestra: 350

Hjálp með layout

Sjá myndHér

Þegar í skrifa í dálkinn sem er merktur 1
þá vil ég að dálkur 2 fari neðar og hvernig gerir maður það ?

Eins og þið sjáið fór textin bara yfir ;o

p.s þetta er mín fyrsta frumraun að layouti

Apple.

arnir fyrir 18 árum, 11 mánuðum

Html kóðinn
<body>
<div id=“bak”></div>
<div id=“logo” style=“position:absolute; left:200px; top:30px; width:800px; height:102px; z-index:1”></div>
<div id=“bottom” style=“position:absolute; left:200px; top:540px; width:800px; height:15px; z-index:2”></div>
<div id=“menu” style=“position:absolute; left:208px; top:140px; width:115px; height:150px; z-index:3”></div>
<div id=“textbox” style=“position:absolute; left:333px; top:140px; width:661px; height:385px; z-index:4”>
<p>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
<p>ffffffffffffffffffffffffff</p>
<p>fffffffffffffffffffffffffffffffffffffffffff</p>
<p>fffffffffffffffff</p>
<p>ffffffffffffffffffffffff</p>
<p>ffffffffffffffffffffffffffffff</p>
<p>ffffffffffffffffffffffffffffffff</p>
<p>fffffffffffffffffffffffffffffffffffff</p>
<p>fffffffffffffffffffffffffffffffffffffffffffffffffff</p>
<p>ffffffffffffffffffffffffffffffffffffffffff</p>
<p>fffffffffffffffffffffffffffffff</p>
<p>fffffffffffffffffffffffffffffffffff</p>
<p>ffffffffffffffffffffffff</p>
</div>
</body>

Stylesheetið
#bak {
position: absolute;
left:200px;
top:30px;
width:800px;
border:1px solid #000000;
height: 500px;
}

body {
background-color: #FFFFFF;
}
td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
#logo {
position: absolute;
left:200px;
top:30px;
width:800px;
border:1px solid #000000;
height: 100px;
}
#bottom {
position: absolute;
left:200px;
top:544px;
width:800px;
border:1px solid #000000;
height: 15px;
}
#menu {
position: absolute;
left:208px;
top:40px;
width:115px;
border:1px dashed #000000;
height: 150px;
}
#textbox {
position: relative;
left:333px;
top:40px;
width:6661px;
border:1px dashed #000000;
height: 385px;
}

Apple.

Fyrra álit

halldor89 fyrir 18 árum, 11 mánuðum

Af hverju læturðu style gildi í html kóðann sem segir að staðsetning eigi að vera ‘absolute’.
Og svo seturðu tengil í css skjal sem segir að sama box eigi að vera ‘relative’…
Ef ég væri þú myndi ég bara nota stílsíður, ekki vera að blanda CSS kóðanum inní HTML kóðann.

“If it isn't documented, it doesn't exist”

Fyrra álit

halldor89 fyrir 18 árum, 11 mánuðum

En já, fyrir utan það, ég kann ekki að láta dótið þarna færast neðar.
En ef ég væri þú myndi ég bæta við overflow: auto; við #textbox og þá færðu scrollbar ef textinn í #textbox verður of langur.

“If it isn't documented, it doesn't exist”

Fyrra álit

hagur fyrir 18 árum, 11 mánuðum

Passaðu þig á því að setja ákveðna hæð á hluti. Ef efni viðkomandi hlutar verður það mikið að það rúmast ekki fyrir lengur, þá gerist þetta sem þú ert að lenda í, þ.e efnið flæðir útfyrir. Þetta er rétt hegðun samkvæmt staðlinum.

Í IE aftur á móti, þá mun viðkomandi hlutur hækka eins mikið og þarf til þess að efnið rúmist innan í honum.

Í staðinn fyrir setja ákveðna hæð á dálk 1, prufaðu í staðinn að nota min-height:;. Með því móti geturðu sett ákveðna lágmarkshæð, en ef efni verður of mikið, þá stækkar hluturinn sjálfkrafa.

min-height virkar ekki í IE, en svo hentuglega vill til að IE túlkar height eins og um min-height væri að ræða.

Það gerir þér kleift að gera þetta:

#dalkur1 {
min-height:500px;
_height:500px;
}

_ fyrir framan height kallast “underscore” hack. IE tekur mark á eigindum þó svo að _ sé sett fyrir framan. Aðrir vafrar sleppa þeim réttilega.

Með þessu móti geturðu sagt mozilla/opera/safari að setja min-height:500px; á dálkinn, en IE mun setja height:500px;

ATH: Ég mæli samt sterklega gegn því að “underscore” hackið sé notað til að “gefa” IE ákveðnar skipanir. Mun betra er að nota aðrar aðferðir til að láta IE fá sín eigin stílsnið, svosem conditional comments.

Þegar nýr IE kemur út (hvenær sem það nú verður), þá gæti verið að það verði búið að “laga” “underscore” hackið …. og hvað þá ?

Vona að þetta hjálpi …… ef ekki, þá spyrðu aftur :)

Fyrra álit

Brainiac fyrir 18 árum, 11 mánuðum

“Þegar nýr IE kemur út (hvenær sem það nú verður), þá gæti verið að það verði búið að ”laga“ ”underscore“ hackið …. og hvað þá ?”

Þá verður IE kominn með betri skilning á CSS og getur birt allt css2 og kannski eitthvað af css3 eins og á að vera. (Hef ekkert fyrir mér í þessu en vona að þeir sem vinna að þróun IE7 hafi nógu mikinn metnað til að gera þetta)

Fyrra álit

Brainiac fyrir 18 árum, 11 mánuðum

Taktu stílskipanirnar sem eru í HTMLinu út og settu <div id=“bottom”> inn í <div id=“textbox”>.

Taktu svo top: top:544px; úr #bottom (í CSS) og settu í staðinn bottom: 0; Þetta ætti að virka en ég hef ekki prófað þetta.

Það eru hins vegar til mun þægilegri leiðir til að gera töflulaust css en ég nenni ekki að fara út í þá sálma núna, kannski það komi í grein frá mér.

Fyrra álit

Vefsíðugerð

Vefsíðugerð

Ofurhugar

Stjórnendur

Hverjir eru inni

Korkar - Almennt

Hjálp með layout

Dýr

Dægurmál

Fræði

Leikir

Lífið

Lífsstíll

Margmiðlun

Menning

Skjár

Sport

Tónlist

Tækni

Vélar

Hugi