zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Positionierung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.07.2011, 12:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.07.2011
Ort: Kümmersbruck
Beiträge: 5
YinYang befindet sich auf einem aufstrebenden Ast
Ausrufezeichen Positionierung

Hallo zusammen.

Ich hab ein Problem mit der Positionierung von Elementen.
Aber kurz zu mir, da ich mich noch nicht vorgestellt habe.

Mein Name ist Jakob, bin 20 Jahre alt und komme aus der schönen Gemeinde Kümmersbruck, nahe der Stadt Amberg in der Oberpfalz.

Nun zu meinem Problem.
Ich möchte mir eine kleine Homepage zusammenbauen, was auch sonst. Natürlich habe ich mir erst überlegt wie diese aussehen soll und demenstprechend auch eine skizze gemacht und alle div container markiert.

Diese DIV-Container habe ich nun auch allesamt mit "float" positioniert. Sieht genau so aus wie ich es haben möchte.

ABER LEIDER NUR IM IE!!!! In Firefox und Google Chrome etc. leider gar nicht.


Hier der Link zu meiner Homepage:
YinYangDesign - Der richtige Weg zur Lösung

/* Bitte selbst im IE und anderen Browsern ansehen */

Aber meines Wissens ist der Floatbefehl doch KEIN IE-spezifischer TAG, oder liege ich hier falsch?

Bitte um schnellst mögliche Antworten und Hilfestellungen!

Besten Dank im Voraus!

Viele Grüße
Jakob
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.07.2011, 12:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.07.2011
Ort: Kümmersbruck
Beiträge: 5
YinYang befindet sich auf einem aufstrebenden Ast
Ausrufezeichen Positionierung

HTML-Code:
body
{
        background-color: #808080;    
}

#whitebox
{
    width:  900px;
    height: 700px;
    text-align: center;
    margin: auto;
    background-color: white;
}

#content
{
    width: 600px;
    height: 400px;
    text-align: left;
    float: left;
    margin-top: 30px;
    margin-left: 20px;
    background-color: black;
}

#galerie
{
    width: 150px;
    height: 400px;
    text-align: left;
    float: right;
    margin-top: 30px;
    margin-right: 20px;
    background-color: #00FFFF;
}

#navigation
{
    width: 860px;
    height: 150px;
    text-align: left;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    background-color: #00FF00; 
}

#foot
{
    width: 860px;
    height: 50px;
    text-align: center;
    margin-top: 20px;
    margin-right: 20px;
    margin-lefT: 20px;
    background-color: red;
}
Hier mal noch meine CSS-Datei.

Zu meiner Page:
-Schwarz ist der Content
-Hellblau ist die Galerie
-Grün ist die Navigation
-Rot ist der Foot

Der Content soll vorerst per Hand aktuell gehalten werden, später aber mit PHP gefüllt werden.
Die Galerie ebenso.
Die Navi wird mit JS umgesetzt - (ich bin ein fan von JS daher für mich ein muss, sollte jemand einen gravierenden Mängel feststellen, mir bitte mitteilen).
Naja im Foot soll lediglich meine EMAIL Adresse noch stehen als Kontaktmöglichkeit.

Viele Grüße
Jakob
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.07.2011, 12:48
body.ie {display: grotte}
XHTMLforum-Mitglied
 
Registriert seit: 09.01.2011
Beiträge: 841
take_a_7 sorgt für eine eindrucksvolle Atmosphäretake_a_7 sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von YinYang Beitrag anzeigen
Diese DIV-Container habe ich nun auch allesamt mit "float" positioniert. Sieht genau so aus wie ich es haben möchte.

ABER LEIDER NUR IM IE!!!! In Firefox und Google Chrome etc. leider gar nicht.
Kann ich nicht nachvollziehen. IE 8, Firefox 5 und Google Chrome zeigen die Seite gleich an.

Ich glaube du solltest dir mal die Grundlagen von Spaltenlayout aneignen.

EDIT: huppsa, da arbeitet wohl noch mit IE 7? Wohlgemerkt: Der IE < 8 kann mit floats und vielem anderen nicht so umgehen, wie moderne Browser und stellt vieles falsch dar. Nimm zum Entwickeln lieber einen Browser der was kann (IE 9, Firefox, Google Chrome, Opera). So wie die Seite im IE 7 aussieht, brauchst du ein einziges floatendes Element. Lies also lieber das ganze Little Boxes.

gruß,
take

Geändert von take_a_7 (21.07.2011 um 12:53 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 21.07.2011, 13:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.07.2011
Ort: Kümmersbruck
Beiträge: 5
YinYang befindet sich auf einem aufstrebenden Ast
Ausrufezeichen

okay, den Link werd ich mir durchlesen.

Aber wo ist jetzt mein Fehler?
Da bin ich leider noch nicht weiter?

Oder wolltest du mir mit deiner Antwort sagen, dass mein komplettes vorgehen, bzw. Gerüst fehlerhaft ist?


Grüße
Jakob
Mit Zitat antworten
  #5 (permalink)  
Alt 21.07.2011, 19:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.07.2011
Ort: Kümmersbruck
Beiträge: 5
YinYang befindet sich auf einem aufstrebenden Ast
Ausrufezeichen Text-ausrichtung

Also, das Problem habe ich gelöst mit dem ausrichten der DIV-BOXEN habe ich gelöst.

YinYangDesign - Der richtige Weg zur Lösung

Allerdings tut sich nun gleich ein weiteres auf.

Mein TEST-TEXT wird in der grünen box nicht linksbündig gesetzt! ABER WARUM?

Ebenso wird der TEST-TEXT ín der dunkelgrünen box nicht zentriert angezeigt?! WARUM?

Code-CSS-Datei
HTML-Code:
body
{
    background-color: #808080;
    font-family: Arial, sans-serif;
}

#wrapper
{
    width: 900px;
    height: 710px;
    position: relative;
    margin: auto;
    margin-top: 75px;
    padding: 20px;
    background-color: #FFFFFF;
}

#content
{
    width: 500px;
    height: 450px;
    position: relative;
    float: left;
    background-color: #000000;
}

#galerie
{
    width: 300px;
    height: 450px;
    position: relative;
    float: right;
    text-align: center;
    background-color: #00FFFF;
}

#navigation
{
    width: 900px;
    height: 200px;
    position: relative;
    top: 470px;
    text-align: left;
    background-color: #00FF00;
}

#foot
{
    width: 900px;
    height: 25px;
    position: relative;
    top: 490px;
    text-align: center;
    background-color: #808000;
}
Bitte um Hilfe. Weiß nicht weiter!
Mit Zitat antworten
Antwort

Stichwörter
design, firefox, float, internet-explorer, positionierung, problem

Themen-Optionen
Ansicht

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 aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Firefox 4 und Positionierung ChOpSueY! CSS 2 09.05.2011 22:04
ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!? damonster CSS 12 27.08.2008 15:56
Positionierung z-index und IE Blub CSS 4 09.12.2007 15:51
komplexe Positionierung new user CSS 1 19.09.2007 11:51
Barrierefreiheit - Absolute Positionierung dbub Barrierefreiheit 19 13.06.2007 16:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:43 Uhr.