supermaoMedlem sedan feb. 200511 inlägg
Tja
Jag har gett mig den på att skapa en webbplats utan att använda tabeller i layoutsyfte. Detta är dock svårare än vad jag trodde, om man nu vill att det ska funka i både IE och Firefox.
Jag har gjort en navigationsmeny som jag positionerar med CSS. Jag vill att innehållet i denna "box ska vara högerjusterat och detta funkar finfint i IE men blir centrerat i Ferefox, så här ser koden ut.
.menyrad {
background-color: #00FF66;
width: 10%;
height: 400px;
position: absolute;
left: 0%;
top: 150px;
overflow: auto;
padding: 0%;
text-align: right;
}
Sen funderar jag på en sak till. Spelar det någon roll om man använder <span class="hfdj"> eller <span id="hjhkj"> Som jag har fattat det så ska det inte spela någon roll så länge man definierardet enligt följande:
.exempel (class)
#exempel (id)
mirandirMedlem sedan maj 2003750 inlägg
Högerställningen funkar finfint i min firefox. Säker på att det inte är någon annan CSS som ställer till det?
Gällande Class VS id:
Ett id är ett unikt namn på ett html-element. Därför bör bara ett enda html-element på sidan använda just detta id. Class å andra sidan kan du ange på ett flertal element samtidigt. Dessutom så klarar de flesta av dagens läsare av att man anger flera klasser på samma element. Men det kan bara ha ett id.
/Mirandir
icaaqMedlem sedan okt. 20004 910 inlägg
Välkommen till wF supermao. :)
Hur presenterar du din html? är det en lista eller ligger allt i en div?
Visa lite kod eller lägg upp en länk till din sida så blir det lättare att hjälpa dig.
mv icaaq
supermaoMedlem sedan feb. 200511 inlägg
Japp, jag lyckades fixa till det. Vet ni någon bra resurs som man kan läsa där det här med positionering beskrivs grundläggande?
zcorpanMedlem sedan dec. 20042 269 inlägg
supermaoMedlem sedan feb. 200511 inlägg
Ok, det var ett jättebra länktips. Jag laddade hem stilmallen och det verkar som att en stilmall använd för IE och en annan för Firefox. Är det så pass stora skillnader att man måste göra detta? Och om så är fallet, hur göra man det, välxlar stilmall efter läsare alltså?
Såg occkså att stilmallen var typ 150 rader, vilket ju känns som rätt mycket överkurs...
icaaqMedlem sedan okt. 20004 910 inlägg
Jag brukar skapa en css för alla webläsare, sedan om det behövs laddas en alternativ css för IE så här
[red]
<!--[if IE]>
<LINK rel="stylesheet" type="text/css" href="/css/iehack.css"/>
<![endif]-->
[/red]
Denna är olika stor beroende på hur mycket som behöver anpassas.
mv icaaq
supermaoMedlem sedan feb. 200511 inlägg
ok, men ni som är proffs på detta med css, bill man skapa en enlek design på sin hemsida, krävs det verkligen stilmallar i denna omfattning (150rader)?
martinMedlem sedan apr. 2000296 inlägg
supermao skrev:
ok, men ni som är proffs på detta med css, bill man skapa en enlek design på sin hemsida, krävs det verkligen stilmallar i denna omfattning (150rader)?
Nja, det beror mest på hur enkel designen ska vara och hur pillig man är. När jag sätter en design vill jag att den ska funka finfint i alla moderna browsers och i IE. Då blir det lätt att jag pillar lite extra med småsaker och det händer att en del skräp ligger kvar i css:en. Testa dig fram, Kolla på siter typ de som finns i den stora tipstråden , Testa lite till, upptäck browserbuggar, fråga webforum när du kör fast, lek mycket, kör genom validatorn och bli arg över alla fel, rätta alla fel, testa i olika browsers, bli arg igen, gör om, gör samma fel igen, gör nya fel, fixa felen igen och du ska se att du är uppe i betydligt fler rader än 150 :-)
Är det en krånglig design blir det ännu mer.
/ m a r t i n - tycker att det här är så himla skoj. På riktigt.
supermaoMedlem sedan feb. 200511 inlägg
fundering igen...
Min design jag tänkte arbete med är en centrerad kolumn, i stil med http://www.autisticcuckoo.net/ Jag faller direkt på eget grepp, fattar nämligen inte hur jag positionerar mot centrum av sidan. Detta mått måste väl variera beroende på användarens upplösning tycker jag?
frankofMedlem sedan jan. 20014 275 inlägg
Sätt en fast brädd på ett element och margin h+v till auto så blir det centrerad, enkelt ;)
<!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">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div {width:580px; height:565px; border: solid 5px #c0c0c0; margin-left:auto; margin-right: auto;}
</style>
<title></title>
</head>
<body>
<div>centrerad container</div>
</body>
</html>
icaaqMedlem sedan okt. 20004 910 inlägg
frankof skrev:
Sätt en fast brädd på ett element och margin h+v till auto så blir det centrerad, enkelt ;)
<!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">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
div {width:580px; height:565px; border: solid 5px #c0c0c0; margin-left:auto; margin-right: auto;}
</style>
<title></title>
</head>
<body>
<div>centrerad container</div>
</body>
</html>
Men om du förminskar fönstret så ser du att toolman på göken inte har en fast vidd ;)
mv icaaq
supermaoMedlem sedan feb. 200511 inlägg
typ så här eller?
#sidhuvud {
margin-left: auto;
margin-right: auto;
margin-top: 5%;
margin-bottom: 0px;
height: 100px;
width: 750px;
border: medium solid #000;
background-image: url(header.jpg);
background-position: 0% 0%;
background-repeat: no-repeat;
}
Jag lär väl gjort nån tabbe igen för detta funkar då inte :)
icaaqMedlem sedan okt. 20004 910 inlägg
Jag skulle tro att han använder sig av The holy grail ;)
mv icaaq
supermaoMedlem sedan feb. 200511 inlägg
...Men vad äör det jag gjort för fel med ovanstående kod?
icaaqMedlem sedan okt. 20004 910 inlägg
Jag lär väl gjort nån tabbe igen för detta funkar då inte
vad är det som blir fel?
mv icaaq
InsiderMedlem sedan jan. 20001 003 inlägg
lägg till:
body{text-align:center}
supermaoMedlem sedan feb. 200511 inlägg
japp, body{text-align:center} gjorde susen.. Jäkligt bra... Tack så mycket
icaaqMedlem sedan okt. 20004 910 inlägg
Bara för att jag tycker att melodifestivalen är sååå tråkigt så ändrar jag din lilla css-snutt till följande.
[red]
#sidhuvud {
margin: 5% auto 0px;
height: 100px;
width: 750px;
border: medium solid #000;
background: url(header.jpg) 0 0 no-repeat;
}
[/red]
Jag är lite skeptisk till border-attributet medium då det kan ge olika tjocklek beroende på webbläsare/OS. Jag hade lagt in ett fast px-mått istället. :)
Annars är det som insider sa att för att den ska centreras i IE så behövs text-align: center på bodyn. Men glöm då inte att ställa tillbaka text-align till left (vilket jag tror du vill ha) på dina objekt inne i bodyn.
mv icaaq
supermaoMedlem sedan feb. 200511 inlägg
Ja, jag skulle kunna göra betydligt tråkigare saker än så här för att slippa melodifestivalen. Bordern var bara satt för att jag tydligt skulle kunna se de olika positioneringarna. Jag tackar för dina tips. Den design jag hade tänkt mig var följande (se bifogad fil). Tror du att den designen är möjlig att få till för en nybörjare som mig ?
