YourWBB

yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » CSS: Float Problem

» Hallo Gast [Anmelden|Registrieren]

Letzter Beitrag | Erster ungelesener Beitrag

3.015 Views | | Thema zu Favoriten hinzufügen

Neues Thema erstellen Antwort erstellen

Zum Ende der Seite springen

CSS: Float Problem

Autor

Beitrag

« Vorheriges Thema | Nächstes Thema »

Pilleslife
Mitglied

Dabei seit: 22.04.06
Beiträge: 446
Forenversion: 2.3; 2.1

Achtung

CSS: Float Problem

Antworten Zitieren Editieren Melden UP

Hallo,

ich bin dabei mein neues Homepagedesign umzusetzen. Leider stoße auf ein CSS Problem. Schaut es euch einfach an: hier

Die box mit dem Inhalt "Right" soll neben die Box "Test". Ich habe "Right" gefloatet. Wenn ich beide floate sind beide boxen "unten". Wie bekomme ich es hin, dass beide in der Mitte sind.

Auch für die runden Ecken muss ich mir noch was einfallen lassen. Diese sind nur mit dem Firefox kompatibel.

Hat jetzt schon jemand ein Verbesserungsvorschlag?

Hier die HTML datei:

code:

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:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pilleslife - Startseite</title>

<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">


</script>
</head>

<body>
<div id="wrapper">
	<div id="header"></div>
    <div class="navi">

    </div>
    <div id="header2"></div>
    <div class="navi"></div>   
        <div id="content">
		<div class="content">
			Test
		</div>
		<div class="right">
			Right
		</div>
    </div>
    <div id="footer"></div> 
</div>
</body>
</html>

und hier die css

code:

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:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:

@charset "utf-8";
/* CSS Document */

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background-image:url(images/background.gif);
 background-repeat:repeat-x;
 background-color:#FFFFFF;
}

#wrapper { 
 margin: 0 auto;
 width: 600px;
 border:thin #999999 solid;
}

#header{
background-image:url(images/header.jpg);
background-repeat:no-repeat;
height:153px;
width:600px;
background-color:#39abcb;
}


.navi
{
background-image:url(images/middle.jpg);
background-repeat:repeat-x;
height:30px;
width:auto;
background-color:#333333;
}


#header2{
background-image:url(images/header2.gif);
background-repeat:no-repeat;
width:600px;
height:67px;
}

#content{
display:block;
float:none;
}

#footer
{
background-image:url(images/middle.jpg);
background-repeat:repeat-x;
height:30px;
width:auto;
background-color:#333333;
}

li{
display:inline;
padding-left: 15px;
}

.content{
padding: 20px 15px;
margin: 25px 10px;
width: 300px;
border:solid medium #999999; 
-moz-border-radius:20px;
background-color:#FFFFFF;
}

.right{
padding: 20px 15px;
float:right;
width: 100px;
margin: 25px 10px;
border:solid medium #999999; 
-moz-border-radius:20px;
background-color:#FFFFFF;
display:block;
}

Danke für eure Hilfe.

Gruß
Pilleslife

22.05.08 19:25

Pilleslife ist offline

E-Mail WWW Finden Als Freund hinzufügen

MSN Passport-Profil von Pilleslife anzeigen

Biggi
Mitglied

Dabei seit: 08.01.07
Beiträge: 3.479
Fähigkeiten: WBB2 Profi
Forenversion: 2.3

Antworten Zitieren Editieren Melden UP

Versuch mal, dem footer clear:both; zuzuweisen.
Das Floaten sollte ja schließlich irgendwo wieder aufgehoben werden.

Edit
Und zu runden Ecken schau mal hier vorbei:
http://www.cssplay.co.uk/boxes/krazy.html

__________________

22.05.08 19:32

Biggi ist offline

Finden Als Freund hinzufügen

Pilleslife
Mitglied

Dabei seit: 22.04.06
Beiträge: 446
Forenversion: 2.3; 2.1

Themenstarter Thema begonnen von Pilleslife

Thema begonnen von Pilleslife

Antworten Zitieren Editieren Melden UP

Danke dass man float aufheben muss habe ich nicht gewusst.

Aus reinem Interesse, wie bringt man dann drei boxen nebeneinander?

Danke. Das mit den Ecken werde ich mir mal anschauen.

22.05.08 19:44

Pilleslife ist offline

E-Mail WWW Finden Als Freund hinzufügen

MSN Passport-Profil von Pilleslife anzeigen

codingnoob
Don't hit 'em boon.

Dabei seit: 16.01.04
Beiträge: 2.756

Antworten Zitieren Editieren Melden UP

Drei Boxen:
- Zwei floaten links, eine rechts; pass aber auf, 2 vertauschen dann afaik ihre Position
- Eine Box floatet links, eine rechts; in einer der beiden floaten wieder 2 Boxen
- Eine Box floatet links, eine rechts, eine steht in der Mitte.

Es gibt Möglichkeiten und wie du sie umsetzen kannst siehst du z.B. bei CSS 4 You, unten Beispiel 10 unter anderem.

__________________
… mfG, cn …
– Siehe auch: last.fm wBB-User-Group

Vorsicht! User bringt gefährliches Halbwissen in Umlauf!

Kein Support per PN! Dafür ist das Forum da. Auch keine Hinweise auf Threads per PN!

Meine Kritik an deinem Forum, Style, … ist hart? Oh. … das Positive siehst du als Erschaffer ja selbst.

23.05.08 07:46

codingnoob ist offline

E-Mail Finden Als Freund hinzufügen

Baumstruktur | Brettstruktur

Gehe zu:

Neues Thema erstellen Antwort erstellen

yourWBB » yourWBB Misc * » Das Proggen » HTML, XHTML, JavaScript & CSS » CSS: Float Problem