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

Abstanz zwischen Navigation und div-Containter

Auf der Startseite gibt es einen Abstand zwischen dem div mit dem Inhalt und der Navigation, der jedoch erst entstand, als ich den grossen Button eingebaut habe.

Das Inhalts-div sollte jedoch an der Navigation kleben, also keinen Abstand haben.
 
Auf der Startseite gibt es einen Abstand zwischen dem div mit dem Inhalt und der Navigation, der jedoch erst entstand, als ich den grossen Button eingebaut habe.

Das Inhalts-div sollte jedoch an der Navigation kleben, also keinen Abstand haben.

Hallo Mario,

Du machst uns das Antworten nicht gerade einfach: geht es um http://www.arudc.ch/ ?

Falls ja: beseitige erstmal die Fehler, die der Validator anmeckert:
[Invalid] Markup Validation of http://www.arudc.ch/ - W3C Markup Validator

Was lädt an der Seite eigentlich ständig neu? - das nervt!

Dann empfehle ich Dir Dein CSS aufzuräumen, damit es übersichtlicher wird.
Fang oben mit html an, danach weiter mit body usw. => dann hast Du eine
Chance, da durchzublicken und wir auch...

Schreib alle Klassen und IDs klein, das reduziert die Fehlergefahr.

Sowas ist ganz gefährlich:
Code:
.button {
width : 130px;
}
#Button {
width: 200px;
float: left;
padding: 5px
margin-top: 0px;
}
Du hast eine Klasse und eine ID mit dem selben Namen => unbedingt vermeiden!
Außerdem fehlt hinter padding: 5px der Strichpunkt => führt auf jeden Fall zu
Fehldarstellung!
Ob noch mehr solche Fehler drin sind, hab ich jetzt nicht gesehen, schau bitte
selber mal sorgfältig durch!

Warum steckt <content> in <wrapper>?
#wrapper hat keine Angabe zur Breite, erstreckt sich also über die gesamte Breite
seines Elternelements, das ist <body>, wenn ich das richtig gesehen habe, damit
ist der Wrapper eindeutig zu breit, als dass neben ihm noch etwas Platz haben könnte.

Also musst Du entweder den Wrapper schmäler machen, oder den Button in den
Wrapper einfügen statt davor.

Grüße
Bernhard
 
Was den Button anbelangt.

Also muss jetzt der Wrapper im Content drin sein?
Wie breit muss denn der Wrapper sein?
 
Was den Button anbelangt.

Also muss jetzt der Wrapper im Content drin sein?
Wie breit muss denn der Wrapper sein?

Hallo Mario,

das kommt drauf an, was Du vorhast: so, wie das gestern aussah (Button vor dem
Wrapper, Wrapper über die gesamte Breite von body, Content im Wrapper) musste
sich der Wrapper unterhalb des Buttons anordnen.

Wenn bei der Ausgangslage von gestern der Button neben den Wrapper sollte,
dann darf der Wrapper nur maximal so breit sein, wie <body> minus Button.

Sollte der Wrapper z.B. dafür da sein, den Footer ganz unten zu halten und muss
er deshalb genauso breit sein wie body, dann muss der Button in den Wrapper.

Du hast nach wie vor Fehler im CSS, die sicher absolut einfach zu beheben sind:

W3C CSS Validator results for http://www.arudc.ch/ (CSS level 2)

body - Die Eigenschaft object-align existiert nicht : center

Du meinst text-align

h1 - Ungültige Nummer : color Versuche ein Semikolon vor dem Eigenschaftsnamen zu finden. Füge es hinzu.

hinter color ist ein Komma statt einem Strichpunkt

h1 - Ungültige Nummer : font-size Versuche ein Semikolon vor dem Eigenschaftsnamen zu finden. Füge es hinzu.

hinter font-size ist ein Komma statt einem Strichpunkt

Das gleiche gilt für HTML:

[Invalid] Markup Validation of http://www.arudc.ch/ - W3C Markup Validator

Line 53, Column 54: Attribute "ALIGN" is not a valid attribute. Did you mean "align"?
<a href="http://www.submitter.de" target="new" align="middle">

Ich wüsste nicht, dass es "align" gibt, wahrscheinlich meinst Du "vertikal-align"
Vielleicht stört sich der Validator aber auch an dem Strichpunkt bei <div style="margin-top:30px;">

(Sowas würdest Du vermeiden, wenn Du alle Layout-Angaben auslagern würdest!
Gleichzeitig wäre es übersichtlicher und würde so die Fehlersuche vereinfachen)

Gleich in der nächsten Zeile hast Du groß geschrieben:

Code:
<IMG SRC="http://www.submitter.de/banner/banner1.gif" BORDER=0 HEIGHT=50 WIDTH=200 ALT=...>

Beseitige nur erstmal diese Fehler, anschließend validiere neu.

Grüße
Bernhard
 
Also der Wrapper ist dazu da, den Footer ganz unten zu halten.

Dieser ist ja auch verschoben, er soltle so breit sein wie der Content...


Gleichzeitig soll der Button aber dort sein, wo er gestern war, also ausserhalb des Contents in der hellgrauen linken Spalte.
 
Also der Wrapper ist dazu da, den Footer ganz unten zu halten.

Hallo Mario,

dann habe ich Dir die Antwort ja schon gegeben:
Sollte der Wrapper z.B. dafür da sein, den Footer ganz unten zu halten und muss
er deshalb genauso breit sein wie body, dann muss der Button in den Wrapper.
Dieser ist ja auch verschoben, er soltle so breit sein wie der Content...

Gleichzeitig soll der Button aber dort sein, wo er gestern war, also ausserhalb des Contents in der hellgrauen linken Spalte.

Der Content muss dann natürlich nach dem Button in den Wrapper.

Dein Content hat clear:both; - was erreichst Du damit?
Damit sagst Du ihm, dass er sich unter dem Button anordnen muss.

Code:
margin:0 0 243.5px 243.5px;
Was soll der Browser damit machen? Er kennt keine Kommastellen bei Pixeln,
da kleiner als ein Pixel nunmal nicht geht, ein halbes Pixel aber kleiner wäre...

Der vierte Wert ist der Abstand nach links, also (falls der Content neben dem
Button wäre) der Abstand zum Button - mach da mal ca. 15 Pixel und schau dann mal.

(bei Null brauchst Du keine Maßeinheit, da 0px genauso viel ist, wie 0 Meter,
nämlich nichts...)

Weiter:
Code:
margin: -7.5em 243.5px 0 243.5px;
Was möchtest Du mit solchen Angaben erreichen?

Wenn Du eine Zentrierung erreichen willst, schreib:
Code:
margin: -7.5em auto 0 ;
(Werden bei margin oder padding nur drei Werte angegeben, gilt der erste für
oben, der zweite für rechts und links, der dritte für unten)

Grüße
Bernhard

P.S.:
Dann empfehle ich Dir Dein CSS aufzuräumen, damit es übersichtlicher wird.
Fang oben mit html an, danach weiter mit body usw. => dann hast Du eine
Chance, da durchzublicken und wir auch...
das empfehle ich Dir immer noch! - Gilt auch für Dein HTML - es ist unübersichtlich!
 
Also der Content soll zentriert sein, also links und rechts den gleichen Abstand zum Bildschirmrand haben.

Das Selbe mit dem Footer...
 
Also der Content soll zentriert sein, also links und rechts den gleichen Abstand zum Bildschirmrand haben.

Das Selbe mit dem Footer...

Hallo Mario,

der Content kann nicht zentriert sein, da daneben der Button steht.

Es gibt da zwar eine Möglichkeit, von der ich Dir aber abrate (zumindest zum
jetztigen Zeitpunkt, da ich denke, dass Du erst die momentanen Herausforderungen
bewältigen musst)

