2 CSS-Probleme

jeanorwin · 17.10.2010, 18:59

(Ich hab hier einen 2ten Thread eröffnet, da die Seite null mit der anderen in meinem vorhiergen zusammenhängt. Bitte nicht böse sein

)

Und zwar habe ich bei dieser Webseite 2 Probleme:

1. Wenn ich das Browser-Fenster verkleinere, verschieben sich plötzlich alle DIVs. Gibt's hierfür eine Lösung? So das ich anstattdessen in die Breite scrollen kann?

2. Im Internet Explorer 6 werden vor top_bottom_right und und bottom_top_right so Striche angezeigt. Gibt's dafür einen Fix? Oder ist das ein bekanntes Problem?

Hier noch der PHP Code

PHP-Code:

  <!-- Alle Rechte vorbehalten bei jeanorwin -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Ab hier kommt top -->
<div class="top">
<div id="top_top_left">top_top_left</div>
<div id="top_top_right">top_top_right</div>
<div id="top_bottom_left">top_bottom_left</div>
<div id="top_bottom_middle">top_bottom_middle</div>
<div id="top_bottom_right">top_bottom_right</div>
</div>
<!-- Ende von top -->
<!-- Anfang von main -->
<div class="main">
<div id="main_nav">main_nav</div>
<div id="main_content">main_content 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.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto</div>
<div id="main_right">main_right</div>
<div style="clear: both;"></div>
</div>

<!-- Ende von main -->
<!-- Anfang von bottom -->

<div class="bottom">
<div id="bottom_top_left">bottom_top_left</div>
<div id="bottom_top_middle">bottom_top_middle</div>
<div id="bottom_top_right">bottom_top_right</div>
<div id="bottom_bottom_left">bottom_bottom_left</div>
<div id="bottom_bottom_right">bottom_bottom_right</div>
</div>

</body>
</html>

CSS-Code:

PHP-Code:

  
/* Alle Rechte vorbehalten bei jeanorwin */
@charset "utf-8";

body {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    height: 1%;
    width: 100%;
    background-image: url("img/background.jpg") ; 
    background-repeat: repeat-y;

}

.top {
    }
#top_top_left {
    background-color: #CCD8FF;
    height: 175px;
    width: 225px;
    float: left;
}
#top_top_right {
    background-color: #B8C3E5;
    height: 175px;
    width: auto;
}
#top_bottom_left {
    background-image: url(img/top_bottom_left.jpg);
    background-repeat: repeat-x;
    height: 35px;
    width: 225px;
    float: left;
}
#top_bottom_middle {
    background-image: url(img/top_bottom_middle.jpg);
    background-repeat: repeat-x;
    height: 35px;
    width: 550px;
    float:left;
}
#top_bottom_right{
    background-image: url(img/top_bottom_right.jpg);
    background-repeat: repeat-x;
    height:35px;

}

.main {
    margin-top: 0px;
    background-image: url(img/faux_column.jpg);
}
#main_nav{
    background-color: #666C7F;
    height: auto;
    width: 225px;
    float: left;
    clear: left;
}
#main_content{
    background-color: #333640;
    height: auto;
    width: 550px;
    float: left;
}
#main_right{
    background-color: #666C7F;
    height: auto;
}
.bottom{
}
#bottom_top_left{
    background-image: url(img/bottom_top_left.jpg);
    background-repeat: repeat-x;
    height: 35px;
    width: 225px;
    float:left;
}
#bottom_top_middle{
    background-image: url(img/bottom_top_middle.jpg);
    background-repeat: repeat-x;
    height: 35px;
    width: 550px;
    float: left;
}
#bottom_top_right{
    background-image: url(img/bottom_top_right.jpg);
    background-repeat: repeat-x;
    height: 35px;
}
#bottom_bottom_left{
    background-color: #CCD8FF;
    height: auto;
    width: 225px;
    float:left;
}
#bottom_bottom_right{
    background-color: #B8C3E5;
    height: auto;
    width: auto;
}

P.S: Ich hab schon gegoogelt, scheint aber so als würde ich nicht nach den richtigen Suchwörtern suchen :S

Grüße
Jean

eagle275 · 17.10.2010, 19:49

für das erste Problem - definiere einen div drum herum - mit statischer Breite .. irgendwas wie width: 1200px; margin: auto; der dann automatisch mittig "schwimmt"

und zum IE6 , ja der macht bekanntermaßen Probleme - wenn du darfst. dann ignoriere ihn , jeder normaldenkende Privat.Anwender kommt mit einem moderneren Browser .. ansonsten müsstest du mal in entsprechenden Tutorials suche, wie man den IE6 übertölpelt .. Google mal nach Peter Kropff

jeanorwin · 17.10.2010, 20:21

Moin eagle,
Danke für den ersten Tipp! Die Webseite ist für ein kleines Unternehmen, ich schau gleich mal nach dem netten Herren.

EDIT:
Ich hab das ganze jetzt über einen Umweg gemacht. Und zwar habe ich eine Extra-Klasse erstellt, die jeweils entweder top_bottom(Umfasst top_bottom_left, top_bottom_middle, top_bottom_right) heißt, oder eben bottom_top. Diese habe ich dann mit dem selben Background wie top_bottom_right bzw bottom_top_right erstellt. Die Linie, die dabei herauskommt, kann man mit background-repeat:repeat-x "rauslöschen". Damit funktioniert das ganze sowohl im IE als auch FF.

jeanorwin · 18.10.2010, 17:27

So, nach dem auslagern des Menüs bzw. der rechten Spalte wird das Faux_Column nicht mehr richtig im IE6 dargestellt -.-'. Wenn jemand eine idee hat, dann bitte immer her damit :S Ich bin jetzt realtiv ratlos...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
$_SESSION Probleme	Thomasd82hb	PHP Tipps 2010	12	12.06.2010 01:34
Probleme mit Word	Lollix	Off-Topic Diskussionen	2	26.03.2010 11:52
CHarset und Probleme mit IE	KeKs0r	HTML, Usability und Barrierefreiheit	10	26.01.2010 21:59
[Erledigt] fopen() Probleme	jN^	PHP Tipps 2009	2	18.08.2009 12:31
[Erledigt] Firefox / IE - Probleme		HTML, Usability und Barrierefreiheit	5	20.07.2009 17:04
Win+Firefox alles ok, IE oder Linux: Probleme	vollderdude	PHP Tipps 2009	6	02.01.2009 16:17
[Erledigt] Probleme mit iFrame	rocco	HTML, Usability und Barrierefreiheit	1	28.12.2008 17:44
Probleme bei Speicherung von serialize() Strings	Manni2k	PHP Tipps 2006	13	15.10.2006 15:06
Probleme mit Rechteverteilung chmod() per script!!!???	Funky_	PHP Tipps 2006	7	17.06.2006 17:10
Probleme beim Datenupload zu meiner Datenbank		Datenbanken	3	05.09.2005 19:47
Probleme mit Sonderzeichen...		Datenbanken	1	02.08.2005 23:37
Zwei Rechner ins Netz - Router - Hub - Probleme...	imported_Ben	Off-Topic Diskussionen	37	13.01.2005 21:36
[Erledigt] Technische Probleme mit Sessions		PHP-Fortgeschrittene	4	18.11.2004 14:45
[Erledigt] Probleme mit Fremdsprachen		HTML, Usability und Barrierefreiheit	2	21.09.2004 17:11
PHP Bilder in DB / Probleme bei Änderung		PHP-Fortgeschrittene	1	05.06.2004 11:20

