Navi und Content bündig abschließen...

p4n!kK · 15 März 2009

Hallo,

habe eine Homepage gemacht, bekomme es aber einfach nicht hin, dass links die Navi und der Content-Bereich unten bündig am Footer abschließen und zwar auch wenn mal mehr oder weniger Inhalt im Content ist..

Homepage: Motorsportclub Sachsenhausen e.V.

CSS Code:

PHP:

body
{
background-color: #F5F5F5;
background-image: url(bg.jpg);
font-family: Arial;
font-size: 100.01%;
width: 1000px;
height: 100%;
margin: auto;
padding: 0;
}
h3
{
color: #000000;
text-align: center;
}

h4
{
color: #00008B;
text-align: center;
}
#header
{ 
height: 149px;
width: 968px;
border: 1px solid #000000;
background: #FFFFFF url(header.jpg) no-repeat center;
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
}
#navi
{
height: 278px;
width: 180px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
background: #FFFFFF;
margin-left: 15px;
float:left;
display: inline;
}
#content
{
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
margin-right: 15px;
margin-left: 196px;
background: #FFFFFF;
padding: 15px;
font-size: 12px;
text-align: justify;
}
#footer
{ 
height: 20px;
width: 968px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #FFFFFF;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
}

Ich hoffe, ihr könnt mir helfen,

Lg Robin R. ;)

threadi · 15 März 2009

Such mal nach Faux Coloumns - ist eine Methode um mit CSS gleichlange Spalten zu erreichen.

p4n!kK · 15 März 2009

Ok, habe mal ein bisschen ge'googelt und rumprobiert...

Glaube bin auf dem richtigen Weg, aber irgendwie will es noch nicht so ganz passen...

Sieht im Moment so aus: Motorsportclub Sachsenhausen e.V.

CSS:

PHP:

body
{
background-color: #F5F5F5;
background-image: url(bg.jpg);
font-family: Arial;
font-size: 100.01%;
width: 1000px;
height: 100%;
margin: auto;
padding: 0;
}
h3
{
color: #000000;
text-align: center;
}

h4
{
color: #00008B;
text-align: center;
}
#header
{ 
height: 149px;
width: 968px;
border: 1px solid #000000;
background: #FFFFFF url(header.jpg) no-repeat center;
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
}
#wrapper {
background: url(bild.jpg) repeat-y left;
}

#navi
{
height: 278px;
width: 180px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
background: #FFFFFF;
margin-left: 15px;
float:left;
display: inline;
}
#content
{
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
margin-right: 15px;
margin-left: 196px;
background: #FFFFFF;
padding: 15px;
font-size: 12px;
text-align: justify;
}
#footer
{ 
height: 20px;
width: 968px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #FFFFFF;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
}

Was hab ich falsch gemacht bzw. vergessen?! :(

Lg

threadi · 15 März 2009

Du solltest Die Breite der Webseite mal neu ausmessen. Auch wäre es gut, wenn Du dir im Firefox die Erweiterung Firebug installierst - damit siehst Du sofort wie groß welches div ist ;-)

ingoS · 15 März 2009

Der body ist 1000px breit, die Seite soll aber anscheinend nur 968px plus links und rechts je 1px Rahmen breit sein. Der wrapper hat keine Breitenangabe, ist also so breit wie der body.
Lösungen:
1.: body-Breite verringern.
2.: wrapper richtige Breite geben.

EDIT: Grmpf -- zu langsam.^^

p4n!kK · 15 März 2009

Ok hab jetz allem eine Brteite von 950px gegeben...

Doch jetz passt iwie gar nix mehr

alles hat sich verzogen...

CSS:

PHP:

body
{
background-color: #F5F5F5;
background-image: url(bg.jpg);
font-family: Arial;
font-size: 100.01%;
width: 950px;
height: 100%;
margin: auto;
padding: 0;
}
h3
{
color: #000000;
text-align: center;
}

h4
{
color: #00008B;
text-align: center;
}
#header
{ 
height: 149px;
width: 950px;
border: 1px solid #000000;
background: #FFFFFF url(header.jpg) no-repeat center;
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
}
#wrapper {
width: 180px;
background: url(bild.jpg) repeat-y left;
}

