Avatar billede nanders Nybegynder
20. oktober 2009 - 21:28 Der er 3 kommentarer og
1 løsning

CSS - 2 tekstbokse ved siden af hinanden

Kære eksperter,

Jeg vil gerne have tekstboksen med titlen Navigation op og flugte tekstboksen Content på hjemmesiden:

http://microbialfuelcells.net/testenvironment.htm

Hvad går der galt i CSS filen og kan alt det med Z-index ungåes?

CSS filen kan findes på: http://microbialfuelcells.net/main.css

VH

nanders
Avatar billede nissen2630 Novice
20. oktober 2009 - 22:03 #1
class navAlpha mangler i din CSS
Brug float: left i begge DIV og de kommer ved siden af hinanden
Avatar billede nissen2630 Novice
20. oktober 2009 - 22:14 #2
Har rettet det med grønt og byttet om på dine DIV

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dokumentets titel</title>
<meta content="" name="Keywords"/>
<meta content="" name="Description"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<style>
body {
color:#333;
background-color:white;
margin:20px;
padding:0px;
}
h1 {
font-size:24px;
margin:0px 0px 15px 0px;
padding:0px;

}
h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:12px 0px 5px 0px; /* ovenfor , ____ , nedenfor , venstremargen */
padding:0px;
}


p {
font:13px/20px verdana, arial, helvetica, sans-serif;
margin:14px 0px 14px 0px; /* ovenfor , venstre , nedenfor , venstremargen */
padding:0px;
}
/* ovenfor , venstre , nedenfor , venstremargen
.Content>p {margin:0px;}
.Content>p+p {text-indent:0px;}
*/
a {
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}


/* All the content boxes belong to the content class. */

.content {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:120px;
margin:0px 40px 20px 175px; /* __,from right,___, from left */

background-color:white;
padding:10px;
float:left;
}

.navigation {
position:absolute;
width:195px;
top:15px;
left:8px;
padding:10px;
float:left;
}
</style
</head>
<body>
<div class="navAlpha" style="float: left;">
<p>
<b>Navigation</b>
</p>
<p>
<a href="index.htm" title="Home">Home</a>
</p>
<p>\nHow is this text brought...within a width of 195px?\n</p>
<p>\n.navigation {\n position:...ing:10px;\n z-index:5;\n }\n</p>
</div>
<div class="content">
<h1>Content</h1>
<p>\nThis is the text\n</p>
<p>\nThis is the text\n</p>
<p>\nThis is the text\n</p>
</div>

</body>
</html>
Avatar billede nanders Nybegynder
26. september 2010 - 12:57 #3
nissen 2630, vil du smide et svar?
Avatar billede nissen2630 Novice
02. oktober 2010 - 10:43 #4
Så kommer der et her :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester