webForumDet fria alternativet

Problem med divvar

4 svar · 420 visningar · startad av mlibemelie

mlibemelieMedlem sedan mars 200747 inlägg
#1

Hej!

När jag gör hemsidor lyckas jag alltid dra med mej ett återkommande problem som jag nu har fått nog av. Jag har lyckats komma runt det en del gånger men nu går det mej på nerverna att jag inte lyckas ställa det till rätta.

Jag bygger min hemsida enbart med CSS och XHTML och den är uppbyggd utav divvar.

Jag ska visa er problemet genom den här skärmdumpen:
Skärmdump

Där det står <body> är ju själva bodyn såklart men som ni ser så tar den över innehållet på sidan. <div id="kolumn"> är själva innehållet på sidan och det ljus ljus gröna ska sträcka sig från linjen under menyn till linjen över där det står "Jöran Briding". Men det gör den ju inte och gaah jag fattar inte varför x(

Här är en del av CSS koden:

body {
	color: #000;
	background: #53A653;
	width: 800px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	margin: 0 auto;
	

}
/*sidhuvud*/
#sidhuvud {
	color: #000;
	width: 800px;
	height: 230px;
	background-image: url(Bilder/header.jpg);	
	
}
/*meny*/

#menycontainer{padding-left: 4em; padding-top: 1em; border-bottom: 1px solid #000000; background: #53A653;}
#menycontainer ul{padding: 0.4em 0; margin: 0;  font: 80% Verdana, Helvetica, sans-serif;}
#menycontainer li{margin: 0; display: inline; list-style: none;}
#menycontainer li a{text-decoration: none; padding: 0.4em 2em; margin-left: 1em; background: #83EC83;	
	border: 1px solid #000; border-bottom: none;}
#menycontainer a:link{color: #000000;}
#meny a:visited{color: #000000;}
#menycontainer a:hover{border-color: #990000; background: #DAF9DA;}
#menycontainer a#current{background: #DAF9DA; border: 1px solid #000000; border-bottom: 1px solid #DAF9DA; color: #000000;}

/*sidmeny*/
#sidmeny {
color: #990000;
	background: #fff;
	float: right;
	width: 195px;
}
.metta p{
	width: 170px;
	padding-right: 5px;
	padding-left: 0px;
}
.metta {
background-color:  #AFF3AF;
	color: #990000;
	
	margin: 5px 5px 45px 5px;

		
}
	
/*Innehåll*/
#kolumn {
	color: #000;
	background: #DAF9DA;
	width: 800px;

	   
}
#kolumn p {
	line-height: 1.7em;
	margin: 7px 0px 0px 20px;
	width: 343px;
}

#kolumn a {
	margin-top: 15px;

}
#kolumn a:link {
	color: #785042;
	text-decoration: none;
	
}
#kolumn a:visited {
	color: #785042;
	text-decoration: none;
	
}

#kolumn a:hover {
	color:#D2B1A4;
	
	

}

/*sidfot*/
#sidfot {
	color: #333333;
	background: #53A653;
	clear: both;
	height: 20px;
	border-top: 1px solid #cccccc;
	border-bottom: 4px solid #53A653;

}
#sidfot p {
	margin: 7px 0px 7px 20px;
	font-size: 0.9em;	
}
	
#sidfot a:link {
	color: #2453C1;
	text-decoration: none;

}
#sidfot a:visited {
	color: #2453C1;
	text-decoration: none;
}
#sidfot a:hover {
	color:#000;
	text-decoration: underline;

}

Och här är XHTML koden:

<!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>Jöran Briding</title>

     <meta http-equiv="content-type" content="text/xhtml+xml; charset=iso-8859-1" />

        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <link href="mall.css" rel="stylesheet" type="text/css" />

    </head>

    <body>

          <div id="sidhuvud">

      </div>
	
<div id="menycontainer">
  <ul id="meny">
    <li id="active"><a href="index.html" id="current">Hem</a></li>
    <li><a href="buddhism.html">Livet, Buddhism & VBV</a></li>

    <li><a href="litteratur.html">Litteratur</a></li>
    <li><a href="fotogalleri.html">Fotogalleri</a></li>
    <li><a href="lankar.html">Länkar</a></li>
	<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
			
		<div id="kolumn">
		
				<div class="text_right"><p>Min tolkning av Metta sutta, en av texterna i Dhammapada.<br /><br />

<span class="liten_text">(Dhammapada är en av de viktigaste textsamlingarna i Palikanon. (Pali är ett fornindiskt språk.) Metta = allomfattande ovillkorlig kärlek (ej fysisk). Sutta = berättelse– text.)</span><br /><br />

Utveckla <span class="bold">metta</span> till alla varelser i hela världen, oberoende av kön, ursprung, åsikter eller gärningar.<br />
På detta sätt kommer du att vara spontant etisk och uppnå fulländad <span class="bold">insikt.</span><br />
Och genom att ge upp begär efter sinnesnjutningar, kommer du att, slutligen, helt och hållet, bli <span class="bold">fri!</span>
</p><br /></div>

		
		
		<h2>Välkommen till Jörans hemsida</h2>
		<p>Den här sidan handlar om saker som jag tycker är viktiga 
		men också om mer personliga detaljer. Man kan hitta böcker som jag tycker är läsvärda och intressanta. Det finns också foton, gamla och nytagna. 
		</p>

		</div>
		  
 <div id="sidfot">
 <p>Jöran Briding 2008</p>
               
      </div>

    </body>
</html>

Förlåt för att det här inlägget blev jätte långt och jobbigt, men jag måste verkligen ha hjälp med att reda ut vad det är jag gör fel.

/Emelie

voigtann1Medlem sedan juni 20019 519 inlägg
#2

Prova innan du avslutar <div id="kolumn"> att ha en div:

<div style="clear:both;"></div>

. Jag försökte ta din kod och ha den på min dator men jag får inte alls samma resultat som din bild.

mlibemelieMedlem sedan mars 200747 inlägg
#3

voigtann1 skrev:

Prova innan du avslutar <div id="kolumn"> att ha en div:

<div style="clear:both;"></div>

. Jag försökte ta din kod och ha den på min dator men jag får inte alls samma resultat som din bild.

Tack så mycket!

Konstigt att det inte blev så på din dator.
Men iaf nu när jag la dit det där ser det ut såhär:
http://www.emeliebriding.se/Bilder/Diverse/Blogg/pappas2.jpg

Men då återstår det där lilla mörkgröna glappet mellan menyn och det ljusgröna...

Saken är såhär att om jag skulle sätta en div runt HELA sidan som heter typ <div id="sida"> och sätter en background som är lika med den där ljusgröna färgen, då skulle det där glappet fyllas igen och bli ljusgrönt. Men hur kommer det sig?

/Emelie

voigtann1Medlem sedan juni 20019 519 inlägg
#4

har inte lagt ner mycket tid på din kod. men en snabb fix:
lägg till

padding-top:4px;

i din #kolumn.

mlibemelieMedlem sedan mars 200747 inlägg
#5

Nu har jag fått till det ganska bra men sen när jag la till så att varje sida har två kolumner så blev allt kaos igen.

Så här ser det ut nu:

KLICK

CSS koden:

/* CSS Document */
body {
	color: #000;
	background: #53A653;
	width: 800px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	margin: 0 auto;

}

/*sidhuvud*/
#sidhuvud {
	color: #000;
	width: 800px;
	height: 230px;
	background-image: url(Bilder/header.jpg);	
	
}
/*meny*/

#menycontainer{padding-left: 4em; padding-top: 1em; border-bottom: 1px solid #000000; background: #53A653;}
#menycontainer ul{padding: 0.4em 0; margin: 0;  font: 80% Verdana, Helvetica, sans-serif;}
#menycontainer li{margin: 0; display: inline; list-style: none;}
#menycontainer li a{text-decoration: none; padding: 0.4em 2em; margin-left: 1em; background: #83EC83;	
	border: 1px solid #000; border-bottom: none;}
#menycontainer a:link{color: #000000;}
#meny a:visited{color: #000000;}
#menycontainer a:hover{border-color: #990000; background: #DAF9DA;}
#menycontainer a#current{background: #DAF9DA; border: 1px solid #000000; border-bottom: 1px solid #DAF9DA; color: #000000;}

/*sidmeny*/
#sidmeny {
	color: #990000;
	width: 25%;
	background-color: #AFF3AF;
	float: right;
	padding-top 10px;
	margin: 0;
}
#sidmeny p{
	line-height: 1.6em;
	padding-right: 5px;
	padding-left: 10px;

		
}
	
/*Innehåll*/
#kolumn {
	color: #000;
	background: #DAF9DA;
	float: left;
  	width: 75%; 
	padding-top:4px;
 
}
#kolumn p {
	line-height: 1.7em;
	margin: 7px 0px 0px 20px;
	width: 343px;
}

#kolumn a {
	margin-top: 15px;

}
#kolumn a:link {
	color: #785042;
	text-decoration: none;
	
}
#kolumn a:visited {
	color: #785042;
	text-decoration: none;
	
}

#kolumn a:hover {
	color:#D2B1A4;
	
	

}

/*sidfot*/
#sidfot {
	color: #333333;
	background: #53A653;
	clear: both;
	height: 20px;
	border-top: 1px solid #cccccc;
	border-bottom: 4px solid #53A653;

}
#sidfot p {
	margin: 7px 0px 7px 20px;
	font-size: 0.9em;	
}
	
#sidfot a:link {
	color: #2453C1;
	text-decoration: none;

}
#sidfot a:visited {
	color: #2453C1;
	text-decoration: none;
}
#sidfot a:hover {
	color:#000;
	text-decoration: underline;

}

HTML kod:

<!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>Jöran Briding</title>

     <meta http-equiv="content-type" content="text/xhtml+xml; charset=iso-8859-1" />

        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <link href="mall.css" rel="stylesheet" type="text/css" />

    </head>

    <body>

          <div id="sidhuvud">

      </div>
	
<div id="menycontainer">
  <ul id="meny">
    <li id="active"><a href="index.html" id="current">Hem</a></li>
    <li><a href="buddhism.html">Livet, Buddhism & VBV</a></li>

    <li><a href="litteratur.html">Litteratur</a></li>
    <li><a href="fotogalleri.html">Fotogalleri</a></li>
    <li><a href="lankar.html">Länkar</a></li>
	<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>

<div id="sidmeny">
		<p>Min tolkning av Metta sutta, en av texterna i Dhammapada.<br /></p>
		<div id="liten_text"><p>(Dhammapada är en av de viktigaste textsamlingarna i Palikanon.<br />
		(Pali är ett fornindiskt språk.) Metta = allomfattande ovillkorlig kärlek (ej fysisk). Sutta = berättelse- text.)</div></p>
		<p>Utveckla metta till alla varelser i hela världen, oberoende v kön, ursprung, åsikter eller gärningar.<br />
		På detta sätt kommer du att vara spontant etisk och uppnå fulländad insikt.<br />
		Och genom att ge upp begär efter sinnesnjutningar, kommer du att slutligen helt och hållet, bli fri!
</p>
		</div>  
		
			
		<div id="kolumn">

		<h2>Välkommen till Jörans hemsida</h2>
		<p>Den här sidan handlar om saker som jag tycker är viktiga 
		men också om mer personliga detaljer. Man kan hitta böcker som jag tycker är läsvärda och intressanta. Det finns också foton, gamla och nytagna. 
		</p>
		<div style="clear:both;"></div>

		</div>
		
		  
 <div id="sidfot">
 <p>Jöran Briding 2008</p>
               
      </div>

    </body>
</html>

Är så less på det här nu :( Det vill aldrig bli som jag vill ha det och alltid ska det krångla. Det mest irriterande är när allt ser så snyggt och fint ut i FF men sen när man kollar i IE vänder lyckan för där ser det bara fult ut :OO

134 ms totalt · 3 externa anrop · v20260731065814-full.3ab8d573
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
132 ms — hämta tråd, inlägg och bilagor (db)