dann habe ich Dir die Antwort ja schon gegeben:
Zitat:
Sollte der Wrapper z.B. dafür da sein, den Footer ganz unten zu halten und muss
er deshalb genauso breit sein wie body, dann muss der Button in den Wrapper.
Der Content muss dann natürlich nach dem Button in den Wrapper.
(bei Null brauchst Du keine Maßeinheit, da 0px genauso viel ist, wie 0 Meter,
nämlich nichts...)
Ein kleinwenig habe ich den Eindruck, dass Du eine geile Website willst, es Dir aber
keinen Spaß macht, Dich damit auseinanderzusetzen...

Grüße
Bernhard
 
Also dann lasse ich die Buttons weg


Wie muss dann die Reihenfolge von aussen nach innen sein?

Wrapper und da drin der Content oder?

Dann müsste der wieder zentriert sein und der Footer die gleiche Breite haben wie der Content...
 
Hallo Mario,

Also dann lasse ich die Buttons weg

Jetzt schauen wir erstmal, dass Du es ohne hinbekommst, anschließend können
wir immer noch schauen, ob wir sie dahin bekommen, wo sie hinsollen.

Wie muss dann die Reihenfolge von aussen nach innen sein?

Wrapper und da drin der Content oder?
Ja.

Dann müsste der wieder zentriert sein und der Footer die gleiche Breite haben wie der Content...

Ich erwarte auch ein ganz klein wenig Eigeninitiative von Dir:
Wir haben gestern den Footer zentriert - wie könnte es dann funktionieren,
den Content zu zentrieren?

Grüße
Bernhard
 
Also ich habe diesen Code beim Content und beim Footer eingefügt:

Code:
margin: -7.5em auto 0;


Dies bewirkt jedoch nur eine Verschiebung...
 
Hallo Mario,

Also ich habe diesen Code beim Content und beim Footer eingefügt:

Code:
margin: -7.5em auto 0;
Dies bewirkt jedoch nur eine Verschiebung...

Content hat float:left; - was bedeutet das?

Klar bewirkt margin eine Verschiebung. Da steht -7.5em
=> das heißt negativer Abstand 7,5 mal die Höhe eines großen "M"

Probier mal: margin:0 auto; - zur Erklärung (gilt für margin und für padding):

  • nur ein Wert angegeben - gilt für alle vier Seiten
  • zwei Werte angegeben
    • erster Wert gilt für oben und unten
    • zweiter für rechts und links
  • drei Werte angegeben
    • erster Wert gilt für oben
    • zweiter für rechts und links
    • dritter für unten
  • vier Werte angegeben
    • erster Wert gilt für oben
    • zweiter für rechts
    • dritter für unten
    • vierter für links
Grüße
Bernhard
 
Also ich habe versucht, das vom Content auf den Footer zu übertragen, aber es klappt nicht...

Was klappt nicht? - Gestern hattest Du die Margin-Werte vom Footer auf den
Content übertragen, das hat zu der Verschiebung nach oben geführt (die der
Footer vermutlich braucht) und nach dem Entfernen des float die Zentrierung
bewirkt.

Wenn der Footer jetzt nicht da steht, wo er hinsoll, musst Du dem eventuell
wieder die -7.5em geben. - Die Anleitung habe ich Dir vorhin gegeben...

Grüße
Bernhard


P.S.: gerade eben gesehen: Dein Content hat vertical-align:left; - das gibt es
nicht, daher nochmal: räum Deinen Code auf und bemüh den Validator!
 
Also der Footer soll links und rechts den gleichen Abstand haben wie der Content...

Ich verstehe leider nicht ganz, wie der Abstand des Contents zu Stande kommt, bzw. wie der festgelegt ist...


Ich habe jetz mal einen kleinen Abstand genommen und der wird nur auf der linken Seite sichtbar, obwohl ich 2 Angaben geschrieben habe...


Zudem sollte der Content bis an den Footer heranreichen, da probe ich schon lange ohne Erfolg.
 
Zuletzt bearbeitet:
Zurück
Oben