Har varit klantig och godkänt en layout som är 1024px bred och ska nu försöka koda ut den så den passar 1024x768px skärmupplösning UTAN horisontell scrollbar. Finns det något sätt att göra detta utan att skapa centrerade bakgrundsbilder?
Alltså, layouten är centrerad på skärmen. Huvudet och foten är 1024px breda och innehållet däremellan är typ 940px brett. Lägger jag en bakgrundsbild i <body> och centrerar den (+ no-repeat) så hamnar den rätt och jag slipper scrollbar vid en skärmupplösning på 1024x768px, för footern lägger jag en div precis innanför <body> som har 100% höjd och bredd och med en bakgrundsbild som är centrerad och med bottom: 0.
Detta funkar alldeles prima, men finns det något sätt att göra detta utan bakgrundsbilderna och ändå slippa den horisontella scrollbaren? Background-size kommer ju med CSS3 men det är antagligen inte nån idé att använda i detta projekt.
Tackar på förhand!
Här är förresten lite kod att titta på, denna lösning funkar men kräver bakgrundsbilder alltså (bakgrundsbilden är 1024px bred):
<html>
<head></head>
<body style="height: 100%; margin: 0; padding: 0; background: url(images/bg-header.jpg) center top no-repeat; text-align: center;">
<div style="min-height: 100%; height: auto !important; width: 100%; height: 100%; background: url(images/bg-header.jpg) center bottom no-repeat; text-align: center;">
<div style="width: 940px; margin: 0 auto; background-color: #eee; text-align: left;">
asdf<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</body>
</html>
doridoriMedlem sedan juni 2006244 inlägg Hur menar du?
Varför skulle det inte fungera om du tar bort bakgrundsbilderna? De har ju inte med layouten att göra
Jo alltså bakgrundsbilderna UTGÖR huvudet och foten. Skulle jag istället lägga en div som huvud och som är 1024px bred så skulle det dyka upp horisontella scrollbars. Scrollbars ignorerar ju breda bakgrundsbilder och därför har jag löst det så, men jag skulle gärna göra på nåt annat sätt alltså.
benziMedlem sedan maj 20112 inlägg Är det inte ganska jobbigt att ha CSS:en i body och div taggarna? Gör det lättare för dig. Skapa ett nytt dokument i samma mapp som HTML filen. Döp den till style.css
Sen i din <head> tagg så skriver du in följande:
<link rel="stylesheet" type="text/css" href="style.css">
Sen i style.css dokumentet så skriver du följande:
body {
height: 100%;
margin: 0;
padding: 0;
background: url(images/bg-header.jpg) center top no-repeat;
text-align: center;
}
Nu ändrar du följande i din HTML kod:
<div style="min-height: 100%; height: auto !important; width: 100%; height: 100%; background: url(images/bg-header.jpg) center bottom no-repeat; text-align: center;">
till...
<div id="div1">
innehåll här...
</div>
och skriver in följande i CSS (style.css)
div#div1 {
min-height: 100%;
height: auto !important;
width: 100%;
height: 100%;
background: url(images/bg-header.jpg) center bottom no-repeat;
text-align: center
}
och sen ändrar du detta...
<div style="width: 940px; margin: 0 auto; background-color: #eee; text-align: left;">
till...
<div id="div2">
innehåll här...
</div>
och sen skriver du in följande i CSS (style.css)
div#div2 {
width: 940px;
margin: 0 auto;
background-color: #eee;
text-align: left
}
så nu ska det vara mer enklare och välorganiserat.
Läste lite fort, vet inte riktigt vad du ville ha, men prova detta om du vill ha en scrollbar längst ner (skriv detta i style.css):
html{
overflow-x:scroll;
}
Tack för mig.
Hej benzi, har inte loggat in på ett tag och såg ditt svar först nu, tack för det! Utan att vara oförskämd, jag har kodat front-end i ca 15 år så jag vet hur man jobbar med css, det här var bara ett exempel för att snabbt visa lite kod. Du har också missförstått vad mitt problem var.
Lösningen på mitt problem var att dra ihop layouten 12px på vardera sidan och så blir det alltså en 1000px bred layout - funkar precis för 1024-upplösningar men känns inte som en optimal lösning. Såg dock i statistiken att under 10% av svenskarna använder 1024 längre (90% kör högre upplösningar), så det kanske är ok ändå.
