WinFuture-Forum.de: Wo kommt die Zeile her - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Wo kommt die Zeile her bin etwas eingerostet


#1 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 14.289
  • Beigetreten: 08. April 06
  • Reputation: 885
  • Geschlecht:Männlich
  • Wohnort:Dortmund NRW
  • Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)

geschrieben 11. Januar 2019 - 13:44

Hallo Leute,

möchte gerade meine Website quasi von Grund auf neu modelieren. Ein paar Code-Fetzen kommen aus der alten Variante dazu. Soweit-so gut...

Nur wo zum Donner kommt diese Leerzeile her (der rot umrandete Bereich) :unsure:

Angehängtes Bild: Unbenannt.PNG

der Relevante HTML-Code sieht aktuell so aus:

         <!-- CSS-Files -->
                  <link href="CSS/style.css" rel="stylesheet" type="text/css">

         </head>
	<body>
		<div class="site">
			<div class="header">Ich bin ein Header</div>
			<div class="content">Hallo der neue Content hier</div>
		</div>
	</body>
</html>


das CSS soweit

body {
	background-color:	#FFFFFF;
	background-image:	url(../PFAD/ZUM/bild.jpg);
	font-family:		verdana, arial;
	font-size:			14px;
	font-weight:		bold;
	line-height:		1.5em;
	width:				90%;
	height:				100%;
	padding-top:		35px;
	padding-bottom:		20px;
	margin-top:			auto;
	margin-bottom:		auto;
	margin-right:		auto;
	margin-left:		auto;
	}
	
.site {
	background-color: 	#aaaaaa;
	height:				90%;
	box-shadow: 		5px 5px 10px #BBBBBB;
	}

.header {
	background-image: 	url(../PFAD/ZUM/bild.jpg);
	background-color:	#789abc;
	height:				200px;
	position:			relative;
	}
	
.content {
	background-image: 	url(../PFAD/ZUM/bild.jpg);
	background-color:	#123456;
	position:			relative;
	padding-left:		5px;
	padding-right:		5px;
	margin-top:			25px;
	height:				100%;
	overflow:			auto;
	white-space:		normal;
	}


bin ich so eingerostet? Bitte um Hilfe :imao:

Nachtrag:
Verschrieben im Screenshoot. kommt selbstredent aus "site".

Also "content" wird aus einem für mich nicht erkennbaren Grund nach "header" beendet und "content" steht dann darunter - inkl. einer Leerzeile.

Dieser Beitrag wurde von Stefan_der_held bearbeitet: 11. Januar 2019 - 13:50

0

Anzeige



#2 _d4rkn3ss4ev3r_

  • Gruppe: Gäste

geschrieben 11. Januar 2019 - 14:01

Ich würde sagen:
.site {
box-shadow: 5px 5px 10px #BBBBBB;
)

ist der Schuldige
1

#3 _Osmodia_

  • Gruppe: Gäste

geschrieben 11. Januar 2019 - 14:05

Nö, durch "margin-top: 25px" für ".content". Da ".site" als Hintergrund #aaaaaa hat, scheint das dann durch die 25px-Lücke an der Stelle durch.
2

#4 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 14.289
  • Beigetreten: 08. April 06
  • Reputation: 885
  • Geschlecht:Männlich
  • Wohnort:Dortmund NRW
  • Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)

geschrieben 11. Januar 2019 - 14:09

Leider nein. Die Zeile mal rausgenommen für den Schatten.

Problem weiter existent - halt nun ohne umlaufenden Schatten :unsure:

Was ich interessant finde ist:

Füge ich meine Nav-Buttons testweise grob ein, so setzen die dort an wo sie sollen. Nur der DIV "content" weiterhin an seiner falschen Position (auch wenn es optisch "korrigiert" aussieht durch die "topnav"-Divs.

Angehängtes Bild: 2.PNG

ergänzter Code:

         <!-- CSS-Files -->
                  <link href="CSS/style.css" rel="stylesheet" type="text/css">

         </head>
	<body>
		<div class="site">
			<div class="header">Ich bin ein Header</div>
				<div class="topnav">1</div>
				<div class="topnav">1</div>
				<div class="topnav">1</div>
				<div class="topnav">1</div>
				<div class="topnav">1</div>
			<div class="content">Hallo der neue Content hier</div>
		</div>
	</body>



body {
	background-color:	#FFFFFF;
	background-image:	url(../PFAD/ZUM/bild.jpg);
	font-family:		verdana, arial;
	font-size:			14px;
	font-weight:		bold;
	line-height:		1.5em;
	width:				90%;
	height:				100%;
	padding-top:		35px;
	padding-bottom:		20px;
	margin-top:			auto;
	margin-bottom:		auto;
	margin-right:		auto;
	margin-left:		auto;
	}
	
.site {
	background-color: 	#aaaaaa;
	height:				90%;
	box-shadow: 		5px 5px 10px #BBBBBB;
	}

.header {
	background-image: 	url(../PFAD/ZUM/bild.jpg);
	background-color:	#789abc;
	height:				200px;
	position:			relative;
	}
	
.content {
	background-image: 	url(../PFAD/ZUM/bild.jpg);
	background-color:	#123456;
	position:			relative;
	padding-left:		5px;
	padding-right:		5px;
	margin-top:			25px;
	height:				100%;
	overflow:			auto;
	white-space:		normal;
	}
.topnav{
	position:			absolute;
	background-color:	#FFFCF5;
	text-align:			center;
	float:				left;
	width:				19.46%;
	position:			relative;
	padding-left:		2px;
	padding-right:		2px;
	padding-top:		1px;
	padding-bottom:		1px;
	border:				solid 1px;
	}
.topnav:hover{
	letter-spacing:		6px;
	font-size:			105%;
	background-color:	#3D342B;
	color:				#FFFCF5;
	}


0

#5 Mitglied ist offline   Stefan_der_held 

  • Gruppe: Offizieller Support
  • Beiträge: 14.289
  • Beigetreten: 08. April 06
  • Reputation: 885
  • Geschlecht:Männlich
  • Wohnort:Dortmund NRW
  • Interessen:Alles wo irgendwie Strom durchfließt fasziniert mich einfach weswegen ich halt Elektroinstallateur geworden bin :)

geschrieben 11. Januar 2019 - 14:17

Beitrag anzeigenZitat (Osmodia: 11. Januar 2019 - 14:05)

Nö, durch "margin-top: 25px" für ".content". Da ".site" als Hintergrund #aaaaaa hat, scheint das dann durch die 25px-Lücke an der Stelle durch.


hast wohl während meiner Antwort gepostet.

Argh! Nöööö.... den Codefetzen wollte ich doch nicht mit übernehmen. Danke.

Nun ist diese Zeile weg. :imao:
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0