• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Breite des Header bleibt nicht gleich

P

parameter95

Neues Mitglied
Guten Tag,

Ich habe 30 Minuten - 1 Stunde herum geschaut wo das ..verdammte.. Problem liegt. Hab rumgetestet doch finde den "Fehler" einfach nicht. Hier macht euch ein Bild. Dann wisst ihr was ich meine:

http://stronet.bplaced.net/home.php

http://stronet.bplaced.net/contact.php

Schaut euch den Header Bereich an , am besten die Überschrift Stronet und wechselt den Browser schaut dabei genau hin.

Wieso verschiebt sich die Breite? Ich meine der Header hat den gleichen CSS-Code wie bei der anderen .php Datei

2. Frage
Wie füg ich bei dem Input ein Image hin neben "Suche" ganz oben rechts.


HTML: 
<html>
<head>
<meta charset="UTF-8">
<meta language="de">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="style.css" type="text/css">
<title> Homepage </title>
</head>

<body>
<header>
<div class="container">
<section id="pd">
<h1 style="font-weight:lighter;">Stronet</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Gewinnspiel</a></li>
<li><a href="#">Mitglieder
<li><a href="#">Kontakt</a></li>
<li><a href="#">Community</a></li>
</ul>
</nav>

<p><input name="search" class="src" type="text" size="25" placeholder="Suche"> <input type="submit" class="sc" value=""></p>
</section>
</div>
</header>

<section id="reg">
<div class="container">

<section>
<h2>Registrieren</h2>
<h3>Kostenlos Anmelden und ein Teil der Community werden!</h3>
<p><input name="username" size="25" placeholder="Benutzername"> <input name="email" size="25" placeholder="E-Mail Adresse"></p>
<p><input type="password" name="password" size="25" placeholder="Passwort"> <input type="password" name="passwdh" size="25" placeholder="Passwort wiederholen"></p>
<p><input name="vorname" size="25" placeholder="Vorname"> <input name="nachname" size="25" placeholder="Nachname"></p>
<p><a href="#" class="button">Absenden</a> <a href="#" class="reg">Zur&uuml;cksetzen</a></p>
</section>
</div>
</section>

<section id="main">
<div class="container">
<section>
<h2>Welcome,</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section>

<section>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section>
</div>
</section>

<section id="sec-bottom">
<div class="container-bottom">
<h1>Business</h1>
<article>
<p><img src="images/business.jpg"></p>
</article>
<section>
<h2>Meeting-Plan</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<ul>
<li><span class="meeting-string"> 31.12.2015 </span></li>
</ul>
</section>
</div>
</section>

<section id="gewinn-spiel">
<div class="container-bottom">
<h1>Gewinnspiel!</h1>
<h2>E-Mail Adresse eingeben, best&auml;tigen und kostenlos Mitmachen!</h2>
<p><input type="text" name="gwspiel" placeholder="E-Mail Adresse"> <input type="submit" value="Senden" name="send-wingame"></p>

</div>
</section>
<section id="footer">
<div class="container-bottom">
</div>
</section>
</body>
</html>


Code: 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

* {
margin:0;
padding:0;
border-box:box-sizing;
text-decoration:none;
list-style:none;
}

html, body {
font-size:100%;
margin:0em;
padding:0em;
background:#dcdcdc;
}

h1 {
font-family:tahoma;
font-size:2.250em;
line-height:1.8em;
color:#2F2C2C;
margin:0 auto;
}

h2 {
font-family:'Open Sans',sans-serif;
font-size:1.563em;
line-height:1.8em;
color:#444;
margin:0 auto;
font-weight:lighter;
}

h3 {
font-family:'Open Sans',sans-serif;
line-height:1.5em;
color:#666;
font-weight:lighter;
}

p {
line-height:1.5em;
color:#555;
padding:0.313em;
margin:0 auto;
font-family:tahoma;
}

a {
font-family:'Open Sans',sans-serif;
line-height:1.5em;
color:#555;
padding:0.313em;
margin:0 auto;
text-decoration:none;
}

li {
font-family:tahoma;
line-height:1.5em;
color:#2F2D2C;
padding:0.313em;
margin:0 auto;
list-style:none;
}

img {
height:auto;
min-width:250px;
}

.container {
width:1300px;
margin-left:auto;
margin-right:auto;
}

header {
display:table;
width:100%;
padding:0em;
margin:0 auto;
background:#fff;
border-bottom:1px solid #eee;
box-shadow:0px 0px 10px #333;
}

header h1 {
display:table-cell;
width:33.3%;
margin:0 auto;
}

header nav {
display:table-cell;
width:33.3%;
margin:0em auto;
text-align:center;
}

header nav a:hover {
color:#333;
transition: all 0.30s ease;
}

header nav li {
display:inline;
}

header p {
display:table-cell;
width:33.3%;
margin:0 auto;
text-align:right;
}

#pd {
padding:0.500em;
}

.sc {
border:1px solid #ccc;
font-family:'Open Sans',sans-serif;
color:#444;
width:10%;
padding:4px;
cursor:pointer;
}

.src {
background:#fff;
margin:0 auto;
padding:5px;
color:#444;
font-family:'Open Sans',sans-serif;
border:1px solid #ccc;
}


.button {
background:#3399cc;
padding-left:20px;
padding-right:20px;
margin:0 auto;
text-align:center;
padding:10px;
color:#fff;
cursor:pointer;
transition:background .3s;
-webkit-transition:background .3s;
}

.button:hover {
background:#2288bb;
}

#reg {
display:block;
margin:0 auto;
padding:0;
text-align:center;
background:#fff;
border-bottom:1px solid #eee;
}

