php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 17-03-2008, 16:05
mgoertz
 Registrierter Benutzer
Links : Onlinestatus : mgoertz ist offline
Registriert seit: May 2003
Beiträge: 310
mgoertz ist zur Zeit noch ein unbeschriebenes Blatt
Standard Probleme mit <DIV>

Hallo zusammen,

ich hab ein Problem mit <Div> Elementen.
Im Prinzip hab ich auf meiner Seite einen Header und darunter einen Contentbereich.
In diesem Contentbereich sollen 3 Spalten sein:
-Spalte1 eine Grafik
-Spalte2 eine Menü
-Spalte3 der Content

Die ganze Seite soll eine bestimmte Breite nicht überschreiten und vertikal im Browser zentriert sein. Im Hintergrund der Seite soll eine Hintergrundgrafik sein.

Der Contentbereich soll immer so lang sein wie Spalte 3.

Im Internet Explorer 6 stimmt die Darstellung auch nur im Firefox absolut nicht. Im Anhang ein kleines Beispiel und die Style Datei
Zitat:
CSS:
#backgroundmain{
position: relative;
padding: 0px;
height: 100% !important;
width:100%;
margin: auto;
text-align: center;
background-color: white;
}

#header {
position: relative;
padding: 0px;
height: 179px; width: 950px;
margin: auto;
text-align: left;
margin-top: 5px;
background-color:#c0c0c0;
}

#main {
position: relative;
padding: 0px;
height: auto !important;
width: 950px;
margin: auto;
text-align: left;
background-color: red;
border-bottom: 10px solid #FFCC66;
}

#col1 {
float: left;
padding: 0px;
width: 60px;
height: auto;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
background-color: yellow;
}

#col3 {
float: left;
width: 670px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
height: auto;
padding-left: 10px;
padding-right: 10px;
background-color: green;
}

#col2 {
float: left;
width: 220px;
height: auto;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
background-color: blue;
}

HTML:
<body>
<div id="backgroundmain">
<div id="header">header</div>
<div id="main">main<br>

<div id="col1">col1<br><br><br><br><br></div>
<div id="col2">col2<br><br><br><br><br><br><br><br><br><br></div>
<div id="col3">col3<br><br><br><br><br><br><br></div>
</div>
</div>
</body>
Kann mir bitte jemand helfen dass es auch im Firefox stimmt ?
Danke

Geändert von mgoertz (17-03-2008 um 19:38 Uhr)
Mit Zitat antworten
  #2 (permalink)  
Alt 17-03-2008, 17:34
SusanneW
 Newbie
Links : Onlinestatus : SusanneW ist offline
Registriert seit: Mar 2008
Beiträge: 22
SusanneW ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hallo

Der IE hat da ein bug mit text-align: center; er richtet nicht nur den text aus sonder auch den div.
Also bei backgroundmain: wenn du da text-align: center; angibst,
wird das header- und der mein div zentriert.

Die einfachste Lösung, allerdings keine gute, pack die div's in eine Tabelle.
FF und andere Browser machen bei text-align: center;
auch das was es sagt, den TEXT zentrieren und nix anderes.

LG
Susanne

Geändert von SusanneW (17-03-2008 um 17:36 Uhr)
Mit Zitat antworten
  #3 (permalink)  
Alt 17-03-2008, 19:42
mgoertz
 Registrierter Benutzer
Links : Onlinestatus : mgoertz ist offline
Registriert seit: May 2003
Beiträge: 310
mgoertz ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hallo Susanne,

das mit der Zentrierung stimmt ja schon so wie es soll.
Leider packt der FF die Spalte 3 unter die Spalte 2 anstatt rechts daneben und der "main" Bereich verlängert sich im FF nicht richtig. Hat da jemand mir zufällig eine Lösung
Mit Zitat antworten
  #4 (permalink)  
Alt 17-03-2008, 19:51
Manko10
 Newbie
Links : Onlinestatus : Manko10 ist offline
Registriert seit: Mar 2008
Beiträge: 115
Manko10 ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Ich sehe da keinen Unterschied außer dem, dass im IE der rote Container länger ist.
Das liegt aber daran, dass der IE Boxen fälschlicherweise vergrößert, wenn der Inhalt zu groß ist. Der Firefox macht es richtig und lässt den Inhalt überlaufen.

Geändert von Manko10 (17-03-2008 um 19:54 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 17-03-2008, 20:10
mgoertz
 Registrierter Benutzer
Links : Onlinestatus : mgoertz ist offline
Registriert seit: May 2003
Beiträge: 310
mgoertz ist zur Zeit noch ein unbeschriebenes Blatt
Standard

ok vielen Dank du meinst dass es dann so passen müsste oder ?
Mit Zitat antworten
  #6 (permalink)  
Alt 17-03-2008, 20:16
Manko10
 Newbie
Links : Onlinestatus : Manko10 ist offline
Registriert seit: Mar 2008
Beiträge: 115
Manko10 ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Ich finde diese Seitenanordnung etwas... gewöhnungsbedürftig, aber ich schreibe einfach mal "ja".
Mit Zitat antworten
  #7 (permalink)  
Alt 17-03-2008, 20:31
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

@topicstarter

generell ist es recht problematisch mit position zu arbeiten. schau dir mal das tutorial an, da geht das auch ohne position. achte auch besonders auf das entsprechende clearen von elementen.

gruß
peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #8 (permalink)  
Alt 18-03-2008, 08:50
mgoertz
 Registrierter Benutzer
Links : Onlinestatus : mgoertz ist offline
Registriert seit: May 2003
Beiträge: 310
mgoertz ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Danke Kropff,

ich hab es mir angeschaut und nach deineem Tutorial ohne position umgebaut nochmals vielen Dank
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 03:32 Uhr.