#navi
{
height: 278px;
width: 180px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
background: #FFFFFF;
margin-left: 15px;
float:left;
display: inline;
}
#content
{
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
margin-right: 15px;
margin-left: 196px;
background: #FFFFFF;
padding: 15px;
font-size: 12px;
text-align: justify;
}
#footer
{ 
height: 20px;
width: 950px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #FFFFFF;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
}

threadi · 15 März 2009

Falsch. Du hast #wrapper eine Breite von 180px gegeben. Schau dir deine Breiten und Abstände mal genau an und rechne aus was du brauchst. Oben stand auch 968 und nicht 950px. ;ugl

p4n!kK · 15 März 2009

Ja, ich habe ja jetzt auch eine neue Breite von 950px definiert!

Aber wie rechne ich mir denn aus, was ich brauche?
Muss der wrapper so breit wie das gesamte layout sein oder wie..?!
Habe das noch nicht so genau verstanden...

Naja habe jetzt dem wrapper ebenfalls eine Breite von 950px gegeben

CSS:

PHP:

body
{
background-color: #F5F5F5;
background-image: url(bg.jpg);
font-family: Arial;
font-size: 100.01%;
width: 950px;
height: 100%;
margin: auto;
padding: 0;
}
h3
{
color: #000000;
text-align: center;
}
 
h4
{
color: #00008B;
text-align: center;
}
#header
{ 
height: 149px;
width: 950px;
border: 1px solid #000000;
background: #FFFFFF url(header.jpg) no-repeat center;
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
}
#wrapper {
width: 950px;
background: url(bild.jpg) repeat-y left;
}
 
#navi
{
height: 278px;
width: 180px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
background: #FFFFFF;
margin-left: 15px;
float:left;
display: inline;
}
#content
{
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
margin-right: 15px;
margin-left: 196px;
background: #FFFFFF;
padding: 15px;
font-size: 12px;
text-align: justify;
}
#footer
{ 
height: 20px;
width: 950px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #FFFFFF;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
}

ingoS · 15 März 2009

Code:

#content
{
[...]
margin-left: 196px;
margin-right: 15px;
[...]
}

Damit schiebst du den Wrapper weiter vom Content weg als notwendig.
Die Navi ist doch nur 180px breit, wie kommt da jetzt ein Abstand von 196px zustande? Und das margin-right habe ich, ehrlich gesagt, gar nicht verstanden. :shock:

EDIT: Dein gesamtes Layout ist übrigens 952px breit, weil du ja links und rechts jeweils 1px breite Rahmen hast. Somit müssen auch body und wrapper 952px breit sein. Wenn du allerdings so arbeitest, dann muss auch die Faux-Column-Hintergrundgrafik diesen Rahmen, also einen schwarzen Punkt ganz links, enthalten.

p4n!kK · 15 März 2009

Ok hast recht, habe das margin-right entfernt und das margin left auf 180px gesetzt!

CSS:

PHP:

body
{
background-color: #F5F5F5;
background-image: url(bg.jpg);
font-family: Arial;
font-size: 100.01%;
width: 950px;
height: 100%;
margin: auto;
padding: 0;
}
h3
{
color: #000000;
text-align: center;
}

h4
{
color: #00008B;
text-align: center;
}
#header
{ 
height: 149px;
width: 950px;
border: 1px solid #000000;
background: #FFFFFF url(header.jpg) no-repeat center;
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
}
#wrapper {
width: 950px;
background: url(bild.jpg) repeat-y left;
}

#navi
{
height: 278px;
width: 180px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
background: #FFFFFF;
float:left;
display: inline;
}
#content
{
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
margin-left: 180px;
background: #FFFFFF;
padding: 15px;
font-size: 12px;
text-align: justify;
}
#footer
{ 
height: 20px;
width: 950px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #FFFFFF;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
}

Passt aber immernoch nicht...ich stell mich aber auch blöd an

ingoS · 15 März 2009

