zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Div-Layout Position

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.01.2008, 11:42
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.01.2008
Beiträge: 39
ottscho befindet sich auf einem aufstrebenden Ast
Standard Div-Layout Position

Hallo zusammen,

ich habe einige Probleme bei der Umsetzung meines Designs.
Kindergarten St. Antonius
http://kiga.ottscho.de/style.css


1. Firefox:
Das DIV "house_right" wird nicht richtig positioniert bzw. habe ich ein Fehler und finde den nicht.
Weiß jmd wo das Problem liegt?

Folgende Infos:

ja gut, ich habe ja folgende haupt-div in der mitte:

Code:
#middle { height:301px; width:939px; background-color:#ffffff; }
nun möchte ich hier hintereinander in einer linie die anderen divs haben:

Code:
	
#pens
{
background-image:url(images/pens.gif);
background-repeat:no-repeat;
height:301px;
width:111px;
}

#menu 
{
float:left;
width:137px;
margin:0px 0px 0px 111px;
}

#house_left
{
background-image:url(images/house_left.gif);
background-repeat:no-repeat;
height:301px; width:13px;
margin:0px 0px 0px 249px;
}
diese drei divs werden korrekt angezeigt und positioniert.
das letzte div wird aber einfach unten angehängt:

Code:
	
#house_right
{
background-image:url(images/house_right.gif);
background-repeat:no-repeat;
height:301px;
width:208px;
margin:0px 0px 0px 731px;
}
2. IE6.0
Da zerhaut es mir das Layout total. Ist schon sehr lange her, wo ich zuletzt was mit CSS gemacht hatte. Damals gab es irgendwie ein Fix, weil IE6 glaube ich die Margin anderst darstellt bzw. den Border nicht mit rechcnet. Hat mit jmd evtl. ein Tipp bzw. ein Link bzgl. dem Problem.

3. IE7
Ich habe kein IE7, vllt kann mir mal jmd sagen, wie es da aussieht.

Ich bin kein Profi, mache das aus Hobby und habe zuletzt vor ca. 1 1/2 Jahre was mit HTML und CSS gemacht.

Danke für eure Hilfe.
Gruß
ottscho
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.01.2008, 13:33
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von ottscho Beitrag anzeigen
3. IE7
Ich habe kein IE7, vllt kann mir mal jmd sagen, wie es da aussieht.
Directupload.net - 2dnpagso.jpg
Zitat:
Ich bin kein Profi, mache das aus Hobby und habe zuletzt vor ca. 1 1/2 Jahre was mit HTML und CSS gemacht.

Danke für eure Hilfe.
Gruß
ottscho
mhm.

[Invalid] Markup Validation of http://kiga.ottscho.de/ - W3C Markup Validator
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.01.2008, 13:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.01.2008
Beiträge: 39
ottscho befindet sich auf einem aufstrebenden Ast
Standard

danke für die Antwort...

Laut Validator habe ich in den IMG Syntax ein paar / zuviel. Ok, habe diese raus genommen.
Aber woran liegt es, dass ich die Verschiebungen habe?

Geändert von ottscho (09.01.2008 um 14:00 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 09.01.2008, 14:36
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Dein positinieren ist ziemlich umständlich. Du versucht an Hand von Abständen zu positionieren und schmeißt dann noch ein "float" in die Runde.

Lass mal die Abstände weg und positioniere nur mit "float" und "clear".
Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : FLOAT }
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #5 (permalink)  
Alt 09.01.2008, 14:59
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.01.2008
Beiträge: 39
ottscho befindet sich auf einem aufstrebenden Ast
Standard

danke für den Link. Habe ihn gerade kurz überflogen...
wenn ich also mehrere Divs horizontal nebeneinander haben möchte, reicht es wenn ich die größe und float: left; angebe.

Oder habe ich was falsch verstanden? Ich werde es mir heute abend, nach der Arbeit mal genauer anschauen...
Mit Zitat antworten
  #6 (permalink)  
Alt 09.01.2008, 15:00
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Im Großen und Ganzen, ja.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #7 (permalink)  
Alt 09.01.2008, 15:17
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.01.2008
Beiträge: 39
ottscho befindet sich auf einem aufstrebenden Ast
Standard

mhhh, irgendwas habe ich noch falsch verstanden...

die div's verwerden trotzdem untereinander angeordnet und nicht horizontal.

Haupt Div:
Code:
#middle {
	height:301px;
	width:939px;
	background-color:#ffffff;	
}
Div Boxen, welche im Haupt Div horizontal nebeneinander dargestellt werden sollen
Code:
#pens {
	background-image:url(images/pens.gif);
	background-repeat:no-repeat;
	height:301px;
	width:111px;
	float: left;		
}
#menu {
	float:left;
	width:137px;
	float: left;
}
#house_left {
	background-image:url(images/house_left.gif);
	background-repeat:no-repeat;
	height:301px;
	width:13px;
	float: left;

}
#house_right {
	background-image:url(images/house_right.gif);
	background-repeat:no-repeat;
	height:301px;
	width:208px;
	float: left;
}
Mit Zitat antworten
  #8 (permalink)  
Alt 09.01.2008, 15:53
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von ottscho Beitrag anzeigen
Code:
#menu {
    float:left;
    width:137px;
    float: left; /* Wieso zweimal? */ 
}
Stell sicher, dass die Divs genug Platz haben und #middle mitwächst (siehe FAQ Punkt 2)
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #9 (permalink)  
Alt 09.01.2008, 16:14
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.01.2008
Beiträge: 39
ottscho befindet sich auf einem aufstrebenden Ast
Standard

arrggg...
ich raffe es einfach nicht!

so müsse es doch nun gehen. das hauptdiv hat eine breite von 939px und die anderen wenn man sie addiert auch... trotzdem wird es noch untereinander aufgebaut.

Kindergarten St. Antonius

Code:
#middle {
	height:301px;
	width:939px;
	background-color:#ffffff;	
}

#pens {
	background-image:url(images/pens.gif);
	background-repeat:no-repeat;
	height:301px;
	width:111px;
	float: left;		
}

#menu {
	width:137px;
        height:301px;
	float: left;
}
#house_left {
	background-image:url(images/house_left.gif);
	background-repeat:no-repeat;
	height:301px;
	width:13px;
	float: left;

}
#content {
	height:301px;
	width:407px;
	float: left;

}
#house_right {
	background-image:url(images/house_right.gif);
	background-repeat:no-repeat;
	height:301px;
	width:208px;
	float: left;
}
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.01.2008, 16:21
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Die Element stecken in #pens, dass kann nicht funktionieren...
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
Antwort

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
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 10:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 19:18
Myspace problem... Rechte Säule verschiebt sich im IE. calledmarcel CSS 1 27.02.2009 09:12
<div> ersetzt <table> - kann div nicht zentrieren Zumlin CSS 13 31.01.2009 15:27
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 22:48


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:58 Uhr.