HTML, Layout mit 3 Spalten

Question

Hallo Leute, ich brauche Hilfe, ich ändere meine Website von Tabellen zu divs.

Mein Problem ist, meine Website benötigt 3 divs inline, ich brauche ein div in der Mitte der Seite 788px und die anderen 2 sind links und rechts, sie werden ein Hintergrundbild auf Wiederholung haben, das je nach Bildschirmauflösung vergrößert und verkleinert, aber das div in der Mitte muss die gleiche Größe behalten und es muss in der Mitte der Seite bleiben, unabhängig von der Auflösung. Ist das möglich mit divs?

Answer 1

Dies ist natürlich möglich: Ich würde empfehlen, sich float anzusehen (http://www.w3schools.com/css/css_float.asp) und Hintergrundbild (http://www.w3schools.com/cssref/pr_background-image.asp)

Um ein Hintergrundbild festzulegen:

Schauen Sie sich Hintergrund wiederholen an: http://www.w3schools.com/cssref/pr_background-repeat.asp

Was ein 3-Spaltenlayout-Beispiel betrifft, es gibt eine Menge im Internet, ein einfaches Beispiel finden Sie hier: http://www.electrictoolbox.com/basic-3-column-fixed-width-css-layout/

#container {
    width: 700px;
}

#left {
    float: left;
    width: 150px;
}

#content {
    padding: 0 210px 0 160px;
}

#right {
    float: right;
    width: 200px;
}

.clear {
    clear: both;
}

Answer 2

Du kannst das versuchen...

Habe separate IDs für jede

und versuche, Pixel für Werte anstelle von Prozent zu verwenden... und benutze die Position als relative oder fest... so dass sich beim Verkleinern des Browsers nichts ändert...

Zum Beispiel, nehmen wir an, du hast eine ID für die zentrale

als #center_div... dann probiere dies aus...

#center_div{
position:relative (oder fest);
width: (Wert)px;
height: (Wert)px;
display: block;
}

Und wenn du möchtest, dass die zentrale

über den anderen beiden

s erscheint... verwende einfach die z-index Eigenschaft...

Hoffentlich funktioniert es...

Answer 3

Was du willst (flüssige Seiten mit festem Zentrum) ist bereits in diesem anderen SO-Beitrag beantwortet:

Dreispaltenlayout: feste Breite im Zentrum mit flüssigen Seitenspalten

Answer 4

Schauen Sie sich http://matthewjamestaylor.com/blog/perfect-3-column.htm an

Sie müssten die mittlere Spalte auf eine feste Breite (px) anstatt % setzen.

Answer 5

Hast du etwas Ähnliches gemeint?
http://jsfiddle.net/UY5XY/5/

    LEFT
    CENTER
    RIGHT

CSS:

#containter div {
    position:relative;
    text-align:center;
    width:100%;
    height:auto;
}
#containter div {
    position:absolute;
    text-align:left;
    width:100px;
    height:100px;
    display:block;
}
#left {
    left:0;            
}
#center {
    width:10%;
    margin:0 40%;
}
#right {
    right:0;   
}

-> text-align für IE (sollte in Ordnung sein)
-> Ränder: links und rechts sind auf 0 gesetzt
-> Zentrumsmargin ist prozentualer Wert, aber kann z.B. auch 50px sein, dann sollte das Zentrumsmargin auch 'margin: 0 50px' sein.