Guck mal, ob es was bringt, wenn du die Seite valide machst. Momentan hast du 17 Fehler drin, weil du XHTML-Markup (<img.../> statt <img...>, <br /> statt <br>) verwendest. Das wäre zwar eher ungewöhnlich, aber wer weiß...

EDIT: Lies mal das EDIT in meinem letzten Beitrag. :roll:

p4n!kK · 16 März 2009

Also:

- Page ist jetzt Valide
- Body und wrapper sind jetz 952px breit
- Faux-Column-Hintergrundgrafik hat nun einen schwarzen Punkt ganz links

CSS:

PHP:

body
{
background-color: #F5F5F5;
background-image: url(bg.jpg);
font-family: Arial;
font-size: 100.01%;
width: 952px;
height: 100%;
margin: auto;
padding: 0;
}
h3
{
color: #000000;
text-align: center;
}
h4
{
color: #00008B;
text-align: center;
}
#header
{ 
height: 149px;
width: 950px;
border: 1px solid #000000;
background: #FFFFFF url(header.jpg) no-repeat center;
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
}
#wrapper {
width: 952px;
background: url(bild.jpg) repeat-y left;
}
#navi
{
height: 278px;
width: 180px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
background: #FFFFFF;
float:left;
display: inline;
}
#content
{
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
margin-left: 180px;
background: #FFFFFF;
padding: 15px;
font-size: 12px;
text-align: justify;
}
#footer
{ 
height: 20px;
width: 950px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #FFFFFF;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
}

ingoS · 16 März 2009

#header und #footer haben auch beide diese Abstände:

Code:

margin-left: 15px;
margin-right: 15px;

Entweder überall (also auch beim #wrapper) oder gar nicht. ;)

p4n!kK · 16 März 2009

Jo habe es jetz alles schön angepasst!

Glaube, dass es jetzt eig. soweit in Ordnung ist, außer Ihr findet noch irgendwelche Fehler oder so...

Naja erstmal danke für alle Antworten und Hilfen!

Lg

ingoS · 16 März 2009

Die Faux-Columns-Hintergrundgrafik muss noch um einen weißen Pixel breiter sein, weil sie ja den linken 1px-Rahmen beinhaltet.

Efchen · 17 März 2009

p4n!kK schrieb:
Glaube, dass es jetzt eig. soweit in Ordnung ist, außer Ihr findet noch irgendwelche Fehler oder so...

Ja, lerne HTML. Deine Semantik ist quasi nicht vorhanden, Du kochst nur div-Suppe. Das ist (im Sinne von HTML) genauso schlecht, wie Tabellenlayout.
Mir ist auch aufgefallen, dass Du nur eine Überschrift 4. Ordnung hast, aber keine 1., 2. oder 3. Ordnung. Das ist nicht logisch.

p4n!kK · 17 März 2009

Ich bin ja noch am Anfang mit allem!

Aber danke für alle hilfreichen Antworten und Tipps.

Efchen · 18 März 2009

p4n!kK schrieb:
Ich bin ja noch am Anfang mit allem!

Es gibt viel zu tun. Packe es an!

Ist nicht bös gemeint, aber Du solltest Dein HTML perfektionieren, bevor Du CSS machst. Solange Dein HTML immer noch verändert wird, musst Du auch am CSS ständig rumdoktorn. Du hast dann also doppelte Arbeit.

Aber Du schaffst das schon :-)

Viel Erfolg,
-Efchen

Navi und Content bündig abschließen...

p4n!kK

Neues Mitglied

threadi

Moderator

p4n!kK

Neues Mitglied

threadi

Moderator

ingoS

Aktives Mitglied

p4n!kK

Neues Mitglied

threadi

Moderator

p4n!kK

Neues Mitglied

ingoS

Aktives Mitglied

p4n!kK

Neues Mitglied

ingoS

Aktives Mitglied

p4n!kK

Neues Mitglied

ingoS

Aktives Mitglied

p4n!kK

Neues Mitglied

ingoS

Aktives Mitglied

Efchen

Guest

p4n!kK

Neues Mitglied

Efchen

Guest

Neueste Beiträge