#reg section {
width:50%;
margin:0em auto;
padding:1em;
text-align:center;
}

#reg section input {
  width:35%;
  background:#fff;
  margin-bottom:2%;
  border:1px solid #ccc;
  padding:2%;
  font-family:'Open Sans',sans-serif;
  font-size:95%;
  color:#555;
}

#main {
display:block;
margin:0 auto;
padding:0;
text-align:center;
background:#fff;
border-bottom:1px solid #eee;
}

#main section {
display:inline-block;
width:49.8%;
margin:1em auto;
padding:0em;
}

#main section p {
text-align:justify;
font-family:'Open Sans',sans-serif;
}

#main section h2 {
font-family:'Open Sans',sans-serif;
text-align:left;
}

.container-bottom {
width:1300px;
margin-left:auto;
margin-right:auto;
padding:1.5em;
}

#sec-bottom {
width:100%;
margin:0em auto;
padding:0em;
background:#fff;
border-bottom:1px solid #eee;
}

#sec-bottom h1 {
text-align:center;
margin:0em auto;
font-family:'Open Sans',sans-serif;
font-weight:300;
margin-bottom:10px;
}

#sec-bottom p {
color:#444;
}

#sec-bottom ul {
margin:6.150em auto;
text-align:center;
padding:1em;
background:#eee;
vertical-align:bottom;
}

#sec-bottom span {
color:#444;
text-shadow:0px 3px 3px #444;
font-size:130%;
font-weight:300;
font-family:'Open Sans',sans-serif;
}

#sec-bottom span, li {
text-align:center;
list-style:none;
}

#sec-bottom article img {
width:100%;
box-shadow:0px 0px 10px #333;
}

#sec-bottom article {
display:inline-block;
width:47.8%;
padding:0em;
margin:0em auto;
}

#sec-bottom section {
display:inline-block;
width:47.8%;
margin:0em auto;
margin-left:1em;
padding:0em;
vertical-align:top;
}

#gewinn-spiel {
width:100%;
margin:0em auto;
padding:0em;
background:#fff;
text-align:center;
}

#gewinn-spiel section {
width:auto;
margin:1em auto;
padding:1em;
text-align:center;
}

#gewinn-spiel h1 {
font-family:'Open Sans',sans-serif;
font-weight:300;
color:#444;
text-align:center;
margin:0em auto;
}

#gewinn-spiel h2 {
text-align:center;
}

#gewinn-spiel input[type=text] {
width:45%;
border:1px solid #ccc;
padding:1.5%;
margin:2%;
font-family:'Open Sans',sans-serif;
font-size:110%;
color:#444;
}

#gewinn-spiel input[type=text]:hover {
border:1px solid #3399cc;
transition: all .2s ease;
-webkit-transition: all .2s ease;
}

#gewinn-spiel input[type=submit] {
cursor:pointer;
width:14%;
padding:1.5%;
margin:0%;
font-family:'Open Sans',sans-serif;
border:1px solid #ccc;
background:#eee;
color:#666
}

#gewinn-spiel input[type=submit]:hover {
background:#fff;
color:#444;
transition: all .2s ease;
-webkit-transition: all .2s ease;
}

/* CONTACT.PHP */
#contact {
width:100%;
margin:0em auto;
padding:0em;
background:#fff;
text-align:center;
}

#contact article {
width:auto;
margin:0em auto;
padding:0em;
text-align:center;
}

#contact article h1 {
color:#555;
font-family:'Open Sans',sans-serif;
text-align:center;
font-weight:300;
}

#contact article input[type=text] {
border:1px solid #ccc;
width:30%;
padding:1%;
font-family:'Open Sans',sans-serif;
color:#555;
}

#contact article textarea {
border:1px solid #ccc;
padding:1%;
font-family:'Open Sans',sans-serif;
color:#555;
}

Problem liegt an der home.php normal soll es wie bei der contact.php aussehen.

PS: benutze kein bootstrap oder sonstiges.
 
Zuletzt bearbeitet:
Hallo,

dein Problem kann ich nicht nachvollziehen.

Insgesamt ist der gesamte Quelltext Schrott. Du solltest dich zumindest mit den minimalen Grundlagen von HTML / CSS beschäftigen wenn du eine Webseite erstellen willst.

Lass dann die Seite durch einen Validator laufen und beseitige die Fehler, angefangen vom fehlenden Doctype. Durch den fehlenden Doctype gibst du dem Browser bei der Darstellung freie Hand.

Benutze für die Container die dafür vorgesehen Bezeichnungen.

Verzichte auf die vielen unsinnigen Verschachtelungen. Das ist eine div-Suppe mit teilweise anderen Bezeichnungen, zum Beispiel

Code: 
<header>
<div class="container">
<section id="pd">
...
</section>
</div>
</header>

Das header-Element reicht hier vollkommen aus.

u.s.w. u.s.w.

Zu den fehlenden Grundlagen: Im Gegensatz zu den anderen Containern auf der selben Ebene (direkte Kinder des body-Elements) hast du dem header-Element ein "display: table" mit auf den Weg gegeben. Wenn du so etwas tust solltest du dich auch damit beschäftigen, was für Auswirkungen so eine Anweisung hat, da die dann alle zum Tragen kommen.

Gruss

MrMurphy
 
Also um dir den Auslöser deines Problemes zu nennen:
Die Scrollbar, die auf der einen Seite nicht vorhanden ist, schiebt die Seite auf der anderen Seite nach links.

Auf der Seite ohne Scrollbars solltest du einfach mit CSS eine Scrollbar einfügen, dann tritt das Problem nicht mehr auf
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben