div richtet sich falsch aus

THE_fan · 15 Mai 2006

hiho

ich habe folgendes prob:

es dreht sich um www.glyrics.de/myblubb/ und zwar wird der content unter der navi angezeigt (erkennbar durch 'text', was den content signalisiert)

style.css

Code:

body
{
	background:		#FFFFFF;
	color: 			#000000;
	margin-left: 		0px;
	margin-right: 		0px;
	margin-top:		0px;
	padding: 		0px;
	font-size:		8pt;
	font-family: 		Verdana,Arial,Helvetica,sans-serif;
	height: 		100%;
}

input.login
{
    	width: 			100px;
	background-color: 	#B6E549;
	color: 			#000000;
	border-top: 		1px solid #B6E549;
	border-left: 		1px solid #B6E549;
	border-bottom: 		1px solid #B6E549;
	border-right: 		1px solid #B6E549;
	font-size: 		8pt;
	font-family: 		Verdana, sans-serif; 
}

img.werbung
{
	width:			468px;
	border-top: 		16px solid #FFFFFF;
	border-left: 		20px solid #FFFFFF;
}

div#main
{
	width:			800px;
	height:			100%;
	background-image:	url('images/bgmain.gif');
	text-align:		left;
	margin:			0px auto;
}

div#header
{
	width:			760px;
	height:			100px;
	background-image:	url('images/header.jpg');
	border-left:		20px solid #C5F650;
}

div#login
{
	width:			600px;
	background:		#C5F650;
	border-left:		20px solid #C5F650;
}

div#werbung
{
	width:			500px;
	height:			100px;
	border-left:		20px solid #C5F650;
}

div#navi
{
	width:			135px;
	line-height:		15px;
	padding-left:		0px;
	border-left:		20px solid #C5F650;
}

ul.navi
{
        background-color: 	#C5F650;
    	width: 			135px;
    	margin: 		0px;
	padding: 		0px;
	list-style: 		none;
	border-top: 		4px solid #FFFFFF;
	border-bottom: 		4px solid #C5F650;
}

div#content
{
	width:			510px;
	margin-top:		1px;
}

kA wieso das jetzt so komisch angezeigt wird ^^ is eig geordnet

index.php

Code:

<?php .. ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>myblubb</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Stefan Maurer">
<meta name="publisher" content="myblubb.de">
<meta name="copyright" content="Stefan Maurer & myblubb.de">
<meta name="description" content="*">
<meta name="keywords" content="*">
<meta name="page-topic" content="Internet">
<meta name="robots" content="index, follow">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main">
	<div id="header">Test</div>
	<div id="login">[b]Login[/b]
			<input value="Nickname" onFocus="if (value == 'Nickname') {value = ''}" onBlur="if (value == '') {value = 'Nickname'}" name="nick" type="text" class="login">
			 | <input value="Password" name="pass" onFocus="if (value == 'Password') {value = ''}" onBlur="if (value == '') {value = 'Password'}" type="password" class="login">
			<input type="submit" name="Login" value="Login" class="login">
	</div>
	<div id="werbung">[img]images/werbung.gif[/img]</div>
	<div id="navi">[b]NAVIGATION[/b]
			<ul class="navi">
				[*]
				[url="#"]Link[/url]

				[url="#"]Link[/url]

				[url="#"]Link[/url]

				[url="#"]Link[/url]

				[url="#"]Link[/url]

				
			[/list]
		      [b]NAVIGATION[/b]
			<ul class="navi">
				[*]
				[url="#"]Link[/url]

				[url="#"]Link[/url]

				[url="#"]Link[/url]

				[url="#"]Link[/url]

				[url="#"]Link[/url]

				
			[/list]
	</div>
	<div id="content">text</div>
</div>
</body>
</html>

habe den php-code weggekürzt, daran liegts denke ich mal nich ;)

Wäre super, wenn mir jmd helfen könnte! Vielen Dank schonmal!

hobbyuser · 16 Mai 2006

Hi THE_fan

könnte es sein das in der CSS Datei bei "div#navi" ein "float:left;" fehlt? :lol:
So erzeugt eine Div auch immer ein Zeilenumbruch, was bedeutet sie wird in der nächsten Zeile fortgesetzt. Des weiteren reicht es wenn du "#navi" schreibst ohne "div" davor. ;)

Gruß
Hobbyuser

THE_fan · 16 Mai 2006

Alles klar, das war der Fehler

:roll:
Vielen Dank für die Hilfe ;)

//edit:
Anderes Problem:
Bezieht sich wieder auf www.glyrics.de/myblubb/
Ich sitze schon fast jetzt 40min dran, weiß nicht was ich bei Google, weiß nicht was ich hier in der Suche eingeben soll, damit ich was hilfreiches finde.

Das div"content" überschreibt bzw legt sich irgendwie über das div"main" was zur Folge hat, dass die Grafik (der Schatten) nicht angezeigt werden.

HTML und CSS wie in meinem ersten Post!
(float:left; in #navi hinzugefügt)

//edit2:
Habe gerade gesehen, dass es im IE ganz normal aussieht, genauso wie es sein soll.. Liegt es also am Firefox (!?)..

EDIT 3:Sry 4 Doppelpost aber kann mir jmd helfen?

//edit3.1:
Mit float:left; wird der Rahmen richtig angezeigt, jedoch ist dann alles nach links verschoben, es soll jedoch zentriert sein und ein einfach <center>..</center> um den Code reicht da leider nicht..
Also, was soll ich machen, dass das klappt?

//edit3.2:
Die width wird für "content" nicht eingehalten.. Komisch heute alles ^^

Anschauen?
http://www.glyrics.de/myblubb/

Mod-Edit: Doppelpost entfernt - nicht entschuldigen sondern den "edit" Button benutzen. (Hobbyuser)

hobbyuser · 17 Mai 2006

Hi THE_fan

ich bin ja grundsätzlich bereit zu helfen, aber aus deiner Beschreibung mit unzähligen Fehlern wird keiner schlau. :roll:

Man sollte ein Problem nach dem anderen lösen und nicht 3 - X Sachen auf einmal fragen und zwischenduch ändern. Bei deinen ganzen Problemen wäre es vielleicht eh besser in der Jobbörse nachzufragen ob dir einer die komplette Seite macht. :lol:

THE_fan · 17 Mai 2006

lol ne, eigentlich bekomm ich das ja hin, mit divs habe ich eben erst 2-3 mal garbeitet ;)

Also zu meinen Problemen:

Es bezieht sich auf www.glyrics.de/myblubb/

Das div "main" wird irgendwie überlappt von dem div "navi" und dem div "content".
(Das sieht ihr daran, dass der grüne Rand [Balken rechts und links] ohne erkennbaren Grund aufhören)

Zu den Quellcodes:

index.php

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>myblubb</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Stefan Maurer">
<meta name="publisher" content="myblubb.de">
<meta name="copyright" content="Stefan Maurer & myblubb.de">
<meta name="description" content="*">
<meta name="keywords" content="*">
<meta name="page-topic" content="Internet">
<meta name="robots" content="index, follow">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main">

	<div id="header"></div>
	<div id="login">[b]Login[/b]
			<input value="Nickname" onFocus="if (value == 'Nickname') {value = ''}" onBlur="if (value == '') {value = 'Nickname'}" name="nick" type="text" class="login">
			 | <input value="Password" name="pass" onFocus="if (value == 'Password') {value = ''}" onBlur="if (value == '') {value = 'Password'}" type="password" class="login">
			<input type="submit" name="Login" value="Login" class="login">
	</div>
	<div id="werbung">[img]images/werbung.gif[/img]</div>
	<div id="navi">[b]NAVIGATION[/b]

			<ul class="navi">
				[*]
				[url="#"]Link[/url]

				[url="#"]Link[/url]

				[url="#"]Link[/url]

				[url="#"]Link[/url]

				[url="#"]Link[/url]


				
			[/list]
		      [b]NAVIGATION[/b]
			<ul class="navi">
				[*]
				[url="#"]Link[/url]

				[url="#"]Link[/url]


				[url="#"]Link[/url]

				[url="#"]Link[/url]

				[url="#"]Link[/url]

				
			[/list]
	</div>
	<div id="content">Hier kommt der Content hin.</div>

	<div id="footer">Copyright 2006 by glyrics.de</div>
</div>
</body>
</html>

style.css

Code:

body
{
	background:		#FFFFFF;
	color: 			#000000;
	margin-left: 		0px;
	margin-right: 		0px;
	margin-top:		0px;
	padding: 		0px;
	font-size:		8pt;
	font-family: 		Verdana,Arial,Helvetica,sans-serif;
	height:			100%;
}

.login
{
    	width: 			100px;
	background-color: 	#B6E549;
	color: 			#000000;
	border-top: 		1px solid #B6E549;
	border-left: 		1px solid #B6E549;
	border-bottom: 		1px solid #B6E549;
	border-right: 		1px solid #B6E549;
	font-size: 		8pt;
	font-family: 		Verdana, sans-serif; 
}

.werbung
{
	width:			468px;
	border-top: 		16px solid #FFFFFF;
	border-left: 		100px solid #FFFFFF;
}

#main
{
	width:			800px;
	text-align:		left;
	float:			center;
	margin:			0px auto;
	border-left:		20px solid #C5F650;
	border-right:		20px solid #C5F650;
}

#header
{
	width:			760px;
	height:			100px;
	background-image:	url('images/header.jpg');
}

#login
{
	width:			600px;
	background:		#C5F650;
}

#werbung
{
	width:			500px;
	height:			100px;
}

#navi
{
	width:			135px;
	line-height:		15px;
	float:			left;
	padding-left:		0px;
}

.navi
{
        background-color: 	#C5F650;
    	width: 			135px;
    	margin: 		0px;
	padding: 		0px;
	list-style: 		none;
	border-top: 		4px solid #FFFFFF;
	border-bottom: 		4px solid #C5F650;
}


#content
{
	width:			490px;
	float:			left;
	margin-top:		15px;
	padding-left:		5px;
	border-left:		15px solid #FFFFFF;
}

#footer
{
	width:			800px;
	line-height:		20px;
	background:		#C5F650;
	float:			left;
	margin-top:		15px;
}

Hoffe das war jetzt genau genug

hobbyuser · 17 Mai 2006

Jo jetzt ist verständlich und prompt folgt eine Antwort. :lol:

Folgende Schritte sollten zum Erfolg führen:
1.) Füge in #navi ein: margin-left:20px;
2.) Entferne aus #content die Zeile: float:left;

Danach sehen wir weiter. ;)

THE_fan · 18 Mai 2006

Okay, eingefügt - bringt leider nichts.. :?
Die Navi ist jetzt 20px nach rechts gerutscht und press am Content dran.
Das Problem besteht weiterhin..

//edit:
Im IE funzt es, im Firefox allerdings nicht..
http://www.glyrics.de/myblubb/

EDIT: *push*
Kann mir niemand helfen? :cry:

EDIT 2:*nochmapush*
Wirklich niemand, der mir helfen kann?

=]ReDHeaD[= · 8 Juni 2006

probiers fürn MF hinzukriegen, egal obs im IE geht, dann machste 2 css dateien,
style.css und iekorrektur.css meinetwegen

dann kommt das:

Code:

<?php
  if (eregi("Msie", $_SERVER['HTTP_USER_AGENT'])) {
   echo '<link rel="stylesheet" href="./css/style.css" type="text/css">';
  echo '<link rel="stylesheet" type="text/css" href="./css/ie5korrektur.css">';
  }
  else {
   if (eregi("FireFox", $_SERVER['HTTP_USER_AGENT'])) {
   echo '<link rel="stylesheet" type="text/css" href="./css/style.css">';
   }
   else {
      echo '<link rel="stylesheet" href="./css/style.css" type="text/css">';
  echo '<link rel="stylesheet" type="text/css" href="./css/ie5korrektur.css">';
   }
  }



 ?>

wenn nicht php-fähig:

Code:

<link rel="stylesheet" href="./css/style.css" type="text/css">

THE_fan · 11 Juni 2006

Danke erstmal :>
Nur das Prob ist, dass ich mit der CSS nicht zurecht komme bzw. den Balken nicht bis zum Footer bekomme (im FF)
Mir stellt sich langsam die Frage ob es überhaupt geht ?!

div richtet sich falsch aus

THE_fan

Neues Mitglied

hobbyuser

Guest

THE_fan

Neues Mitglied

hobbyuser

Guest

THE_fan

Neues Mitglied

hobbyuser

Guest

THE_fan

Neues Mitglied

=]ReDHeaD[=

Mitglied

THE_fan

Neues Mitglied

Neueste Beiträge