Layout verschoben

html.de-Forum HTML, XHTML & CSS
1

Hallo ihr lieben,

ich weiß nicht genau ob mein Problem an CSS oder HTML liegt, aber wenn ihr mal auf meine Webseite music-diary.de.vu schaut seht ihr, dass der Banner im gegensatz zu den unteren beiden divs verschoben ist…

ich weiß echt nicht mehr was ich noch machen soll bin aber auch noch relativ unerfahren mit CSS und HTMl, hab früher alles mit Dreamweaver Hilfe gemacht und jetzt dsa erste mal selbst runterprogrammiert… ich poste euch mal meinen Code und hoffe, ihr könnt mir helfen… vllt habt ihr auch Verbesserungsvorschläge :wink:

HTML Datei:

[CODE]

Music Diary

Willkommen

auf meinem kleinem Musik-Diary. Hier werde ich regelmäßig über Musik schreiben, aktuelle CDs vorstellen und von Konzerten berichten, die ich besucht habe. Viel Spaß!

Navigation

About

Diese Webseite wurde zu privaten Zwecken erstellt und ich verdiene kein Geld damit. Wer mich kontaktieren möchte, kann dies per Mail sehr gerne tun.

<iframe id="hauptfenster" src="http://julia1985.lima-city.de/cutenews/show_news.php" width="760" height="500" name="hauptfenster" noresize="noresize" frameborder="0" border="0"
[/CODE]CSS-Datei: [CODE]body { background-color: #d6d6d6; font: 10pt Verdana, Arial; text-align: justify; }

#rezensionen {width: 700px; background-color: #c4c3c3 ; border: 1px solid #9d9c9c; font: 10pt Verdana, Arial; padding: 3px 5px; text-align: justify;}

h3 {border-bottom: 1px solid #9d9c9c; color: #5a0d0d; font-size: 11pt;}
h2 {border-bottom: 1px solid #9d9c9c; color: #5a0d0d; font-size: 10pt;}

#Banner { width: 1000px; height: 250px; background-image: url(header_png.png); border: 1px solid #9d9c9c; margin: 5px 0px; }

#Leiste { width: 200px; height: 500px; background-color: #d6d6d6; font: 10pt Verdana, Arial; float: left; border: 1px solid #9d9c9c; padding: 8px; margin: 0px 5px 0px 0px; text-align: justify; }

#IFrame { width: 755px; height: 500px; background-color: #d6d6d6; font: 10pt Verdana, Arial; border: 1px solid #9d9c9c; padding: 8px; margin: 0px 5px 0px 0px;

}

#Tabelle { width: 1000px; border: 0; cellpadding: 0; cellspacing: 0; margin: 0; padding: 0; }

#ratings {border: 0px; }

#blog {border: 1px solid #9d9c9c; }

#cdcover {border: 1px solid #9d9c9c; float: left; margin: 5px; }

#Liste {list-style-type: square; padding: 0 15px; }

#fotos_berichte {border: 1px solid #9d9c9c; float: left; margin: 0px 5px 0px 0px; }

#counter {font: 9pt Verdana, Arial; }

a:link {color: #502222; text-decoration: underline; }

a:visited {color: #502222 ;text-decoration: underline; }

a:focus {color: #502222; text-decoration: underline; }

a:hover {color: #502222; text-decoration: blink; text-decoration: underline; }

a:active {color: #502222; text-decoration: underline; }
[/CODE]

2

#Banner { width: 1000px; height: 250px; background-image: url(header_png.png); border: 1px solid #9d9c9c; margin: 5px 0px; }
Ich würde mal sagen, dass das margin:5px daran liegt.

mfg Furien

3

hm du hast recht, ich hab das mal geändert, jetzt sieht es so aus:

Music - Diary

hab aber noch 2 Fragen :wink:

  1. durch diese Änderung ist jetzt auch der Abstand zwicshen den beiden divs Leiste und Iframe kleiner, den fand ich etwas größer aber schöner… wie mach ich das am besten?
  2. Ich krieg es irgendwie nicht hin meine scrollbars zu verändern… den Code dafür kenne ich, aber wo muss ich den im CSS denn einfügen?

danke schonmal =)

4
  1. Ich krieg es irgendwie nicht hin meine scrollbars zu verändern… den Code dafür kenne ich, aber wo muss ich den im CSS denn einfügen?
    Den musst du eigentlich irgendwo einfügen :slight_smile:

EDIT: Hab mich nochmal schlau gemacht.
Die Scrollbarangabane müssen ins body-tag!

5

hm so hatte ichs aber schonmal probiert und es hatte nichts geändert… komisch…

Wie ist mein Code denn insgesamt eigentlich? Also ich meine, merkt man dsas ich nicht so viel Erfahrung hab oder ist der relativ gut oder schlecht? :wink:

6

Das könnte an dienem Browser liegen.
Ich glaube so etwas macht der Firefox nicht mit.
Und ich finde deinen Code ganz gut, nur solltest du Einrücken.

7

du meinst jetzt dass Firefox keine Scrollbars ändert? Okay, dann schau ich gleich mal in anderen browsern…
Wegen des Codes, danke :wink: Ja einrücken müsste ich, hab das nur ohne jeglichen Editor in Notepad geschrieben, da war das nicht so leicht :-p

edit: omg, ach du sch… im Internet Explorer sieht das ja total bescheiden aus :frowning: Die Scrollbars gehen da, muss ich noch anpassen, aber die divs sind da auch total komisch verschoben und zu klein etc…

8

Ähm ^^

body { 
background-color: #d6d6d6; 
font: 10pt Verdana, Arial; 
text-align: justify;
}

Da steht doch auch gar nichts von Scrollbars…
Und übrigens sind nic.de.vu Domains schlecht.
Da gehst du nämlich drauf und deine Seite wird per Iframe eingebunden…

9

nee habs ja inzwischen aktualisiert aber hier noch nicht verändert :wink:
Aber die Verschiebung im IE macht mir Angst…

10

Ich meinte ja auch auf der Homepage.
Und die Scrollbars sieht man nun.
Und die Verschiebung ist ja nun wirklich nicht so schlimm.

Und daran sieht man auch wieder, warum die meisten Seiten für FF gemacht werden :wink:

11

also im IE siehts bei mir so aus:

http://s7.directupload.net/images/100720/9wf8ookt.png

klar, ist jetzt nicht schlimm, aber es überschreitet mein Verständnis… :smiley:

12

Tabellen benutzt man nicht um ein Layout einzubinden. Dafür nimmt man divs und CSS. Außerdem gibst du keinen Doctype an und nichts, da solltest du dringent nochmal umbauen.

Und daran sieht man auch wieder, warum die meisten Seiten für FF gemacht werden :wink:
Nein, die meisten beschränken sich nicht nur auf einen Browser sondern wollen erreichen dass ein Layout möglichst überall gleich aussieht.

Veränderte Scrollbars gehen nur für den IE und zeugen meiner bescheidenen Meinung nach von Unerfahren- und Unwissenheit der Autoren, ergo: weglassen.

13

danke für die Antwort.
Doctype seh ich ein, das bau ich später ein.
Wegen der Tabelle, ich wusste mir irgendwie nicht anders zu helfen… letztendlich hab ich ja divs und css benutzt, aber halt innerhalb der Tabelle weil ich sonst nicht wuste, wie ich den Aufbau so hinbekomme, dass die unteren 2 Divs nebeneinander sind… kannst du mir einen Tipp geben?

14

float ist das Stichwort

15

hmmm… dann muss ich mir das wohl nochmal genauer anschauen…

16

soo…
Doctype fehlt immer noch, das wird nachgeholt. Ich hab jetzt allerdings mal versucht, das Layout mit float statt Tabelle zu machen. Dann siehts bei mir so aus:
Music Diary (im Firefox)… im Internetexplorer allerdings ist das ganze verschoben, bzw. der Iframe ist zu klein…

Da stellt sich mir die Frage: warum :smiley:
Zumal ich eh etwas nicht verstehe. Mein Header ist 1000 px, die Divs 205 und 756, plus 5 px Padding macht 956… d.h. es wäre eigentlich völlig logisch, dass das ganze 44 Pixel zu klein ist… Im Firefox allerdings steht bei mir jetzt alles perfekt so untereinander, wie ich es möchte, sobald ich die Pixelzahlen ändere, ist einer der beiden divs zu groß… kann mir da jemand helfen? Hier nochmal die Codes…

index.html

[CODE]

Music Diary

Willkommen

auf meinem kleinem Musik-Diary. Hier werde ich regelmäßig über Musik schreiben, aktuelle CDs vorstellen und von Konzerten berichten, die ich besucht habe. Viel Spaß!

Navigation

About

Diese Webseite wurde zu privaten Zwecken erstellt und ich verdiene kein Geld damit. Wer mich kontaktieren möchte, kann dies per Mail sehr gerne tun.

<iframe id="hauptfenster" src="http://julia1985.lima-city.de/cutenews/show_news.php" width="757" height="500" name="hauptfenster" noresize="noresize" frameborder="0" border="0"
[/CODE]

style.css

body { 
background-color: #d6d6d6; 
font: 10pt Verdana, Arial; 
text-align: justify;
  scrollbar-base-color:#d6d6d6c;
  scrollbar-arrow-color:#FFFFFF;
  scrollbar-darkshadow-color:#d6d6d6;
  scrollbar-face-color:#d6d6d6;
  scrollbar-highlight-color:#d6d6d6;
}

#rezensionen {
width: 700px; 
background-color: #c4c3c3 ; 
border: 1px solid #9d9c9c; 
font: 10pt Verdana, Arial; 
padding: 3px 5px; 
text-align: justify;
}

h3 {
border-bottom: 1px solid #9d9c9c; 
color: #5a0d0d; 
font-size: 11pt;
}

h2 {
border-bottom: 1px solid #9d9c9c;  
color: #5a0d0d; 
font-size: 10pt;
}

#Banner { 
width: 1000px; 
height: 250px; 
background-image: url(header_png.png); 
border: 1px solid #9d9c9c; 
margin: 5px 0px; 
}

#Leiste { 
width: 205px; 
height: 500px; 
background-color: #d6d6d6; 
font: 10pt Verdana, Arial;  
border: 1px solid #9d9c9c; 
padding: 8px; margin: 0px 0px 5px 0px;  
text-align: justify;  
float: left;
 }

#IFrame { 
width: 756px; 
height: 500px; 
background-color: #d6d6d6; 
font: 10pt Verdana, Arial; 
border: 1px solid #9d9c9c; 
padding: 8px; 
margin: 0px 0px 0px 5px;
float: left;
}


#ratings {border: 0px;  }

#blog {border: 1px solid #9d9c9c; }

#cdcover {border: 1px solid #9d9c9c; float: left; margin: 5px; }

#Liste {list-style-type: square; padding: 0 15px; }

#fotos_berichte {border: 1px solid #9d9c9c; float: left; margin: 0px 5px 0px 0px; }

#counter {font: 9pt Verdana, Arial; }

a:link {color: #502222; text-decoration: underline; }

a:visited {color: #502222 ;text-decoration: underline; }

a:focus {color: #502222; text-decoration: underline; }

a:hover {color: #502222; text-decoration: blink; text-decoration: underline; }

a:active {color: #502222; text-decoration: underline; }

Ach und noch eine Frage, jetzt wo die Tabelle nicht mehr hab weiß ich nicht wie ich das ganze noch zentrieren kann??

17

Zentrieren geht mit

margin: 0 auto;mfg furien

Übrigens ist ein Doctype extrem wichtig für die richtige Darstellung,
da die Browser sonst in den Quirksmodus gehen und daher
die verschiedenen Darstellungen im IE und FF…

18

okay d.h. du denkst es kann sein dass wenn ich den Doctype drin hab dass es dann in beiden Browsern geht?
Kenn mich damit noch sehr wenig aus…

edit: ui, das geht tatsächlich… allerdings klappt margin auto bei mir nicht… :wink: Aber danke für die Hilfe =) =)