AndeersMedlem sedan okt. 200610 inlägg Håller på med en ny hemsida men css:en är lite ringrostig. Skulle uppskatta lite hjälp.
Gjort två olika testversioner men ingen blir rätt.
http://vattenmelon.se/~evol/www/
http://vattenmelon.se/~evol/www2/
Texten ska ju stanna inom "ramen" och ramen ska ändå ner till botten. Testa att trycka ihop browsern på höjden så ser ni vad jag menar. Detta är ett problem för FF.
Och använder jag IE så får jag varningar om active content eller nått. Antar att det är för jag kör en png fix på bakgrundsbilder.
Om du postar koden så är det mycket lättare att dels se vad du har gjort, och dels försöka hitta någon lösning på ditt problem.
AndeersMedlem sedan okt. 200610 inlägg Går det inte lika bra att kolla koden via länkarna?
Okej, nu blir det en jekla massa kod.
Version 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ingemar Johansson AB</title>
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="container">
<div id="frame_bottomfill"></div>
<div id="frame_main"></div>
<div id="content">
<!-- content -->
<form>
<select name="navigation">
<option>Navigering
<option value="sida1.htm" target="_blank">Startsida
<option value="sida4.htm" target="_blank">Bildgalleri
<option value="sida3.htm" target="_blank">Mat Från Europa
<option value="sida2.htm" target="_blank">Hur en korv föds
</select>
<input type="button" value="Gå dit!" onClick="window.location.href=this.form.navigation.options[this.form.navigation.selectedIndex].value">
</form>
<img src="images/headers/varan_historia.gif">
<p><img src="foton/korvtillverkning.jpg" alt="Korvtillverkning" style="float:right; margin-left:1em; margin-bottom:1em">Mycket har hänt sedan Ingemar Johansson startade företaget på en yta av bara 10 m2. För något år sedan var vi en av marknadens största färskvarugrossister och distribuerade kött och chark till butiker i hela Sverige. Idag är vi en tillverkare av olika korvprodukter, som säljs i de flesta butikskedjor. Mycket av vår styrka ligger i alla medarbetares starka engagemang, kunskap och närhet till marknaden. Flexibla men utan att kompromissa när det gäller kvalitet, servicenivå och kunskap. Personliga relationer är viktiga för oss och vi strävar alltid efter att lära känna dig som kund så bra som möjligt.
<p>"Att tillverka och distribuera prisvärda färskvaror av bra kvalitet med den bästa servicen till detaljhandeln" är både vår affärsidé och ett löfte till dig som kund. Under året erhöll Ingemar Johansson utmärkelsen "Higher Level Certificate of Conformity".
<p>"Att tillverka och distribuera prisvärda färskvaror av bra kvalitet med den bästa servicen till detaljhandeln" är både vår affärsidé och ett löfte till dig som kund. Under året erhöll Ingemar Johansson utmärkelsen "Higher Level Certificate of Conformity".
<p>"Att tillverka och distribuera prisvärda färskvaror av bra kvalitet med den bästa servicen till detaljhandeln" är både vår affärsidé och ett löfte till dig som kund. Under året erhöll Ingemar Johansson utmärkelsen "Higher Level Certificate of Conformity".
<!-- end content -->
</div>
</div>
</body>
</html>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body {
background-image: url('images/background_color.jpg');
background-repeat: repeat;
font-family: Verdana, sans-serif;
font-size: .8em;
color: #666;
line-height: 1.4em;
}
#container {
height: 100%;
width: 100%;
margin: 0;
background-image: url('images/background_gradient.jpg');
background-repeat: repeat-x;
}
#frame_bottomfill {
position: absolute;
left: 50%;
margin-left: -380px;
width: 778px;
height: 100%;
background-image: url('images/frame_bottomfill.png');
background-repeat: repeat-y;"
}
#frame_main {
position: absolute;
left: 50%;
margin-left: -380px;
width: 778px;
height: 380px;
background-image: url('images/frame_main.png');
background-repeat: no-repeat;">
}
#content {
position: absolute;
left: 50%;
margin-left: -290px;
margin-top: 220px;
width: 600px;
border: 0px solid red;
}
a:link {
color: black;
}
a:visited {
color: black;
}
a:active {
color: black;
}
a:hover {
color: black;
}
Version 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ingemar Johansson AB</title>
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="container">
<div id="frame_bottomfill">
<div id="frame_main">
<div id="content">
<!-- content -->
<form>
<select name="navigation">
<option>Navigering
<option value="index.html">Startsida
<option value="index.html">Bildgalleri
<option value="index.html">Mat Från Europa
<option value="index.html">Hur en korv blir till
</select>
<input type="button" value="Gå dit!" onClick="window.location.href=this.form.navigation.options[this.form.navigation.selectedIndex].value">
</form>
<img src="images/headers/varan_historia.gif">
<br style="clear:both">
<p><img src="foton/korvtillverkning.jpg" alt="Korvtillverkning" style="float:right; margin-left:1em; margin-bottom:1em">Mycket har hänt sedan Ingemar Johansson startade företaget på en yta av bara 10 m2. För något år sedan var vi en av marknadens största färskvarugrossister och distribuerade kött och chark till butiker i hela Sverige. Idag är vi en tillverkare av olika korvprodukter, som säljs i de flesta butikskedjor. Mycket av vår styrka ligger i alla medarbetares starka engagemang, kunskap och närhet till marknaden. Flexibla men utan att kompromissa när det gäller kvalitet, servicenivå och kunskap. Personliga relationer är viktiga för oss och vi strävar alltid efter att lära känna dig som kund så bra som möjligt.
<p>"Att tillverka och distribuera prisvärda färskvaror av bra kvalitet med den bästa servicen till detaljhandeln" är både vår affärsidé och ett löfte till dig som kund. Under året erhöll Ingemar Johansson utmärkelsen "Higher Level Certificate of Conformity".
<a href="#" onclick="document.getElementById('C1').style.visibility='visible'">open</a>
<div id="C1" style="visibility:hidden"><p>"Att tillverka och distribuera prisvärda färskvaror av bra kvalitet med den bästa servicen till detaljhandeln" är både vår affärsidé och ett löfte till dig som kund. Under året erhöll Ingemar Johansson utmärkelsen "Higher Level Certificate of Conformity".
<p>"Att tillverka och distribuera prisvärda färskvaror av bra kvalitet med den bästa servicen till detaljhandeln" är både vår affärsidé och ett löfte till dig som kund. Under året erhöll Ingemar Johansson utmärkelsen "Higher Level Certificate of Conformity".</div>
<!-- end content -->
</div>
</div>
</div>
</div>
</body>
</html>
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
background-image: url('images/background_color.jpg');
background-repeat: repeat;
font-family: Verdana, sans-serif;
font-size: .8em;
color: #666;
line-height: 1.4em;
}
img, div { behavior: url('iepngfix.htc') }
#container {
height: 100%;
width: 100%;
margin: 0;
background-image: url('images/background_gradient.jpg');
background-repeat: repeat-x;
}
#frame_bottomfill {
position: absolute;
left: 50%;
margin-left: -380px;
height: 100%;
width: 778px;
background-image: url('images/frame_bottomfill.png');
background-repeat: repeat-y;
background-position: center;
border: 0px solid red;
}
#frame_main {
height: 100%;
width: 100%;
background-image: url('images/frame_main.png');
background-repeat: no-repeat;
background-position: top center;
border: 0px solid black;
}
#content {
height: 100%;
width: 100%;
padding-top: 200px;
padding-right: 80px;
padding-bottom: 60px;
padding-left: 100px;
border: 0px solid yellow;
}
a:link {
color: black;
}
a:visited {
color: black;
}
a:active {
color: black;
}
a:hover {
color: black;
}
tantenMedlem sedan nov. 20051 596 inlägg Försök med att sätta vidd på p
typ
p{width: 600px;}
När det gäller detta med 100% height så finns det väldigt många trådar om det här i forumet där du kanske hittar något tips.
Bakgrunderna har jag lite svårt att se hur du egentligen vill ha dem...
Har du på vägen hit försökt någon design med float istf absolut position.
Är alltid lite knepigt att hålla på med absolut och få bakgrunder att följa med dit man vill.
Det är också lätt gjort att när man bygger med minusmarginaler för att centrera, att sidan då försvinner vid mindre upplösningar.
Kan kanske vara enklare att tänka om, fast jag har inte kollat så där jättenoga ska erkännas eftersom jag inte fick riktigt grepp om hur du vill att det ska se ut.
AndeersMedlem sedan okt. 200610 inlägg Sidan ska se ut så här är det tänkt;
http://vattenmelon.se/~evol/skiss05.jpg
Vill inte gå in och detaljstyra med p{width: 600px;}, isåfall får jag göra det på alla element.
Får väl läsa runt på nätet och se om jag kan hitta något lik jag kan kopiera.
AndeersMedlem sedan okt. 200610 inlägg Jag har fortfarande inte hittat någon lösning. Jag letade upp en tut som hette "CSS 100% Height DIV's tutorial" på http://www.webmasterworld.com/forum83/200.htm
Jag tog den koden och lade till fler paragrafer i vänsterspalten för att se om samma fenomen inträffade som när jag kör min kod. Mycket riktigt så blev diven's höjd bara så stor som browserfönstrets höjd även om innehållen krävde mer höjd. Detta inträffar bara i Firefox men visas som det är tänkt i MSIE.
Är det ingen som har en idé om vad som kan vara fel? Hittar jag ingen lösning får jag ta till med tables och det vill jag verkligen inte.
Bifogar koden som jag ändrade, spara ner och kör i både Firefox och MSIE så ser ni skillnaden.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>One Hundred Percent height divs</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%; /* this is the key! */
}
#left {
position:absolute;
left:0;
top:0;
padding:0;
width:200px;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
.content {
margin-left:220px;
margin-right:220px;
margin-bottom:20px;
color:#333;
background:#ffc;
border:1px solid #333;
padding:0 10px;
}
#right {
position:absolute;
right:0;
top:0;
padding:0;
width:200px;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#left p {
padding:0 10px;
}
#right p {
padding:0 10px;
}
p.top {
margin-top:20px;
}
</style>
</head>
<body>
<div id="left">
<p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p><p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p><p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p><p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p><p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p><p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p><p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p><p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p><p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p><p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p><p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p><p class="top">This design uses a defined body height of 100% which allows setting the
contained left and right divs at 100% height.</p>
</div>
<div class="content">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
<div class="content">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
<div class="content">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
<div id="right">
<p class="top">To solve an inheritance issue displayed in div #right as rendered in Opera, class p.top
using margin-top:20; is applied to the first paragraph of each outer divs.</p>
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
</body>
</html>
headbugMedlem sedan sep. 2006867 inlägg Mja, alltså, säger du till om 100% höjd så skall du få 100% av viewporten.
Tar du bort 100% helt och hållet så kommer diven (självklart) att följa innehållet.
Det vanliga problemet med 100% är när man har för lite innehåll men ändå vill att den ska ha hela viewportens höjd. Det är ju lite lurigt med 100% för procenten relaterar ju bara till ditt nuvarande browserfönster. Vill du sen ha 100% även med mindre innehåll får du trixa lite med min-height eller kanske javascript eller något annat fyndigt :)
Danne VMedlem sedan aug. 20068 090 inlägg Det enda sätt jag hittat som funkar i alla webbläsare (utom IE för Mac. Men dom åtta i hela världen som använder den får klara sig ändå) och som validerar och inte har javascript men ändå sträcker ett element 100% på höjden är en tabell där även body och html är formaterade med CSS:
http://apptools.com/examples/tableheight.php
Kolla sista länken längst ned på sidan.
tantenMedlem sedan nov. 20051 596 inlägg Jag frågade tidigare om du testat med något annat än absolut position utan att du svarade på det... Och eftersom jag inte gillar tabledesign så gjorde jag en skiss på vad jag menade då. Inte helt efter dina marginaler, men jag gissar att det var så här du ville att bakgrunden skulle vara. Kanske kan det ge någon idé isf tabeller... :-)
http://member.webforum.nu/9656/kock.html
AndeersMedlem sedan okt. 200610 inlägg
tanten skrev:
Jag frågade tidigare om du testat med något annat än absolut position utan att du svarade på det... Och eftersom jag inte gillar tabledesign så gjorde jag en skiss på vad jag menade då. Inte helt efter dina marginaler, men jag gissar att det var så här du ville att bakgrunden skulle vara. Kanske kan det ge någon idé isf tabeller... :-)
http://member.webforum.nu/9656/kock.html
Tack för ditt svar och för att du tog dig tid att försöka koda en lösning. Jag testade dock koden och fann att när jag tog bort text och bild så räckte "det vita" inte ända ner i Firefox, får du inte samma resultat?
Denna sidan var rätt shysst: http://phrogz.net/CSS/valign_in_body/block.html
Men eftersom jag har jag har loggan som bakgrund och det under loggan som repeteras neråt som bakgrund har jag inte fått ihop det än. Ex ovan har dom bara vit bakgrunds färg (om allt ändå vore så enkelt x( )
tantenMedlem sedan nov. 20051 596 inlägg Jarvklo har gjort en sida som du kanske kan trixa lite med för att få in dina bakgrunder i stället för de han har. Jag testade lite grovt och så långt jag hann se så ska det fungera. http://member.webforum.nu/2241/hundraprocentsteg1.html
Testa att bygga en "mall" som använder DTD strict istället för transisional.
Vissa saker är nästa omöjliga att få rätt på om man inte kör strict och skillnaderna mellan browsers blir tyvärr för stora = mängder med handpåläggning och "klisterfixar".
Jag lyckades fixa till en generell, strikt mall som jag nu kan bygga alla typer av sidor med (oavsett antal kolumner och uppdelning av sidan). Det tog lite tid men gick till slut. Sidorna ser likadana ut i IE och Firefox så när som på någon pixel här och där i "marginalskillnader" som jag inte orkade få til.
