kleines Problem mit css

nieselfriem

Hallo!

Habe folgendes Script
HTML:

HTML

<!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" lang="de">
<head><meta http-equiv="Content-type" content="text/html ; CHARSET=iso-8859-1"/>
<title>Hallo</title>
<link rel="stylesheet" type="text/css" href="css/basic.css" media="screen"/>
</head>
<body color="ffffff">


<div id="wrap">
	<div id="header">
		 <h1>Titel</h1>
	</div>
	<div id="navigation">
		<ul>
          [*]
            [url='index.php']Start[/url]

          [*]
            [url='about.html']&Uuml;ber uns[/url]

          [*]
            [url='register.php']Registrierung[/url]

          [*]
            [url='impressum.html']Impressum[/url]

          [*]
            [url='kontakt.html']Kontakt[/url]

          [*]
            [url='formular2.php']Login[/url]

        <ul>                
	</div>

	<div id="sidebar">




sdsd</p>

	</div>	 
	<div id="content">
		<h1>Kontakt</h1>





       Text blabla
        </p>


	</div>

</div>


</body>
</html>

Alles anzeigen

CSS:

Code

#body {
font-size: 85%;
font-famliy: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
text-align: center;
}


#wrap {
width: 760px;
margin: 0 ;
text-align: center;
}


#header {
float: left;
width: 800px;
height: 110px;
text-align: center;
border-top: 1px solid #999;
}


#navigation {
float: left;
width: 800px;
height: 40px;
border-bottom: 1px solid #999;
border-top: 1px solid #999;
}


#sidebar {
float: left;
width: 150px;
height: 400px;
top: 0;


}


#content {
float: left;
width: 600px;
height: 400px;
border-right: 1px solid #999;
border-left: 1px solid #999;
top: 0;
}








#navigation ul {
list-style-type: none;
}


#navigation ul li {
display: inline;
}




h1, h2, h3, h4, h5, h6 {
margin: 20px;
}


p.boxtext {


border: 1px solid #000;
padding: 5px;


}


p {
margin: 15px 20px;
}


#list {
list-style-position:outside;
}


form {
width:450px;
}


#person label {
display:block;
font-weight: bold;
}


#aktivierung label {
display:block;
font-weight: bold;
}


#login label {
display:block;
font-weight: bold;
}


fieldset {
border: 1px solid #dbd;
background: #fafafa;
}


legend {
font-weight: bold;
font-size: 120%;
color: #999;
}


textarea {
width: 425px;
heigth: 125px;
}

Alles anzeigen

Wenn ich jedoch den Content bereich im CSS auf z.B. 700px vergrößern will rutsch dieser nach unten obwohl doch genügend platz sein sollte nach rechts heraus. Was kann ich da machen.

Gruß niesel

sejuma

150px sidebar + 700px content = 850 px.
Dein #wrapper, in dem sich beide befinden ist aber nur 760px breit.
Also darfst du diesen Wert nicht überschreiten bzw. musst ihn dann ebenso erhöhen. Außerdem sind dabei noch die 2px für den content-Rahmen zu berücksichtigen.

nieselfriem

alles klar * jedoch habe ich da noch ein weiters problem.

das css sieht nun folgendermaßen aus:

Code

#body {
font-size: 85%;
font-famliy: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
text-align: center;
}


#wrap {
width: 900px;
margin: 0 ;
text-align: center;
}


#header {
float: left;
width: 1000px;
height: 110px;
text-align: center;
border-top: 1px solid #999;
}


#navigation {
float: left;
width: 1000px;
height: 60px;
border-bottom: 1px solid #999;
border-top: 1px solid #999;
top:0px;
left:0px;
background-color:rgb(230,180,250);
z-index:1;
}


 



#sidebar {
float: left;
width: 150px;
height: 400px;
top: 0;


}


#content {
float: left;
width: 700px;
height: 400px;
border-right: 1px solid #999;
border-left: 1px solid #999;
top: 0;
}








#navigation ul {
list-style-type: none;
}


#navigation ul li {
display: inline;
}




h1, h2, h3, h4, h5, h6 {
margin: 20px;
}


p.boxtext {


border: 1px solid #000;
padding: 5px;


}


p {
margin: 15px 20px;
}


#list {
list-style-position:outside;
}


form {
width:450px;
}


#person label {
display:block;
font-weight: bold;
}


#aktivierung label {
display:block;
font-weight: bold;
}


#login label {
display:block;
font-weight: bold;
}


fieldset {
border: 1px solid #dbd;
background: #fafafa;
}


legend {
font-weight: bold;
font-size: 120%;
color: #999;
}


textarea {
width: 425px;
heigth: 125px;
}


a.navi,a.navi_first,a.navi_self{
display:block;
white-space:nowrap;
overflow:hidden;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
font-family:Tahoma,sans-serif;
font-size:12px;
font-weight:bold;
text-decoration:none;
letter-spacing:0.1em;
padding:3px;
text-align:center;
}
a.navi_first {
border-top:1px solid black;
}


a.navi:link,a.navi:link,a.navi:visited,a.navi_first:visited {
background-color:rgb(115,115,75);
color:white;
}


a.navi_self:link,a.navi_self:visited {
background-color:gray;
color:white;
}


a.navi:hover,a.navi_first:hover,a.navi_self:hover,a.navi:active,a.navi_first:active,a.navi_self:active {
background-color:white;
color:black;
}


a.top_link {
            display:block;
            position:absolute;
            width:100px;
            text-align:center;
            height:18px;
            font-family:"MS Sans Serif",sans-serif;
            font-size:12px;
            font-weight:bold;
            padding-top:1px;
            text-decoration:none;
         }
         a.top_link:link, a.top_link:visited {
            color:rgb(150,50,170);
            background-image:url(reiter1.gif);
            background-repeat:no-repeat;
            background-color:rgb(245,240,205);
         }       
         a.top_link:hover, a.top_link:active {
            color:black;
            background-image:url(reiter2.gif);
            background-position:top right;
            background-repeat:no-repeat;
            background-color:white;


}


a#home {

	   bottom:0px;
            left:100px;
            z-index:3;
         }


 a#home:hover, a#home:active,
         a#news:hover, a#news:active,
         a#game:hover, a#game:active,
         a#cheats:hover, a#cheats:active,
         a#comm:hover, a#comm:active,
         a#impr:hover, a#impr:active {
            z-index:9;
         }

Alles anzeigen

die htmldatei

HTML

<!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" lang="de">
<head><meta http-equiv="Content-type" content="text/html ; CHARSET=iso-8859-1"/>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/basic.css" media="screen"/>
</head>
<body color="ffffff">


<div id="wrap">
	<div id="header">
		 <h1>Agent Pepper</h1>
	</div>
	<div id="navigation">
		<ul>
          [*]
            [url='index.php']Start[/url]

          [*]
            [url='about.html']&Uuml;ber uns[/url]

          [*]
            [url='register.php']Registrierung[/url]

          [*]
            [url='impressum.html']Impressum[/url]

          [*]
            [url='kontakt.html']Kontakt[/url]

          [*]
            [url='formular2.php']Login[/url]

        <ul>                
	</div>
	<div id="sidebar">
	 <a class="navi_self navi_first" href="test.html">
	   Home
         </a>	
        <a class="navi_self navi_first" href="test.html">
	   Zwiebeln
         </a>	
	<a class="navi_self navi_first" href="test.html">
	   Produkte
         </a>	
	<a class="navi_self navi_first" href="test.html">
	   Tipps & Tricks
         </a>	

	</div>	 


	<div id="content">
		<h1>Kontakt</h1>





       Willkomen bei Test Wir sind ein bablabla unternehmen um fragebögen usw zu erstellen. dies ist lusig und mach spaß und hoffen auf viel Geld 
        </p>


	</div>


</div>


</body>
</html>

Alles anzeigen

nu ist es so, der Button "Start" statt im Navibereich unten herumspringt. Sicher wieder das gleiche prob wie vorhin mit dem wrapper. Abewr ich komm nicht drauf, was ich noch machen kann.

Gruß niesel

sejuma

Kommt drauf an, wo du den hin haben willst.
Dass er unten steht wird von

Code

id="home"

verursacht. Würd' ich also weglassen.
Wenn er in die horizontale Navi soll, dann lösche bei

Code

a.top_link

das "position:absolute;" Der Start-Link steht dann über der Horizontalnavi.
Falls das nicht so sein soll, müsstest du noch angeben wo du den Link gerne hättest.

nieselfriem

habe jetzt folgendes gemacht

Code

a#home {

	   bottom:0px;
            margin-left:199px;
            z-index:3;
         }


a#about {

	   bottom:0px;
            margin-left:301px;
            z-index:4;
         }


a#register {

	   bottom:0px;
            margin-left:400px;
            z-index:4;

Alles anzeigen

jedoch werden die Buttons in treppenform dargestellt

gruß niesel

sejuma

Kann ich jetzt nicht nachvollziehen. Aber es macht keinen Sinn, bei einer normalen Navi die einzelnen Links absolut zu positionieren.
Sieh dir mal hier einige Beispiele für Navilinks an. Da solltest du fündig werden.

Tags