zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIV Container ist horizontal zentriert! aber der inhalt leider nicht !

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.11.2010, 20:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.11.2010
Beiträge: 11
svezi befindet sich auf einem aufstrebenden Ast
Standard DIV Container ist horizontal zentriert! aber der inhalt leider nicht !

Hi alle Zusammen

ich sehe vor lauter Wald die Bäume nicht mehr!
ich arbeite gerade an einer Typo3 Seite und erstelle eine neues Design.

Leider schaffe ich es nicht, mit Div den Inhalt innerhalb des Containers zu zentrieren. der äußere ist zentriert.
Bin jetzt schon fast zwei tage daran und brauche eure Hilfe...






hier meine template.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Template</title>

</head>

<!-- ###DOKUMENT### begin-->


<div id="container1">###container1###

<div id="top-banner" style="background-image: url(../hundewelt/fileadmin/cms/top-banner.jpg);"></div>

<div id="top-menu" style="background-image: url(../hundewelt/fileadmin/cms/top-menu.jpg); ">###TOP-menu###
<div style="clear:both;"></div>
</div>

<div id="inhalt-links" style="z-index: 3;">###inhalt-links###<div style="clear:both;"></div></div>

<div id="inhalt-mitte" style="z-index: 3;">###inhalt-mitte###</div>

<div id="inhalt-rechts" style="z-index: 3;">###inhalt-rechts###</div>

<div id="rand-impress" style="z-index: 6; background-image:
url(../hundewelt/fileadmin/cms/rand-impress.jpg);">###impress###</div-->

</div>

<!-- ###DOKUMENT### end -->
</body>
</html>


hier meine style.css

@charset "utf-8";

body { background: #D5CCAF ; padding: 0; margin: 0; text-align: center; }


/*CONTAINER*/

#container1 {
background-color: #fff ;
background-image:url(http://172.16.0.14/hundewelt/fileadmin/cms/rahmen.jpg);
text-align: left;
padding: 0px;
border: 0px dashed #b9821a;
margin: 30px auto 0;
width: 990px;
height: 638px;
}


#top-banner {
text-align: left;
padding: 0px;
border: 0px dashed #b9821a;
margin: 30px auto 0;
position: absolute;
top: 15px;
left: 15px;
width: 510px;
height: 125px;
background: no-repeat;
}


#top-menu {
text-align: left;
padding: 0px;
border: 0px dashed #b9821a;
margin: 30px auto 0;
position: absolute;
top: 15px;
left: 525px;
width: 248px;
height: 145px;
background: no-repeat;}

#rand-impress {
text-align: left;
padding: 0px;
border: 0px dashed #b9821a;
margin: 30px auto 0;
position: absolute;
top: 15px;
left: 773px;
width: 201px;
height: 607px;
background: no-repeat;}

#inhalt-links {
text-align: left;
border: 0px dashed #b9821a;
position: absolute;
top: 160px;
left: 120px;
width: 190px;
height: 415px;
border: 1px dotted #000000;
background: no-repeat;}

#inhalt-mitte {
text-align: left;
padding: 0px;
border: 0px dashed #b9821a;
position: absolute;
top: 160px;
left: 330px;
width: 190px;
height: 415px;
border: 1px dotted #000000;
background: no-repeat;}

#inhalt-rechts {
text-align: left;
padding: 0px;
border: 0px dashed #b9821a;
position: absolute;
top: 160px;
left: 550px;
width: 190px;
height: 415px;
border: 1px dotted #000000;
background: no-repeat;}


#rand-impress {
text-align: left;
padding: 0px;
border: 0px dashed #b9821a;
position: absolute;
top: 15px;
left: 770px;
width: 201px;
height: 607px;
background: no-repeat;}

}

Geändert von svezi (07.11.2010 um 19:20 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.11.2010, 21:19
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Dir fehlt das beginnende <body>.

Und welches div willst Du eigentlich zentrieren? #container1 sollte schon zentriert sein.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.11.2010, 21:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.11.2010
Beiträge: 11
svezi befindet sich auf einem aufstrebenden Ast
Standard

(BODY) gleich ausgebessert...

Alle Container sollten Horizontal durch Container 1 zentriert werden

leider ist es nur der Container1, die restlichen brechen leider aus dem Container1 aus und schwimmen links zentriert.

Habe soeben bemerkt, wenn ich im CSS unter #container1 { overflow: hidden; angebe, das dann der IE "richtig" anzeigt nur Firefox und Opera eben nicht.





Geändert von svezi (07.11.2010 um 19:20 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 03.11.2010, 22:53
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Da Du alles was in dem #container1 ist unnötigerweise absolut positionierst, erhält #container1 keine Form und die Inhalte sind folglich auch nicht zentriert.

Du hast 2 Möglichkeiten:
a) gib #container1 noch eine relative Positionierung wodurch die absolut positionierten sich an #container1 ausrichten würden.
b) Verzichte auf die absolute Positionierung, verwende float um Objekte anzuordnen.

Ich würde dringend b) empfehlen da dir scheinbar noch nicht bewusst ist wie absolute Positionierung funktioniert.
Mit Zitat antworten
  #5 (permalink)  
Alt 03.11.2010, 23:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.11.2010
Beiträge: 11
svezi befindet sich auf einem aufstrebenden Ast
Standard

LOL

da könntest du recht haben.

leider habe ich ein Grafik als Hintergrund mit Rahmen im Container1, was bedeuten würde, das durch den float Befehl der Rand dieser Grafik überdeckt werden würde.

gehe ich richtig in der Annahme, das ich einen zweiten DIV Container drüber legen muss, der die Abstände des Rahmen einhält?
Mit Zitat antworten
  #6 (permalink)  
Alt 03.11.2010, 23:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.11.2010
Beiträge: 11
svezi befindet sich auf einem aufstrebenden Ast
Standard

o.k. muss keinen 2 div Container anlegen!
kann ja

float:left
und dann mit
margin-top oder -left anpassen.

Schee, und wie Positioniert man dann die mittlere grafik

float:middle gibt es nicht !
Mit Zitat antworten
  #7 (permalink)  
Alt 03.11.2010, 23:40
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Auch mit float. Und welche Werte float annehmen kann entnimmst Du bitte einer der vielen CSS-Referenzen. middle gehört nicht dazu.
Mit Zitat antworten
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
DIV container verschachteln und pixelgenau platzieren Yakilo CSS 4 02.02.2010 20:18
Div Container beinhaltet weitere Divs,wie den Container scrollen lassen? SpecialK CSS 9 01.09.2008 12:17
verständnis html oder css DIV CONTAINER creative100 CSS 1 20.08.2008 01:31
Problem mit position:relative; McCoRmIcK CSS 0 08.04.2007 17:23
Internet Explorer stellt Layout falsch dar phpfuchs CSS 2 14.09.2006 10:16


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