XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Positionierung (http://xhtmlforum.de/showthread.php?t=65226)

YinYang 21.07.2011 13:35

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

YinYang 21.07.2011 13:48

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

take_a_7 21.07.2011 13:48

Zitat:

Zitat von YinYang (Beitrag 498481)
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

YinYang 21.07.2011 14:30

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

YinYang 21.07.2011 20:40

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!


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:36 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023