Jag har en sida med en vanlig simpel rektangel som jag vill ska ha 100% height, jag har hittat en hel del bra info om det på internet, men alla tvingar mig att använda position:absolute eller 100% width. Eftersom jag vill ha min DIV centrerad + att jag själv vill välja width på den så blir det ett litet problem, men det handlar väl mest om någon vet hur man kan centrera en DIV när den måste ha position:absolute ? Eller finns det någon annan lösning? Det enda jag vill är att ha en div med 100% height, valfri bredd och centrerad ;)
<html>
<head>
<title></title>
<style type="text/css">
<!--
body {background-color:green;}
div
{width:700px; height:100%;
position:absolute; left:50%; top:0;
margin-left:-350px; margin-top:0;
background-color:gray; border:2px solid black;
}
-->
</style>
</head>
<body >
<div>
Valfri bredd, här 700px.
<br>
Om du väljer annan bredd så ta halva divens bredd och stoppa in det för margin-left (negativt mått).
<br>
Exempel (div med bredd 500px, margin-left blir då -250px)
<br>
Tryck tangen F11 så ser du den i helskärmsläge.
</div
</body>
</html>
Din lösning är underbar förutom en sak, den tvingar mig att ha padding:0; vilken inte är något vidare eftrersom jag vill ha top och bottom padding på sidan. Har försökt mend att lägga in bilder istället för padding för att gå runt problemet, fast det blir fel i bottom paddingen pga att DIV:en har 100% height.
Men det är ju bara att lägga en inner-wrapper i såfall:
<html>
<head>
<title></title>
<style type="text/css">
<!--
body {background-color:green;}
#outer
{width:700px; height:100%;
position:absolute; left:50%; top:0;
margin-left:-350px; margin-top:0;
background-color:gray; border:2px solid black;
}
#inner {
padding: 20px;
}
-->
</style>
</head>
<body >
<div id="outer">
<div id="inner">
Valfri bredd, här 700px.
<br>
Om du väljer annan bredd så ta halva divens bredd och stoppa in det för margin-left (negativt mått).
<br>
Exempel (div med bredd 500px, margin-left blir då -250px)
<br>
Tryck tangen F11 så ser du den i helskärmsläge.
</div>
</div>
</body>
</html>
Tycker jag ser ok ut, men jag vet ju inte exakt hur du vill ha det!
Japp funkar bra med den övre sidan av skärmen, har redan provat detta. Men med den undre så funkar det inte pga att DIV:en är 100% hög (skärmanpassande) . Då läggs bilden mitt i sidan.
Vem sade att man *måste* ange height när man absolutpositionerar ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>Ett av jarvklos exempel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body { /* grundinställningar för att bl.a. förhindra att diven hamnar utanför webbläsarkanterna */
min-width: 700px;
position:relative;
height: 100%;
margin:0;padding:0;
}
#spesjalare {
width:700px; padding: 20px;
position:absolute;
top:20px; bottom: 20px; /* i stället för "padding" ovan och under div-ytan*/
left:50%;
margin-left:-372px; /* sammanlagd bredd är 700 + 2*20 + 2*2 (paddingen + bordern) i "Standards mode" */
background-color:gray;
border:2px solid black;
min-height: 300px; /* Ett värde minst lika högt som innehållet */
}
</style>
</head>
<body>
<div id="spesjalare">
<h1>Hej hopp</h1>
<p>Hej hopp i min lilla låda"</p>
</div>
</body>
</html>
Med brasklappen att det här förmodligen inte är "safe" för MSIE6 (speciellt inte när man krymper webbläsarbredden till mindre än 744px) och att koden inte är testad i annat än FF + MSIE7 /XP.
och en annan brasklapp för hur det beter sig i äldre webbläsare när man får sidor som har mer innehåll än som får plats på skärmen (eller i moderna när man får innehåll "högre" än min-height)...
Din idé funkar finfint tills man tar en liten skärmupplösning, då kommer innehållet utanför skärmen x( Jag har samma problem med sidan https://www.davidsward.se som jag jobbar med. I upplösningen 1024 * 768 så kommer inehållet på sidan kontakt utanför DIV:en. Vad kan detta bero på? Är det helt enkelt så att det är ett problem man måste leva med i CSS 100% DIV? Eller finns det några "workarounds" för detta med, som med allt annat i CSS ;) Borde inte browsern bara lägga en scroll på sidan istället för att lägga innehållet utanför?
Får man fråga varför du är så fixerad vid att det ska vara en div? Visst, många anser att divvar/CSS är det enda rätta och har gjort detta till sitt evangelium. Var lite mer praktisk. Funkar inte en div som tänkt, så gör en tabell. Gjort på 3 minuter, funkar i alla webbläsare, validerar, osv.
Om W3C gett sig fan på att man inte ska kunna göra en del grejer alls, och annat endast om man nästan bryter ryggen av sig och tillbringar dagar med att lösa problemet, så kan dom ta sig i brasan vad mig anbelangar. Dom ger ju bara ut rekommendationer, inte lagar inhuggna i sten.
Anton_L>>
1)
Du har inte följt koden i exemplet på David Svärds sida! Kolla noga, det saknas en del vitala inställningar för html och body. Lägger du till dem funkar det bättre just där. Vad det gäller den andra sidan kan jag inte uttala mig eftersom du inte länkar till den ;)
Det som komplicerar saken är att du från början ville ha 20px "luft" undertill. Vill du inte det, utan vill ha en sida som David Swärds, (med eller utan 100%-höjd-div) är det betydligt enklare och "robustare" att köra med en annan centreringsmetod - den med "automarginaler" - se exempel t.ex. här: http://bluerobot.com/web/css/center1.html
Att innehållet "hamnar utanför" utan scroll när du kör metoden som bossse drar upp i den här tråden beror (per definition har jag för mig även om jag inte hittar detaljerna i CSS2-specen just nu) på hur den negativa marginalen som används för centreringseffekten samverkar med övriga sidans klippning.
Annars är det egentligen såhär när det gäller CSS versus Tabeller:
W3C har definierat möjligheten att ställa in "display:table" m.fl så att man skall kunna välja via stilmall hur en viss "grid" skall läggas ut (dvs använda tabellernas alla egenskaper i CSS-baserade layouter).
Det är "vissa webbläsarfabrikanter" (i det här fallet Microsoft) som inte brytt sig om att införa den möjligheten. (det har funnits i CSS sedan 1998 annars :P )
Förrst och främst angående CSS.
När jag ställde mig själv frågan varför jag inte använder tabeller kom jag endast på svaret: När jag lärde mig HTML fick jag höra att tabeller var till för data, inte design. Så egentligen har jag ingen riktigt bra förklaring varför jag använder CSS istället för tabeller.
Angående senaste svaret:
davidsward.se är min sida, jag tror du missuppfattat att jag pratade om 2 sidor. Vad jag vill är att: Ha en Centrerad DIV med 20px padding i top och bottom som anpassar sig efter skärmen (100%) utan att lägga innehåll utanför. För att göra det enkelt: Jarvklos exempel är nästan perfekt, utom att innehållet hamnar utanför. Om någon kan editiera detta exempel så det fungerar och förklara vad ni har gjort så kan jag klara att applikera det på min sida
På punkt 3 skrev du att de berodde på centreringen? Så om man ändrar det till en annan centreringsmetod i jarvklos exempel, borde de fungera då?
Förrst och främst angående CSS.
När jag ställde mig själv frågan varför jag inte använder tabeller kom jag endast på svaret: När jag lärde mig HTML fick jag höra att tabeller var till för data, inte design. Så egentligen har jag ingen riktigt bra förklaring varför jag använder CSS istället för tabeller.
Det är en fin tanke, och den ska du hålla på. Men ibland, när man märker att divvar/CSS inte håller måttet (för det gör dom inte alltid), så ska man visa lite integritet och strunta i det där. För trots allt, så är det ju faktiskt bara rekommendationer.
Ungefär som att du står där med en flaska gott öl men inte har en öppnare. En del kanske ställer tillbaka den i kylen eftersom man bara "ska" använda riktiga öppnare som är gjorda för att plopppa loss kapsyler från flaskor. Andra tar en skruvmejsel eller nyckel eller gaffel eller snusdosa och löser problemet fastän ingen av redskapen är gjorda för att öppna flaskor.
Sen, om man vill, så kan man ju roa sig med att kolla i specifikationen för html 3.2 som kom 1997 och där man introducerade tabeller. Visserligen ändrades detta så småningom, men då skrev man faktiskt speciellt och uttryckligen att tabeller är gjorda för bl.a. layout: http://www.w3.org/TR/REC-html32#table ;)
(inte meningen att detta ska bli en diskussion om tabeller versus divvar/css eftersom jag håller med om principen att divvar bör användas hellre än tabeller. Men man får ju inte bli så bokstavstrogen att det hela blir bisarrt tycker jag. Och det är faktiskt lite kul att visa den där sidan då o då...)
Så om man ändrar det till en annan centreringsmetod i jarvklos exempel, borde de fungera då?
Yep. Iallafall under vissa begränsningar ;)
Du kan ju alltid utgå ifrån den här gamla slagdängan: http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html och införa två "paddingblock" som maskar av i toppen och botten (lösningen förutsätter att du har en enfärgad bakgrund dock eftersom den "maskar av" genom att lägga färgade block inuti/ovanpå "containern". - eller att du inte har någon uttalad bakgrund i containern ;) )
Det är inte så svårt egentligen - bara annorlunda jämfört med att backa till tabeller (vilka ju oftast bara inför onödiga komplikationer för de flesta mobiltelefonbaserade besökare man har och för besökare med vissa typer av funktionshinder) ;)
Man får helt enkelt köra lite olika angreppsmetoder beroende på vad man har för förutsättningar.
Jarvklos exempel markeras härmed som slutgiltig lösning på hur man får 100% div höjd med padding utan att innehåll hamnar utanför. Se och lär ärade WebForum medlemar, denna tråden visar bra exempel på hur man löser 100% div problem som kan uppstå.
Tack för alla bra idéer §e
268 ms totalt · 4 externa anrop · v20260731065814-full.e96017d9
