tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
236
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 30.05.10 15:39 #1
    Marico Tutorials.de Gastzugang
    Hallo,
    ich habe folgendes Problem:

    Ich habe ein Div in diesem sollen sich links, nebeneinander drei weitere befinden. Anschließenssoll eine "Lücke" mit variabler Größe folgen (ob freier Platz oder ein weiteres Div ist egal). Ein letztes Div soll am rechten Rand des Übergeordneten sein.
    Per float kann ich die Divs zwar nebeneinander anordnen allerdings nur mir einer festen Breite...
    Gibt es eine Möglichkeit das ganze wie oben beschrieben darzustellen?

    zur Veranschaulichung:

    mit 6 Divs:
    [head_top (übergeordnetes Div)
    [left][logo][middle][repeat (mit variabler Größe)][right]
    ]

    mit 5 Divs
    [head_top (übergeordnetes Div)
    [left][logo][middle] [right (rechts positioniert)]
    ]



    der code:

    HTML-Code:
    <!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>
		<link rel="stylesheet" type="text/css" href="css/layout.css" />
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
	</head>
	<body>
		<div id="container">
			<div id="head_top">
				<div id="head_top_left" />
				<div id="head_top_logo" />
				<div id="head_top_middle" />
				<div id="head_top_right" />
			</div>
		</div>
	</body>
</html>
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

    #container {
    background-color: #000000;
    width: 85%;
    min-width: 800px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    }
#head_top {
    background-color: #ffffff;
    width: 90%;
    min-width: 780px;
    height: 30px;
    margin: auto;
    }
#head_top_left {
    background-color: blue;
    width: 6px;
    height: 30px;
    float: left;
    }   
#head_top_logo {
    background-color: red;
    width: 144px;
    height: 30px;
    margin-left: 6px;
    float: left;
    }
#head_top_middle {
    background-color: green;
    width: 2px;
    height: 30px;
    margin-left: 144px;
    float: left;
    }
    #head_top_right {
    background-color: grey;
    width: 6px;
    height: 30px;
    margin-left: 2px;
    }
    Geändert von Maik (30.05.10 um 15:53 Uhr) Grund: Quellcode in Syntaxhighlighter eingebunden
     
    Zitieren Zitieren
  2. 30.05.10 15:52 #2
    Maik Tutorials.de Gastzugang
    Hi,

    dein Vorhaben setzt du folgendermaßen um:

    HTML-Code:
    <div id="container">
    <div id="head_top">
        <div id="head_top_left"></div>
        <div id="head_top_logo"></div>
        <div id="head_top_right"></div>
        <div id="head_top_middle"></div><!-- Der DIV-Block mit der variablen Breite wird innerhalb des Markups der zu umfliessenden Blöcke an letzter Stelle genannt -->
     </div>
</div>
    Neu lautende Regeln für diese beiden Blöcke:
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13

    #head_top_middle {
background-color: green;
height: 30px;
margin-left: 156px; /* linker Außenabstand zu den beiden linken vorangegangenen Blöcken */
margin-right: 6px; /* rechter Außenabstand zum rechten Block */
}
#head_top_right {
background-color: gray; /* Der Farbname wird mit "a" geschrieben */
width: 6px;
height: 30px;
margin-left: 2px;
float: right; /* Element soll vom nachfolgenden Block linksseitig umflossen werden, und richtet sich am rechten Rand aus */
}

    mfg Maik
     
    Zitieren Zitieren
  3. 30.05.10 16:16 #3
    Marico Tutorials.de Gastzugang
    Vielen Dank für die schnelle Hilfe.
    lG Marico
     
    Zitieren Zitieren
« Textfluss um Bilder | Irgendwie krieg ich das nicht hin »

Ähnliche Themen

  1. Anordnung von DIVs und Text-Ausrichtung
    Von Muckel1986 im Forum CSS
    Antworten: 8
    Letzter Beitrag: 28.08.10, 01:13
  2. Ausrichtung innerer <DIVS>
    Von Transporter im Forum CSS
    Antworten: 2
    Letzter Beitrag: 20.03.08, 11:41
  3. 2 DIVs nebeneinander innerhalb eines Haupt-DIVs
    Von Eiszwerg im Forum CSS
    Antworten: 10
    Letzter Beitrag: 21.03.07, 13:33
  4. Draggable divs - Positionen versch. divs speichern
    Von Tapir im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 18.03.07, 11:14
  5. Ausrichtung innerhalb eines divs
    Von Moan im Forum CSS
    Antworten: 2
    Letzter Beitrag: 29.12.05, 13:06