stavveMedlem sedan sep. 200774 inlägg Hej har skapat 4 div taggar som jag vill placera snyggt och enkelt i en viss position med css.
Första diven ska vara en main box där allt ska ligga i. den andra div taggen är den som ska vara toppen av allt den tredje div taggen mitten och den ska repeteras i y-led för att kunna växa neråtoch sist fjärde div taggen som är botten. problemet nu är att när jag skriver något i mitten div taggen så växer den men den separeras från den övre och den undre så det blir mellan rum som jag inte vill ha. Detta sker i firefox. Hur löser jag det enklast?
här följer css koden.
mvh stavve
body
{
background-image:url(background.jpg);
}
#main_box
{
z-index: 2;
position: relative;
width:694px;
margin: 0 auto;
}
#ovre
{
position:relative;
height:48px;
width:694px;
background-image:url(bilder/ovredel.png);
background-repeat:no-repeat;
}
#mitten
{
position:relative;
width:694px;
background-image:url(bilder/mitten.png);
background-repeat:repeat-y;
}
#nedre
{
position:relative;
height:48px;
width:694px;
background-image:url(bilder/nedredel.png);
background-repeat:no-repeat;
}
#dekoration
{
position:relative;
background-image:url(bilder/dekoration.png);
}
rhdfMedlem sedan okt. 2007446 inlägg du kan börja med att städa bort Z-index från main_box, jag misstänker att det kan vara den som spökar. Troligen klarar du dig utan alla position: relative;
Hur ser din HTML kod ut?
om du har elementen inne i din #main_box så kan du rensar ännu mer kod:
body
{
background-image:url(background.jpg);
}
#main_box
{
width:694px;
margin: 0 auto;
}
#ovre
{
height:48px;
background-image:url(bilder/ovredel.png);
background-repeat:no-repeat;
}
#mitten
{
background-image:url(bilder/mitten.png);
background-repeat:repeat-y;
}
#nedre
{
height:48px;
background-image:url(bilder/nedredel.png);
background-repeat:no-repeat;
}
#dekoration
{
background-image:url(bilder/dekoration.png);
}
#dekoration är förmodligen "fel" den kanske du skall ha på något annat ställe (de andra namnen kan man gissa bör stämma). Sen tycker jag att du skall undvika blanda svenska i din kod (övre aka over) bör du ändra till något mer passande.
Kan rekommendera att du läser igenom: http://www.smashingmagazine.com/2008/11/12/12-principles-for-keeping-your-code-clean
stavveMedlem sedan sep. 200774 inlägg <body>
<div id="main_box">
<div id="ovre"></div>
<div id="mitten">
<p>h</p>
<p>g</p>
</div>
<div id="nedre"></div>
</div>
</body>
så ser html koden ut
jo allt ligger i main box och dekoration äe något jag inte använder nu den ska läggas till fler grejen på innan den ska användas.
och bilden visar hur det blir.
Jag vill alltså inte ha mellanrummet som blir när jag skriver i mitten div taggen.
Mvh Stavve
du får ändra om <p> i css att inte ha en margin-top på p elementen. nolla p-elementet och sätt en ny padding-bottom för att ha botten.
och vilken doctype har du?
rhdfMedlem sedan okt. 2007446 inlägg ett bra tips för att slippa lite huvudvärk är att lägga in en reset-css http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
den "nollställer" mer eller mindre alla element, dvs du vet från början vad alla element har för margin,padding, textstorlek osv.
stavveMedlem sedan sep. 200774 inlägg <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
är doctypen
nu blev det genast mycket bättre tusen tack!
mvh Stavve
stavveMedlem sedan sep. 200774 inlägg den va bra reset grejen =)
rhdfMedlem sedan okt. 2007446 inlägg om du bara visste hur mycket tid jag sparat på att använda den :)
man börjar ju så att säga från noll och kan ägna sig åt att få saker att se ut som man vill istället för att sitta o fundera på varför saker ligger olika i olika webbläsare
stavveMedlem sedan sep. 200774 inlägg En liten fråga till
Om jag nu vill att main-box ska vara fixed i mitten hela tiden
så sätter jag position: fixed; men hur gör jag för att få den i mitten utan att behöva använda mig av <center> taggen i html? Jag vill alltså fixa det med css.
mvh Stavve
(kommer säkert mer frågor) =)
Eftersom din main-box har margin: 0 auto; så blir den centrerad. position: fixed är ju att den alltid kommer stanna där, även med scroll, vilket är lite onödigt ditt fall om jag förstå koden rätt. Förstår inte riktigt vad du är ute efter.
stavveMedlem sedan sep. 200774 inlägg om du kollar på http://www.tkingdom.net/fixpix/
så kommer du se vad jag menar. Om jag tex gör explorer fönstret mindre så vill jag inte att min main box ska hänga med den ska ligga kvar i mitten alltså fast. så att jag sedan kan lägga min "dektoration" över den. Dekoration är inte på plats för tillfället det är nästa steg i detta lilla roliga lärorika projekt =).
Alltså grejen är den att jag alltid gör sidor med tabeller och hade kunna dela upp allt och fixat det med tabeller. Men jag vill lära mig att jobba med div taggar och css för att underlätta.
Mvh Stavve
stavveMedlem sedan sep. 200774 inlägg Grejen är den oim jag har margin: 0 auto; och sen sätter fixed så hamnar den till vänster
så om jag tar bort margin:0 auto; sätter fixed och sen vill ha det i mitten fast hur gör jag då?
men, margin: 0 auto bli centrerad, jag förstå inte varför du försöker göra det med position: fixed. Med Position fixed måste du du använda dig av top, right, left eller bottom för att positionera ditt element. Margin: 0 auto; kommer alltid vara i mitten av fönstret, oavsett storlek på fönstret. Att positionera det centrerat på något annat sätt känns onödigt. Läs lite mer om position, för jag tror du missförstå hur den kan/skall användas.
#middle vill du nog lägga lite padding för att få in texten in i din box.
rhdfMedlem sedan okt. 2007446 inlägg nu tappade du bort mig här
Du vill alltså ha sidan i mitten vid fullscreen och sen skall den ha kvar avståndet till vänstersidan av skärmen om man förminskar fönstret. Eller har jag missuppfattat nånting?
då är ju frågan, vad är mitten av skärmen?
hur många px från vänstersidan är det?
enklast är väl att du ser till så att sidan alltid är centrerad istället
vill du att din #decoration skall hänga med resten av sidan så lägger du den bara i main-content
stavveMedlem sedan sep. 200774 inlägg det kanske är enklare om jag visar hur det är tänkt att det ska se ut med en bild. Om jag vill att dekoration ska följa main-box hur gör jag då?
Jag satte dekoration diven i main-box diven överst, men då hamnar hela dekorationen överst. Hur får jag den i den position jag vill?
Mvh Stavve
stavveMedlem sedan sep. 200774 inlägg löste det
ok jag löste det vet inte hur snyggt det är löst kod messigt om det går att fixa på ett snyggare sätt så säg till såhär blev min css för att det skulle bli som på bilden.
Jag vill veta det snyggaste och smidigaste sättet för att lära mig för framtiden.
Mvh Stavve
Kolla även resultatet på https://www.tkingdom.net/fixpix
body
{
background-image:url(background.jpg);
}
p
{
margin-top:0;
margin-bottom:0;
}
#main_content
{
width:694px;
margin:100px auto;
}
#over
{
height:48px;
background-image:url(bilder/over.png);
background-repeat:no-repeat;
}
#middle
{
background-image:url(bilder/middle.png);
height:500px;
background-repeat:repeat-y;
}
#under
{
height:48px;
background-image:url(bilder/under.png);
background-repeat:no-repeat;
}
#dekoration
{
position:relative;
top:-685px;
left:-120px;
background-image:url(bilder/dekoration.png);
background-repeat:no-repeat;
height:455px;
width:818px;
}
stavveMedlem sedan sep. 200774 inlägg det blir iof en massa yta under allt där man bara ser bakgrunden hur löser jag det? alltså mindre yta under main-box. Kan det vara för att jag sätter top:-685px och då blir den ytan som var ämnad för dekorationen kvar? eller?
mvh stavve
Som jag bad om förra inlägget: Läs om position, relative behåller storleken på block elementet, du får använda dig av position: absolute
Placera om "menyn" inne i header eller liknande, sätt den till position: relative (header dvs)
Sätt position absolute på menyn och positionera den med top och left.
stavveMedlem sedan sep. 200774 inlägg va gott va glad jag blir när saker och ting blir rätt!!! Tack Voigtann1 har lärt mig mycket idag men ska läsa lite om det också. Nu slipper jag alla luriga tabeller gött.
Ha det så bra återkommer när sidan är klar eller innan om jag fastnar, men hur eller hur så kommer ni få se slut resultat.
Mvh Stavve
