index.html Datei wird nicht im browser angezeigt

[BeginnerBobo]

Code: Alles auswählen

#header h1	{
			width:1024px;
			margin:0px;
			}

Dadurch habe ich schonmal den abstand nach oben entfernen können. Nun hab ich nurnoch links und rechts die abstände.. jemand ne idee?

edit: Did it! :O

nachdem ich die breite (width) aller ehhhm "divs" ^^ auf 1024 erhöht hatte geht der schwarze balken nun wie gewünscht von ganz links bis ganz rechts und fängt ganz oben an. Ich befürchte allerdings dass das nur bei leuten ist die ebenfalls die auflösung von 1024 haben. wenn jemand mehr hat wird es wieder in die mitte skaliert? das soll allerdings nicht das problem sein. ich denke das ist fast überall so. das hier ist nun der "fertige" code

Code: Alles auswählen

body 	{
		background-color:#BC0000;
		text-align:center;
		margin:0px;
		}
#main	{
		width:1024px;
		margin:0px auto;	
		}
#header {
		width:1024px;
		heigth:30px;
		background:#000000;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-o-border-radius: 2px;
		-webkit-border-radius: 2px;
		margin:0px;
		}
#header h1	{
			width:1024px;
			margin:0px;
			padding-left:0px;
			padding-right:0px;
			}
#menu	{
		width:170px;
		heigth:300px;
		background:#252525
		border-radius: 2px;
		-moz-border-radius: 2px;
		-o-border-radius: 2px;
		-webkit-border-radius: 2px;
		margin:0px;
		}

[Xin]

noch flott ne frage nebenbei :

Gib allen überliegenden divs ein width:100% mit (gilt auch und insbesondere für body)

Edit... zu spät...

[BeginnerBobo]

So Leute ich bin Es nochmal. Ich bräuchte nochmal ein wenig Hilfe arbeite immernoch am layout und habe da nun ein winziges Problem. Leider haben wir momentan kein Internet im Ort weswegen ich mir dem Handy schreiben muss .. also:
Wenn ich wieder Internet habe reiche ich bilder nach wodurch es wesentlich übersichtlicher wird. Aber versuchen wir es schon mal so: ganz oben auf der Seite ist ein Menü 1 von ganz links bis ganz rechts. An dieses Menü grenzt menü2 direkt darunter ohne Abstand allerdings in einer helleren Farbe und hat 200px Abstand zum linken Rand. So in diesen 200px Abstand soll eine dritte Fläche wo Werbung rein kommt. Dieses soll aber nicht an Menü 1 angrenzen sondern 3px Abstand haben. Nun Krieg ich es nur hin dass entweder Menü2 und die werbefläche 3px Abstand zu Menü1 haben oder eben keins. Ich probiere es die ganze zeit mitmargin top oder left.. hab auch schon padding-top versucht und fleat:left/top aber ich komme immer nur zu den 2 Ergebnissen wie oben beschrieben. Mit Bildern und dem code wäre es Viel leichter aber vielleicht habt ihr ja so schon eine Idee wie ich dieses Problem lösen kann. Vielen Dank lg

[BeginnerBobo]

Hier kommen noch die Bilder

Also so soll es aussehen:
http://www.directupload.net/file/d/3568 ... rv_jpg.htm

Aber es sieht ohne Abstand so aus:
http://www.directupload.net/file/d/3568 ... wa_jpg.htm

und wenn ich margin-top:3px; einfüge sieht es so aus:
http://www.directupload.net/file/d/3568 ... rv_jpg.htm

Code: Alles auswählen

#content
		{
		width:1014px;
		}
		#menu	
				{
				float:left;
				width:823px;
				height:28px;
				background:#FF0000;
				padding-left:2px;
				margin-top:0px;
				margin-left:200px;
				}
		#news	
				{
				}
		#adds	
				{
				float:top;
				[b]margin-top:3px;[/b]
				width:175px;
				height:100%;
				background:#FFFFFF;
				border-color:#BC0000;
				border-top-width:1px;
				border-right-width:1px;
				border-style:solid;
				padding:0.7em;
				text-align:justify;
				padding-left:2px;
				border-radius: 2px;
				-moz-border-radius: 2px;
				-o-border-radius: 2px;
				-webkit-border-radius: 2px;
				}
		#adds h5
			{
			float:top;
			text-align:left;
			padding-left:4px;
			width:1014px;
			font-family: arial;
			color:#000000;
			}
			

Das ist so der Code. Habt ihr ne idee wie ich nur der werbefläche die 3px abstand gebe? und wenn wir schon mal dabei sind. wieso ist die Schrift "Werbung" also im Code "#adds h5" mit so nem großen abstand zum oberen rand? fragen über fragen von einem kleinen anfänger :/ .. Hoffe ihr könnt mir helfen. Danke und bis denne

[Xin]

Den Text zuvor habe ich nicht kapiert... hier kapiere ich aber auch nicht wirklich, was das Problem ist... Werbung ist beim dritten Bild doch gut platziert!?

Bild 1 - das gewünschte - sieht doch aus wie Bild 3 - was Du hast!? - was sich auf den zweiten Blick dadurch erklärt, dass die Links identisch sind... Dann mach mal 'nen neuen Versuch. ^^

[BeginnerBobo]

keine ahnung was da wieder schief gelaufen ist ^^.

so sieht es aus mit abstand..
http://www.directupload.net/file/d/3568 ... x5_jpg.htm

ich hoffe nun passt alles o.O

EDIT:

habe nun meine "div container" (wenn es überhaupt welche sind o.O) mal mit dem befehl "position:fixed" festgelegt. vorher habe ich ja alles immer mit float und margin und so gelöst. jetzt sieht es so aus

Code: Alles auswählen

#content
		{
		width:1014px;
		}
		#menu	
				{
				position:fixed;
				margin-top:40px;
				width:823px;
				height:28px;
				background:#FF0000;
				padding-left:2px;
				margin-left:200px;
				}
		#news	
				{
				}
		#adds	
				{
				position:fixed;
				margin-top:45px;
				width:175px;
				height:100%;
				background:#FFFFFF;
				border-color:#BC0000;
				border-top-width:1px;
				border-right-width:1px;
				border-style:solid;
				padding:0.7em;
				text-align:justify;
				padding-left:2px;
				border-radius: 2px;
				-moz-border-radius: 2px;
				-o-border-radius: 2px;
				-webkit-border-radius: 2px;
				}
		#adds h5
			{
			position:fixed;
			margin-top:0px;
			text-align:left;
			padding-left:4px;
			width:1014px;
			font-family: arial;
			color:#000000;
			}

Dadurch sollten die menüleisten und der header immer sichtbar sein auch wenn man beim inhalt scrollt. außerdem konnte ich nun so mein problem mit den abständen lösen. Ergebnis bisher:
http://www.directupload.net/file/d/3568 ... 9x_jpg.htm

optimal sieht der code garantiert nicht aus aber bin ja auch erst seit 2 tagen dabei

[BeginnerBobo]

hey leute. habe heute bisschen weiter gemacht und komme jetzt nochmal zu nem kleinen problem worüber ich im internet einfach nichts finden kann. habe eine navigation eingebaut und anfangs funktionierte auch alles wunderbar. nur jetzt wo ich fast fertig bin lassen sich die links also die menüpunkte nurnoch schlecht anklicken. als würde der link unterm wort hängen. hier ist mal die seite. macht euch selbst ein bild davon^^ also die links funktionieren sowieso noch nicht aber ihr seht ja wenn aus dem mauszeiger ne hand wird.

http://bobshop.bplaced.net/Carblog2014/

Hier der Auszug aus der index.html:

Code: Alles auswählen

			<div id="content">
				<div id="menu">
					<ul id="navigation">
						<li class="neuigkeiten"><a href="linkurl<!--hier link rein-->">Neuigkeiten</a></li>
						<li class="events"><a href="linkurl<!--hier link rein-->">Events</a></li>
						<li class="gruppen"><a href="linkurl<!--hier link rein-->">Gruppen</a></li>
						<li class="autobörse"><a href="linkurl<!--hier link rein-->">Autob&ouml;rse</a></li>
						<li class="searchfor"><a href="linkurl<!--hier link rein-->">Search for</a></li>
					</ul>
				</div>

und hier aus der .css datei:

Code: Alles auswählen

/* Navigation von Menü 2 hellrot */

ul#navigation
{
font-family: arial;
color:#FFFFFF;
font-weight:bold;
font-size:9pt;
margin-left:-40px;
}

ul#navigation li
{
float:left;
top:-5px;
position:relative;
list-style-type:none;
}

ul#navigation li a
{
color: #FFFFFF;
text-decoration:none;
}

ul#navigation li a:hover
{
color: #FF0000; /*Hintergrundfläche soll sich verfärben wenn man mit maus drüber geht*/
text-decoration:none;
}

ul#navigation li.neuigkeiten
{
width:130px;
}

ul#navigation li.events
{
width:130px;
}

ul#navigation li.gruppen
{
width:130px;
}

ul#navigation li.autobörse
{
width:130px;
}

ul#navigation li.searchfor
{
width:130px;
}

vielleicht habt ihr ja nochmal lust und zeit mir zu helfen. finde da echt keine lösung. liebe grüße

edit: einschränken kann man es vielleicht auf die "z-index: ;"?
schaut mal die design.css:

Code: Alles auswählen

#header 
		{
		width:1024px;
		height:40px;
		position:fixed;
		background:#BC0000;
		border-radius: 2px;
		-moz-border-radius: 2px;
		-o-border-radius: 2px;
		-webkit-border-radius: 2px;
		z-index: 3;
		box-shadow:0.5px 0.5px 0.5px 0.5px #000000;
		}
#header h1	
			{
			position:fixed;
			text-align:left;
			padding-left:8px;
			width:1014px;
			margin:0px;
			font-family: aston-f1;
			color:#FFFFFF;
			z-index: 3;
			}
#content
		{
		width:1014px;
		}
		#menu	
				{
				position:fixed;
				margin-top:41px;
				width:823px;
				height:28px;
				background:#FF0000;
				padding-left:2px;
				margin-left:200px;
				z-index: 2;
				box-shadow:0.5px 0.5px 0.5px 0.5px #000000;
				}

vielleicht liegen #header und #menu einfach über den links? aber wie mache ich es richtig

[canlot]

Du hast <h6>Werbung</h6> 1014 px breit gemacht, das verdeckt die anderen Menüpunkte.

[BeginnerBobo]

das ist es tatsächlich o.O vielen dank dann muss ich des irgendwie anders da rein schreiben .. ist ja merkwürdig. hatte es nun auch soweit gelöst aber viiiiiel umständlicher ^^

edit:
wunderbar habs nun so gelöst

Code: Alles auswählen

		#adds p
				{
				font-family: arial;
				font-size: 9pt;
				font-weight:bold;
				margin-top:1px;
				}

ergebnis kann man nun auch auf http://bobshop.bplaced.net/Carblog2014/ sehen. vielen dank so simpel kann es manchmal sein. dann gehts nun weiter^^

[canlot]

Ja man kann das ganz einfach selbst herausfinden, wenn man z.B. chrome als Browser hat, betätigt man Rechtsklick auf ein Objekt und auf "Element untersuchen" dann wird dir die interne Struktur angezeigt und die css Regeln dazu, die Elemente werden dazu auch noch markiert. Für Feuerfuchs gibt es Plugins einer davon ist firebug.