Breite des Header bleibt nicht gleich

html.de-Forum HTML, XHTML & CSS
1

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

  1. Frage
    Wie füg ich bei dem Input ein Image hin neben „Suche“ ganz oben rechts.

[HTML]

Homepage

Registrieren

Kostenlos Anmelden und ein Teil der Community werden!

Absenden Zurücksetzen

Welcome,

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.

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.

Business

Meeting-Plan

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.

  • 31.12.2015

Gewinnspiel!

E-Mail Adresse eingeben, bestätigen und kostenlos Mitmachen!

[/HTML] 
@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.

2

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

<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

3

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

4

Oder einfach in die CSS das einfügen. Mache ich auch bei meinen Seiten. Funktioniert.

[HTML]html {
height: 100%;
padding-bottom: 1px;
}[/HTML]

Gruß Alex