21.07.2011, 12: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 
|
| Sponsored Links |
|
21.07.2011, 12: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;
}
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
|
| Sponsored Links |
|
21.07.2011, 12:48
|
|||
|
|||
Zitat:
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)
|
|
21.07.2011, 13: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
|
|
21.07.2011, 19: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;
}
|
 |
| Stichwörter |
| design, firefox, float, internet-explorer, positionierung, problem |
| Themen-Optionen | |
| Ansicht | |
|
|
Ä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 |
Linear-Darstellung