17.10.2010, 18:59
jeanorwin Neuer Benutzer Registriert seit: 11.06.2010 Beiträge: 17 PHP-Kenntnisse: Anfänger	2 CSS-Probleme (Ich hab hier einen 2ten Thread eröffnet, da die Seite null mit der anderen in meinem vorhiergen zusammenhängt. Bitte nicht böse sein ) Und zwar habe ich bei dieser Webseite 2 Probleme: 1. Wenn ich das Browser-Fenster verkleinere, verschieben sich plötzlich alle DIVs. Gibt's hierfür eine Lösung? So das ich anstattdessen in die Breite scrollen kann? 2. Im Internet Explorer 6 werden vor top_bottom_right und und bottom_top_right so Striche angezeigt. Gibt's dafür einen Fix? Oder ist das ein bekanntes Problem? Hier noch der PHP Code PHP-Code: <!-- Alle Rechte vorbehalten bei jeanorwin --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="layout.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- Ab hier kommt top --> <div class="top"> <div id="top_top_left">top_top_left</div> <div id="top_top_right">top_top_right</div> <div id="top_bottom_left">top_bottom_left</div> <div id="top_bottom_middle">top_bottom_middle</div> <div id="top_bottom_right">top_bottom_right</div> </div> <!-- Ende von top --> <!-- Anfang von main --> <div class="main"> <div id="main_nav">main_nav</div> <div id="main_content">main_content 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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto</div> <div id="main_right">main_right</div> <div style="clear: both;"></div> </div> <!-- Ende von main --> <!-- Anfang von bottom --> <div class="bottom"> <div id="bottom_top_left">bottom_top_left</div> <div id="bottom_top_middle">bottom_top_middle</div> <div id="bottom_top_right">bottom_top_right</div> <div id="bottom_bottom_left">bottom_bottom_left</div> <div id="bottom_bottom_right">bottom_bottom_right</div> </div> </body> </html> CSS-Code: PHP-Code: /* Alle Rechte vorbehalten bei jeanorwin / @charset "utf-8"; body { margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; height: 1%; width: 100%; background-image: url("img/background.jpg") ; background-repeat: repeat-y; } .top { } #top_top_left { background-color: #CCD8FF; height: 175px; width: 225px; float: left; } #top_top_right { background-color: #B8C3E5; height: 175px; width: auto; } #top_bottom_left { background-image: url(img/top_bottom_left.jpg); background-repeat: repeat-x; height: 35px; width: 225px; float: left; } #top_bottom_middle { background-image: url(img/top_bottom_middle.jpg); background-repeat: repeat-x; height: 35px; width: 550px; float:left; } #top_bottom_right{ background-image: url(img/top_bottom_right.jpg); background-repeat: repeat-x; height:35px; } .main { margin-top: 0px; background-image: url(img/faux_column.jpg); } #main_nav{ background-color: #666C7F; height: auto; width: 225px; float: left; clear: left; } #main_content{ background-color: #333640; height: auto; width: 550px; float: left; } #main_right{ background-color: #666C7F; height: auto; } .bottom{ } #bottom_top_left{ background-image: url(img/bottom_top_left.jpg); background-repeat: repeat-x; height: 35px; width: 225px; float:left; } #bottom_top_middle{ background-image: url(img/bottom_top_middle.jpg); background-repeat: repeat-x; height: 35px; width: 550px; float: left; } #bottom_top_right{ background-image: url(img/bottom_top_right.jpg); background-repeat: repeat-x; height: 35px; } #bottom_bottom_left{ background-color: #CCD8FF; height: auto; width: 225px; float:left; } #bottom_bottom_right{ background-color: #B8C3E5; height: auto; width: auto; } P.S: Ich hab schon gegoogelt, scheint aber so als würde ich nicht nach den richtigen Suchwörtern suchen :S Grüße Jean Geändert von jeanorwin (17.10.2010 um 21:17 Uhr).*


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

17.10.2010, 19:49
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	für das erste Problem - definiere einen div drum herum - mit statischer Breite .. irgendwas wie width: 1200px; margin: auto; der dann automatisch mittig "schwimmt" und zum IE6 , ja der macht bekanntermaßen Probleme - wenn du darfst. dann ignoriere ihn , jeder normaldenkende Privat.Anwender kommt mit einem moderneren Browser .. ansonsten müsstest du mal in entsprechenden Tutorials suche, wie man den IE6 übertölpelt .. Google mal nach Peter Kropff

17.10.2010, 20:21
jeanorwin Neuer Benutzer Registriert seit: 11.06.2010 Beiträge: 17 PHP-Kenntnisse: Anfänger	Moin eagle, Danke für den ersten Tipp! Die Webseite ist für ein kleines Unternehmen, ich schau gleich mal nach dem netten Herren. EDIT: Ich hab das ganze jetzt über einen Umweg gemacht. Und zwar habe ich eine Extra-Klasse erstellt, die jeweils entweder top_bottom(Umfasst top_bottom_left, top_bottom_middle, top_bottom_right) heißt, oder eben bottom_top. Diese habe ich dann mit dem selben Background wie top_bottom_right bzw bottom_top_right erstellt. Die Linie, die dabei herauskommt, kann man mit background-repeat:repeat-x "rauslöschen". Damit funktioniert das ganze sowohl im IE als auch FF. Geändert von jeanorwin (17.10.2010 um 21:16 Uhr).

18.10.2010, 17:27
jeanorwin Neuer Benutzer Registriert seit: 11.06.2010 Beiträge: 17 PHP-Kenntnisse: Anfänger	So, nach dem auslagern des Menüs bzw. der rechten Spalte wird das Faux_Column nicht mehr richtig im IE6 dargestellt -.-'. Wenn jemand eine idee hat, dann bitte immer her damit :S Ich bin jetzt realtiv ratlos...