• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

container mittig

Status
Für weitere Antworten geschlossen.
J

jhaustein

Mitglied
hallo gemeinschft

habe einen container der 800 breit ist und mittig angeordnet ist - wie mache ich es, das rechts und links neben dem container noch weitere container sind, die jeweils bis zum browserrand gehen
 
hilft mir nicht wirklich

möchte 3 spalten haben in der mitte eine mit breite 800 und links und rechts jeweils einen, der vom browserrand zum mittleren fenster geht

geht das überhaupt
 
Das geht auch so nicht mit drei Spalten.
Die Bildschirmfenster (Viewport) sind unterschiedlich breit.
Die mittlere Spalte nimmt 800px ein. Der Platz links und rechts davon muss dann prozentual aufgeteilt werden. Da Prozent und Pixel unterschiedliche Einheiten sind, haut das nicht hin.

Lösungsmöglichkeiten:

Entweder verwendest du für alle drei Spalten prozentuale Breiten, also auch für die mittlere. Das hat den Nachteil, dass die Darstellung schwer kalkulierbar ist, weil sie an jedem Bildschirm - je nach größe - anders aussehen kann. Ein Beispiel für ein solches "flüssiges Layout" findest du hier: Dreispaltiges Layout mit flexiblen Breiten

Oder du verwendest drei Spalten und weist ihnen jeweils eine fixe Breite zu. Diese packst du in einen "Wrapper", also eine Hülle, die dann für die Zentrierung sorgt. Dann sind die drei Spalten immer in der Mitte und je nach Viewport ist dann links und rechts noch ein freie, gleich große Fläche: Dreispaltiges Layout, zentriert mit fixen Breiten

Was du bei deiner Vorstellung noch bedenken solltest:
Welchen Zweck haben die linken und rechten Spalten? Soll da jeweils noch Inhalt rein? Dann wird es z.b. bei einer 1024er Breite ohnehin recht eng:
1024px - 800px = 224px
Das dann noch geteilt durch zwei und etwas Platz für Padding oder margin, dann verbleiben gerade mal noch rd. 100px Breite je Spalte links und rechts.
Wenn die also keinen Inhalt haben sollen /können, dann zentriere lediglich die mittlere.
 
hi

links und rechts soll ein bild als hintergrund rein

so hab ich es im mom
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<style type="text/css">
<!--
body{
text-align:center;
margin:0;
padding:0;
}
#container{
width:880px;
margin:0 auto;
text-align:left;
 height:690px; 
}
#header{
width: 100%;
 height:50px; 
 background-image: url(bg_kopf.jpg);
}
#header1{
width: 100%;
background-color: #f0eee3;
 height:36px; 
}
#content{
width:880px;
float:left;
background-color: #CCFF99;
 height:690px; 
}

#footer{

background-color: #f0eee3;
width: 100%;
 height:100%; 
}



-->
</style>
</head>
<body>
<div id="header"></div>
<div id="header1"></div>
<div id="left">content</div>
<div id="container">
<div id="content">content</div>
</div><div id="right">content</div>
<div id="footer">footer</div>
</body>
</html>
 

Anhänge

  • test.jpg
    test.jpg
    62,2 KB · Aufrufe: 6
Zuletzt bearbeitet von einem Moderator:
Bilder haben eine feste Breite.
Also kannst du für links und rechts entsprechend große Spalten definieren und nach dem Layoutbeispiel für fixe Breiten verfahren.
Das gilt dann auch für deinen anderen Beitrag, bei dem es offensichtlich um das gleiche Problem geht.
 
möchte links und rechts hintergrundbild reinhaben, die dann immer bis zum browserrand gehen - kannst du mir vielleicht zeigen, wie ich dass im css machen muss
 
für den header braucht man keinen div-container, da reicht ein <h1>, <h2>, .... oder <h6>...

und gewöhn es dir doch bitte an, code bitte auch anschaulich für die benutzer des forums darzustellen, endweder mit der funktion:

[ html ] ...... [ / html ]

oder

[ code ] ...... [ /code ]

(natürlich ohne leerschritte innerhalb der klammern)
 
Loon3y schrieb:
und gewöhn es dir doch bitte an, code bitte auch anschaulich für die benutzer des forums darzustellen, endweder mit der funktion:

[ html ] ...... [ / html ]

oder

[ code ] ...... [ /code ]

(natürlich ohne leerschritte innerhalb der klammern)
Zum Vergrößern anklicken....

Du hast zwar völlig recht, aber es ist immer noch Aufgabe der Moderatoren, Leute zurechtzuweisen. ;)

EDIT: @jhaustein: Kannst du noch einmal erklären, warum du das Bild nicht als Hintergrund vom body nehmen kannst?
 
ingoS schrieb:
Du hast zwar völlig recht, aber es ist immer noch Aufgabe der Moderatoren, Leute zurechtzuweisen. ;)
Zum Vergrößern anklicken....

Mag wohl wahr sein, aber wenn jeder User ein bisschen am Forum mitarbeitet, dann sollte das doch eine große Erleichterung für den mod sein ;) Zumal man nie weiß ob der Mod da ist oder eventuell Urlaub hat oder sonstiges :P

Endschuldige das ich es dir vorweggenommen habe, hoffe ich kann es wieder gutmachen :D

Edit: war kein ZURECHTweißen sondern ein HINweißen :P
 
Loon3y schrieb:
war kein ZURECHTweißen sondern ein HINweißen :P
Zum Vergrößern anklicken....

Genau das ist aber der Unterschied: Es ist überhaupt kein Problem, wenn man Leute darauf hinweist, dass es die Code-Tags gibt, aber du schriebst "gewöhn dir doch bitte an" und das ist eine Aufforderung. Ich weiß, dass das Haarspalterei ist, aber bei manchen Usern ist dieses Verhalten schon ausgeartet, also sei mir nicht böse, wenn ich daran erinnere, dass Aufforderungen, etwas gemäß den Forenregeln anzupassen, nur von denen kommen sollten, welche diese erstellt und/oder bestätigt haben.

jhaustein schrieb:
werde es das nächste mal machen - kannst du mir denn bitte bei meinem prob helfen
[...]
könnt ihr mir trotzdem helfen
Zum Vergrößern anklicken....
Kannst du zu dem Zweck meine in meinem letzten Beitrag hinzugefügte Frage beantworten?
 
ingoS schrieb:
Genau das ist aber der Unterschied: Es ist überhaupt kein Problem, wenn man Leute darauf hinweist, dass es die Code-Tags gibt, aber du schriebst "gewöhn dir doch bitte an" und das ist eine Aufforderung. Ich weiß, dass das Haarspalterei ist, aber bei manchen Usern ist dieses Verhalten schon ausgeartet, also sei mir nicht böse, wenn ich daran erinnere, dass Aufforderungen, etwas gemäß den Forenregeln anzupassen, nur von denen kommen sollten, welche diese erstellt und/oder bestätigt haben.
Zum Vergrößern anklicken....

Dann endschuldige ich mich für mein Verhalten, es sollte keine Absicht sein, bzw es sollte keine Aufforderung sein, lediglich ein Hinweiß.

@topic
wenn du links und reichts ein bild haben möchtest, könntest du dieses endweder:

- in body als hintergrundbild einfügen
- links und rechts davon nochmals div-layer einfügen

was willst du als hintergrundbild denn haben?

Desweiterem brauchst du für deinen header kein div, sondern kannst auch <h1>, <h2>, ..., <h6> nehmen.

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

<title>test</title>

<style type="text/css">
<!--

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

#content {
    width: 90%; 
    margin: 0 auto; 
    height: 50px; 
    background-color: #000000;
    }

#container {
    width: 90%;
    margin:0 auto;
    text-align:left;
    background-color: #CCFF99;
    height:300px; 
    }


#menu {
    width: 90%;
    margin: 0 auto;
    background-color: #f0eee3;
     
    }

-->
</style>
</head>
<body>
<div id="over">
    <h2 style="width: 90%; margin: 0px auto; margin-top: 10px; background-color: #f0eee3;"> <img src="bg_kopf.jpg" alt="header" /></h2>

    <ul id="menu">
    <li> <a href="1.htm"> 1 </a> </li>
    <li> <a href="2.htm"> 2 </a> </li>
    </ul>

    <div id="content"> test </div>

    <div id="container"> hier steht der text....</div>
    
    <h2 style="background-color: #f0eee3; width: 90%; margin: 0 auto;"> ich bin ein footer</h2>
</div>

</body>
</html>
 
Zuletzt bearbeitet:
jhaustein schrieb:
ich möchte wissen, ob und wie es überhaupt geht mit den containern mitte fest und rechts und links variable breite
Zum Vergrößern anklicken....

Dass das so, wie du es möchtest, nicht geht, hat prm schon relativ am Anfang gesagt.

Eine wirklich hässliche (und jetzt nicht getestete) Möglichkeit wäre aber folgendes:
Du floatest die variabel breiten Boxen, welche die Bilder enthalten, links und rechst und positionierst einen 100% breiten Rahmen absolut obendrüber, der dann wiederum die zentrierte Box mit dem eigentlichen Inhalt enthält. Ich kann aber jetzt schon mal sagen, dass dies wahrscheinlich ein gewaltiges Gewerkel wird, besonders für den Internet Explorer.

Ich kann mir aber auch einfach nicht vorstellen, wozu das, was du hier anfragst, gut sein soll.
Meine Frage hast du nur so halb beantwortet...
EDIT: Warum kannst du nicht einfach so einen Streifen als Hintergrund für den body nehmen? Warum?
 
Zuletzt bearbeitet:
du könntest dem container eine hintergrundfarbe geben und das bild im container positioniern und anschließend z-index vergeben, dass somit das bild über den darauffolgenden containern liegt.

z-index: Überlappung von Elementen: Beispiel zur CSS-Referenz auf CSS 4 You - The Finest in Stylesheets (darf ich doch posten ? wenn nicht bitte entfernen...sry ingo)

auch wenns mir vllt jetzt krumm genommen wird: Wir sind hier nicht da, um dir deine komplette Page zu erstellen und du fügst dann nurnoch deine Inhalte ein, wir sind hier lediglich um Fragen und Probleme zu lösen und vllt dir Wege zu zeigen wie es geht. Wenn du eine komplette Page willst suche bitte im Jobforum. Es nützt dir hier nicht viel wenn du immer wieder sagst "so soll es sein so muss es sein" und wir dir tips geben aber von dir kein Fortschritt zu erkennen ist sondern wieder nur "so soll es sein, wer macht das bitte?" Versuch doch mal unsere Tips aus und dann können wir dir auch weiterhelfen.

das ist nicht böse gemeint...lediglich vllt ne kleine Anregung.... :/
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben