align ein div neben einem, der margin verwendet: 0 auto

Dies ist mein erstes Mal auf diesem Forum und krank versuchen, klar zu sein, wie möglich, ich habe ein Problem mit der Erstellung einer kleinen Website für meine eigenen, insbesondere mit dem Header. Ich versuche, eine Seite zu erstellen, die einen Wrapper von 1024px center (Rand: 0 auto;) hat, und ich möchte 2 divs, auf beiden Seiten dieses Wrappers, wo ich ein anderes Bild als Hintergrund verwenden kann. Meine aktuelle CSS sieht wie folgt aus:align ein div neben einem, der margin verwendet: 0 auto

body, html  
background: url(../images/bg.jpg); 
background-repeat: no-repeat; 
background-position: top center; 
margin: 0; 
padding: 0; 
} 
#wrapper 
margin: 0 auto; 
width: 1024px; 
} 
#header { 
width: 1024px; 
height: 254px; 
background-image: url(../images/header2.png); 
background-repeat: none; 
position: relative; 
} 
#header_right { 
width: 50%; 
right: 0; 
background-image: url(../images/header_right2.png); 
position: absolute; 
height: 254px; 
} 
#header_left { 
width: 50%; 
left: 0px; 
background-image: url(../images/header_left.png); 
position: absolute; 
background-position: right; 
margin-left: -512px; 
height: 254px; 
}

und meine html wie folgt aussieht:

<body> 
<div id="header_right"></div><!--End header right!--> 
<div id="header_left"></div><!--End header right!--> 
<div id="wrapper"> 
<div id="header"></div><!--End header!--> 
<div id="content"></div><!--End Content!--> 
</div><!--End wrapper!--> 
</body>

Was ich versuche, einen Kopf zu haben, zu tun ist, die links beide weiter auf und rechts (beide Header verwenden verschiedene Hintergründe), in diesem Fall funktioniert es auf der linken Seite, da ich einen negativen Rand benutze, da ich 50% Breite und genau die Hälfte des Wrappers (-512px) verwende, funktioniert das, aber wenn ich versuchen würde, a zu verwenden Negativer Rand auf der rechten Seite (Rand rechts: -512px) Dies wird die Seite auf der rechten Seite mit einem zusätzlichen 512px erweitern, was nicht meine Absicht ist.

Ich habe den ganzen Tag gegoogelt aber kann nicht scheinen, irgendeine Antwort auf meine Frage zu finden, versuchte auch, 3 divs mit Schwimmer zu bilden: verließ, aber konnte nicht herausfinden, wie man 1 in der Mitte mit einer Breite von bildet 1024px und der Rest 100% Breite, wenn mir jemand helfen könnte, wäre das sehr geschätzt.

Mit freundlichen Grüßen

Quelle

2012-10-24 Geo

mit Betrachten [jsfiddle] (http://jsfiddle.net) in Zukunft Beiträge. Es ist einfacher, Ergebnisse zu debuggen und anzuzeigen. – ShadowScripter

danke shadowscripter, krank bleib dran für das nächste mal! – Geo

Ich bin mir nicht ganz sicher, wie es aussehen soll, aber ich werde es versuchen.
Wenn ich weit weg bin, könnten Sie mir vielleicht eine schematische Darstellung geben?

In jedem Fall verwendet das unten angegebene Beispiel nicht Ihren spezifischen Code, aber es sollte Ihnen eine Vorstellung davon geben, wie es gemacht wird.

Ergebnis: first example

Die linke und rechte Header sind „unendlich“, indem sie die gesamte Seite der Breite immer füllen.
Der mittlere Header deckt den Rest ab.Wenn Sie Hintergrundbilder haben, können Sie sie mit background-position so positionieren, dass sie mit den linken und rechten Kanten des mittleren Headers übereinstimmen.

Code | JSFiddle example

HTML

<div class='side_wrapper'> 
    <div class='left_header'></div><div class='right_header'></div> 
</div> 
<div class='header'></div> 
<div class='content'> 
    Content here 
</div>

CSS

.header, .side_wrapper, .left_header, .right_header{ 
    height: 100px; 
} 

.header, .content{ 
    width: 400px; 
    margin: 0 auto; 
} 

.side_wrapper{ 
    width: 100%; 
    white-space: nowrap; 
} 

.left_header, .right_header{ 
    width: 50%; 
    display: inline-block; 
} 

.left_header{ 
    background-color: blue; 
} 

.right_header{ 
    background-color: lightblue; 
} 

.header{ 
    position:absolute; 
    top: 0; 
    left: 50%; 
    margin-left: -200px; 
    background-color: red; 
} 

.content{ 
    background-color: green; 
    text-align: center; 
}

Quelle

2012-10-24 14:23:54 ShadowScripter

vielen Dank, ich löschte vorherige Nachricht, weil ich bereits meine vorherige Antwort gefunden habe, ich werde es jetzt zur Arbeit bekommen, vielen Dank! – Geo

@GMolenaar Großartig! Willkommen bei stackoverflow! – ShadowScripter

Sie mögen die beiden Köpfe aus dem wrappper und abgesehen davon richtig? Wenn im Recht, versuchen Sie dies:

<body> 

<div id="header_left"></div><!--End header right!--> 
<div id="wrapper"> 
<div id="header"></div><!--End header!--> 
<div id="content"></div><!--End Content!--> 
</div><!--End wrapper!--> 
<div id="header_right"></div><!--End header right!--> 
</body>

und:

display: inline; float: left;

in jedem Element (Kopf links, header-rechts, wrappper) und steigen aus dem negativen Marge

Quelle

2012-10-24 13:14:50 Toping

hallo ark, danke für deine antwort, ich habe das versucht, aber würde es nicht reparieren, sollte ich die breite verlassen: 50% tho? und was ist mit der Positionierung der 3 Divs? – Geo

versuchen, ohne die Position und Breite ... – Toping

Hallo Arche, danke für Ihre schnelle Antwort, das hat funktioniert! Die letzte Frage ist, dass beide Seiten nicht eine bestimmte Breite haben und sollte so lang wie die Seite ist, der Wrapper ist auf 1024px eingestellt, beide Seiten müssen "unendlich" sein (so breit wie Ihr Bildschirm ist) – Geo

In dir divs benutze float: links;

#divWrapper 
{ 
width:500px; 
float:left; 
background-color:red; 
} 
#divLeft 
{ 
width:250px; 
float:left; 
background-color:blue; 
} 
#divRight 
{ 
width:250px; 
float:left; 
background-color:green; 
}

Html

<div id "divWrapper"> 
    <div id = "divLeft">content here</div> 
    <div id = "divRight">content here</div> 
</div><!--this is the end of the wrapper div -->

Ein wirklich gutes Werkzeug zu benutzen, für die Manipulation von CSS: dies sollte zum Beispiel innerhalb einer Hülle, solange es genügend Platz ist, werden sie nebeneinander schweben css bedeutet, dass ist Firebug in Firefox https://getfirebug.com/

, wenn Sie ein Zentrum div versuchen, dies wollen: http://jsfiddle.net/kzfu2/1/

Quelle

2012-10-24 13:27:44 anna

hi! Danke für deine Antwort Anna, das Problem ist, dass es 3 divs und nur 1 mit einer festen Breite (1024px), die Seiten auf beiden Seiten müssen so lang sein wie die Seite ist lang – Geo

Hallo meinst du die Höhe oder Breite von lang? Ich habe diese Geige http://jsfiddle.net/kzfu2/5/ aktualisiert, so dass der Wrapper eine feste Breite hat und die divs innerhalb sind Prozent davon oder das Zentrum div hat eine feste Breite mit zwei divs an der Seite http://jsfiddle.net/kzfu2/6/ – anna

align ein div neben einem, der margin verwendet: 0 auto

Antwort

Verwandte Themen