webForumDet fria alternativet
Logga in

DIV

24 svar · 672 visningar · startad av Mika3l

Mika3lMedlem sedan nov. 20018 492 inlägg
#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? :)

zcorpanMedlem sedan dec. 20042 245 inlägg
#2

  1. Använd inte DW :P

  2. Använd helst inte flash för navigering. Om du gör det så se till att ha ett alternativ för den som inte har flash installerat. http://www.alistapart.com/articles/flashsatay/ (du behöver inte använda XHTML för det)

  3. För att centrera ett block sätter du bredden för den samt margin-left och margin-right till auto. IE5 samt IE6 (i quirksmode) fattar inte det så man får använda en workaround, så det ser ut typ såhär:

    body {
  text-align: center; /* för IE */
}
#myblock {
  width: 70%;
  margin-left: auto; margin-right: auto; /* det här är standarden */
  text-align: left; /* texten ska väl inte vara centrerad... */
}
Mika3lMedlem sedan nov. 20018 492 inlägg
#3

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? :)

icaaqMedlem sedan okt. 20005 273 inlägg
#4

# = id
. = class

mv icaaq

Mika3lMedlem sedan nov. 20018 492 inlägg
#5

Ok. :)

pakmannenMedlem sedan dec. 2002227 inlägg
#6

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

zcorpanMedlem sedan dec. 20042 245 inlägg
#7
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... :)

Mika3lMedlem sedan nov. 20018 492 inlägg
#8

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;
}
icaaqMedlem sedan okt. 20005 273 inlägg
#9

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

Mika3lMedlem sedan nov. 20018 492 inlägg
#10

Har ändrat det nu men det hjälper mig inte att få lagrena i rätt läge.

zcorpanMedlem sedan dec. 20042 245 inlägg
#11

Hur vill du att det ska se ut? Kan du ge en bild?

Mika3lMedlem sedan nov. 20018 492 inlägg
#12

Här är en bild på hur jag vill ha det. :)

volvo copy.jpg
icaaqMedlem sedan okt. 20005 273 inlägg
#13

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

Mika3lMedlem sedan nov. 20018 492 inlägg
#14

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>
fel.jpg
icaaqMedlem sedan okt. 20005 273 inlägg
#15

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

Mika3lMedlem sedan nov. 20018 492 inlägg
#16

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

icaaqMedlem sedan okt. 20005 273 inlägg
#17

Om du lägger till position: relative i #myBlock så kan du använda position absolute på de lagren.

mv icaaq

Mika3lMedlem sedan nov. 20018 492 inlägg
#18

Fungerar inte. :l
Du kan ta en titt på http://81.227.231.154/volvo om du vill.

icaaqMedlem sedan okt. 20005 273 inlägg
#19

http://member.webforum.nu/1029/mika3l.htm

mv icaaq

Mika3lMedlem sedan nov. 20018 492 inlägg
#20

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.

266 ms totalt · 3 externa anrop · v20260731065814-full.3ab8d573
133 ms — hämta forumlista (db)
125 ms — hämta statistik (db)
138 ms — hämta tråd, inlägg och bilagor (db)