M Mika3l Medlem sedan nov. 2001 8 492 inlägg Frågan 2 jan. 2005 19:21 #1 Behöver lite hjälp att få ordning på divar.
Vill ha en sida uppdelad så här:
Meny (flash) - 610px bred och 215px hög
----------------------------------------------------
Innehåll direkt under menyn, 610px bred, ingen bestämd höjd, #FAFAFA som bakgrund.
----------------------------------------------------
Rundade hörn längst ner (bild-mellanrum-bild)
Hur ska jag göra för att få till det?
Har testat med följande kod (lyckades dock inte med något bra för dom runda hörnen):
<div id="menu" style="width: 610px; height: 215px; position: absolute; padding: 0px; left: 120px;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="610" height="215" id="menu">
<param name="movie" value="menu.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="menu" value="false">
</object>
</div>
<div id="layer1" style="visibility:visible; position: absolute; width: 610px; padding: 8px; left: 120px; top: 215px; background: #FAFAFA;">Hem</div>
<div id="layer2" style="visibility:hidden; position: absolute; width: 610px; padding: 8px; left: 120px; top: 215px; background: #FAFAFA;">Om bilen</div>
<div id="layer3" style="visibility:hidden; position: absolute; width: 610px; padding: 8px; left: 120px; top: 215px; background: #FAFAFA;">Bilder</div>
<div id="layer4" style="visibility:hidden; position: absolute; width: 610px; padding: 8px; left: 120px; top: 215px; background: #FAFAFA;">Utställningar</div>
<div id="layer5" style="visibility:hidden; position: absolute; width: 610px; padding: 8px; left: 120px; top: 215px; background: #FAFAFA;">Projekt</div>
<div id="layer6" style="visibility:hidden; position: absolute; width: 610px; padding: 8px; left: 120px; top: 215px; background: #FAFAFA;">Gästbok</div>
<div id="layer7" style="visibility:hidden; position: absolute; width: 610px; padding: 8px; left: 120px; top: 215px; background: #FAFAFA;">Kontakta mig</div>
Sidan vill jag egentligen ha centrerad också men det lyckades jag inte heller luska ut.
Någon som kan hjälpa mig lite på traven här? :)
M Mika3l Medlem sedan nov. 2001 8 492 inlägg 1. Har aldrig använt DW och kommer aldrig göra heller. ;)
2. Jopp, blir Flash i det här fallet men jag ska kolla på en lösning utan Flash också i ett senare skede. Ska också titta vidare på optimering av koden.
3. Här ska testas! Men #myblock, ska jag anropa det med class eller (<div class="mybox">) eller blir det <div id="mybox"> eller hur? :)
Varför skriva:
margin-left:auto;
margin-right:auto;
Det funkar väl med:
margin:auto;
Eller? Så har jag alltid gjort i alla fall.
Edit - Vad är det för fel på DW förresten? Hur ska man kunna leva utan check-in och check-out? :e
Z zcorpan Medlem sedan dec. 2004 2 245 inlägg margin: auto;
är samma sak som
margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto;
Man kan förstås använda
margin: 0 auto;
om man vill att top och bottom ska vara noll... :)
M Mika3l Medlem sedan nov. 2001 8 492 inlägg Asch, har fortfarande problem med den här sidan! :l
Lyckas inte få 3 lager att hamna under menylagret och innehållslagret. Vad ska jag göra?
<div id="myblock">
<div id="menu" style="width: 610px; height: 215px; position: absolute; padding: 0px;">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="610" HEIGHT="215" id="menu" ALIGN="">
<PARAM NAME=movie VALUE="menu.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="menu.swf" quality=high bgcolor=#FFFFFF WIDTH="610" HEIGHT="215" NAME="menu" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
<!--
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="610" height="215" id="menu">
<param name="movie" value="menu.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="menu" value="false">
</object>
-->
</div>
<div id="layer1" style="visibility:visible; position: absolute; width: 594px; padding: 8px; top: 215px; background: #FAFAFA;">Hem</div>
<div id="layer2" style="visibility:hidden; position: absolute; width: 594px; padding: 8px; top: 215px; background: #FAFAFA;">Om bilen</div>
<div id="layer3" style="visibility:hidden; position: absolute; width: 594px; padding: 8px; top: 215px; background: #FAFAFA;">Bilder</div>
<div id="layer4" style="visibility:hidden; position: absolute; width: 594px; padding: 8px; top: 215px; background: #FAFAFA;">Utställningar</div>
<div id="layer5" style="visibility:hidden; position: absolute; width: 594px; padding: 8px; top: 215px; background: #FAFAFA;">Projekt</div>
<div id="layer6" style="visibility:hidden; position: absolute; width: 594px; padding: 8px; top: 215px; background: #FAFAFA;">Gästbok</div>
<div id="layer7" style="visibility:hidden; position: absolute; width: 594px; padding: 8px; top: 215px; background: #FAFAFA;">Kontakta mig</div>
<div id="leftbottomcorner" style="position: absolute; width: 4px; height: 5px;"><img src="images/corner-left.gif" alt=" " style="width: 4px; height: 5px;"></div>
<div id="centerbottom" style="position: absolute; width: 602px; height: 5px; left: 4px; background: green;"></div>
<div id="rightbottomcorner" style="position: absolute; width: 4px; height: 5px;"><img src="images/corner-right.gif" alt=" " style="width: 4px; height: 5px;"></div>
</div>
CSS:
body {
background: #E9E9E9;
font-family: Georgia, Verdana, Arial;
font-size: 12px;
color: #101010;
font-weight: normal;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
width: 100%;
height: 100%;
text-align: center;
}
#myblock {
width: 610px;
margin-left: auto; margin-right: auto;
text-align: left;
}
a {
font-family: Georgia, Verdana, Arial;
font-size: 12px;
color: #FF0000;
text-decoration: none;
}
a:hover {
color: #FAFAFA;
text-decoration: none;
}
tr, td {
font-family: Georgia, Verdana, Arial;
font-size: 12px;
color: #101010;
font-weight: normal;
}
I icaaq Medlem sedan okt. 2000 5 273 inlägg Tjenare.
Lägg dina bilder i en bakgrundsbild istället då de inte tillför något innehållsmässigt (de är en del av sidans design).
mv icaaq
M Mika3l Medlem sedan nov. 2001 8 492 inlägg Har ändrat det nu men det hjälper mig inte att få lagrena i rätt läge.
Z zcorpan Medlem sedan dec. 2004 2 245 inlägg Hur vill du att det ska se ut? Kan du ge en bild?
M Mika3l Medlem sedan nov. 2001 8 492 inlägg Här är en bild på hur jag vill ha det. :)
I icaaq Medlem sedan okt. 2000 5 273 inlägg Börja med att ta bort alla position, top och left i dina inlinecss-taggar.
Sen får vi se hur det ser ut. ;)
mv icaaq
M Mika3l Medlem sedan nov. 2001 8 492 inlägg Blir ju inte rätt men det närmar sig ju iaf. :p
Skickar med en bild hur det ser ut i IE resp. Firefox.
<div id="myblock">
<div id="menu" style="width: 610px; height: 215px; padding: 0px;">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="610" HEIGHT="215" id="menu" ALIGN="">
<PARAM NAME=movie VALUE="menu.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="menu.swf" quality=high bgcolor=#FFFFFF WIDTH="610" HEIGHT="215" NAME="menu" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
<!--
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="610" height="215" id="menu">
<param name="movie" value="menu.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="menu" value="false">
</object>
-->
</div>
<div id="layer1" style="visibility:visible; width: 594px; padding: 8px; background: #FAFAFA;">Hem</div>
<div id="layer2" style="visibility:hidden; width: 594px; padding: 8px; background: #FAFAFA;">Om bilen</div>
<div id="layer3" style="visibility:hidden; width: 594px; padding: 8px; background: #FAFAFA;">Bilder</div>
<div id="layer4" style="visibility:hidden; width: 594px; padding: 8px; background: #FAFAFA;">Utställningar</div>
<div id="layer5" style="visibility:hidden; width: 594px; padding: 8px; background: #FAFAFA;">Projekt</div>
<div id="layer6" style="visibility:hidden; width: 594px; padding: 8px; background: #FAFAFA;">Gästbok</div>
<div id="layer7" style="visibility:hidden; width: 594px; padding: 8px; background: #FAFAFA;">Kontakta mig</div>
<div id="leftbottomcorner" style="width: 4px; height: 5px; background: url('images/corner-left.gif') no-repeat;"></div>
<div id="centerbottom" style="width: 602px; height: 5px; background: #FAFAFA;"></div>
<div id="rightbottomcorner" style="width: 4px; height: 5px; background: url('images/corner-right.gif') no-repeat;"></div>
</div>
I icaaq Medlem sedan okt. 2000 5 273 inlägg Bygg ihop din corner-left och corner-right till en bild som är 610px bred, lägg den som background-image i #myBlock med en background-position: 0% 100%;
mv icaaq
M Mika3l Medlem sedan nov. 2001 8 492 inlägg Nu blir det på ett sätt rätt men även på ett sätt fel. :p
Jag har ju för tillfället 7 lager som alla ska ha samma position, men det har dom inte nu då jag inte kör med position: absolute. Gör jag det så försvinner bilden som ska vara under dom lagren. Hur blir det nu? :p
I icaaq Medlem sedan okt. 2000 5 273 inlägg Om du lägger till position: relative i #myBlock så kan du använda position absolute på de lagren.
mv icaaq
M Mika3l Medlem sedan nov. 2001 8 492 inlägg Fungerar inte. :l
Du kan ta en titt på http://81.227.231.154/volvo om du vill.
I icaaq Medlem sedan okt. 2000 5 273 inlägg M Mika3l Medlem sedan nov. 2001 8 492 inlägg Tack så mycket icaaq men det fungerar fortfarande inte riktigt. :l Det fungerar perfekt i Firefox men i IE (6) så blir det ett mellanrum på uppskattningsvis ca 10px mellan innehållsdiven (arna) och bottom.gif.