bekomme div box design einfach nett hin.

GateKay · #1 (**permalink**) 27.02.2005, 11:10

hallo leute,

ich sitze schon seit gestern dran um den header der webseite in div zu gestalten.
mein problem ist folgendes, ich möchte gerne oben eine div box haben mit folgenden maßen : 100% wihte, 10px height --- > das habe ich hin bekommen.

nun zu meinen probem, darunter soll eine weitere div box, sagen wir mal mit den namen " headerbig " sein.
in ihr sollen noch 2 div boxen sein sagen wir man mit folgenden namen: headerleft und headerlong.

so zu den problem nun, die div box headerbig soll folgende mße haben: 100% wihte, 90px height

die div box " headerbig " soll links anliegen und die maße haben:12px wihte, und 89px height .
daneben soll die div box "headerlong" sein mit den maßen : links anliegend an der div box " headerbig " und die wihte = 100% und heigh= 88px.

so das sind meine vorstellungen, kann mir mal bitte jemand helfen dabei. ich bekomme das irgend wie nicht hin.

danke für die hilfe... schon mal....

derHund · #2 (**permalink**) 27.02.2005, 11:47

wie willst du den zwei boxen nebeneinandersetzen, von denen eine 12px breit ist, die andere 100% ... wie soll das aussehen?

mach die linke 12px breit, und der rechten gibst du links ein margin von 12px. die linke läßt du floaten, die rechte nicht ... sie nimmt dann automatische den rest der breite ein.

GateKay · #3 (**permalink**) 27.02.2005, 12:08

danke für deine antwort,

davon habe ich keine ahnung wie das geht das " floaten ". kannste mir das mal bite an einen beispiel zeigen ?

Boris · #4 (**permalink**) 27.02.2005, 12:24

Aber gern:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
		<title>Box</title>
		<meta http-equiv="content-type" content="text/html; iso-8859-1">
<style type="text/css" media="screen,projection">
#navi
{
	float: left;
	width: 200px;
	border: 1px solid #999;
	border-width: 1px 2px 2px 1px;
	background-color: white;
}

#man
{
	margin-left: 210px;
	border: 1px solid #000;
	background-color: red;
}

</style>
</head>
<body style="background: #eee">
<div id="navi">Ich bin die Navi und 200px breit.</div>
<div id="man">Ich bin der Inhalt und will 100% breit sein</div>

</body>
</html>

GateKay · #5 (**permalink**) 27.02.2005, 12:50

danke @Adagio ,

habe das mal so eingabeut wie du es mir erstellt hast. da habe ich aber noch ein problem, die div box in meinen beispiel "headerleft" liegt nicht ganz links an. sie hat einen kleinen spalt zum linken rand. sie soll genau links anliegen und danach soll gelcih die div box " headerbig " kommen.
wie bekomme ich den linken spalt neben der div box "headerleft" weg.

hier mal mein code ...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
      <title>Box</title>
      <meta http-equiv="content-type" content="text/html; iso-8859-1">
      <style type="text/css">
<!--
   #header{
	background:#99CC33;
	padding:2px;
	height: 10px;
}
#headerleft
{
	float: left;
	width: 16px;
	background-color: #99CC33;
	height: 89px;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	clip: rect(0px,0px,0px,0px);
	margin: 16px 0px 0px;
	padding: 0px;
}


   #headerbig {
	margin-left: 0px;
	border: 1px solid #000;
	background-color: red;
	height: 89px;
	margin-top: 8px;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

-->
</style>
<div id="header"></div>
<div id="headerleft"></div>
<div id="headerbig">Ich bin der Inhalt und will 100% breit sein</div>

danke für eure hilfe...

Boris · #6 (**permalink**) 27.02.2005, 12:53

Erstmal kannst Du diesem Müll komplett rausnehmen, das hat da weder was verloren, noch bringt es etwas:

Code:

left: 0px;
   top: 0px;
   right: 0px;
   bottom: 0px;
   clip: rect(0px,0px,0px,0px);

Dann solltest Du einfach mal Deine padding / margin-Angaben überprüfen. Daran wirst Du es ändern können.

Und das:

Code:

body {
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
}

Kann man auch so schreiben:

margin: 0;

GateKay · #7 (**permalink**) 27.02.2005, 12:58

habe da alles raus gelösch was du gesagt hast @Adagio

nur damit komme ich nicht richtig klar

Zitat:

Dann solltest Du einfach mal Deine padding / margin-Angaben überprüfen. Daran wirst Du es ändern können.

was meinst du damit, sorry bin nett so der profi ...

meine änderung ist jetzt so ...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
      <title>Box</title>
      <meta http-equiv="content-type" content="text/html; iso-8859-1">
      <style type="text/css">
<!--
   #header{
	background:#99CC33;
	padding:2px;
	height: 10px;
}
#headerleft
{
	float: left;
	width: 16px;
	background-color: #99CC33;
	height: 89px;
	margin: 0px 0px 0px;
	padding: 0px;
}


   #headerbig {
	margin-left: 0px;
	border: 1px solid #000;
	background-color: red;
	height: 89px;
	margin-top: 8px;
}
body {
   margin: 0; 
}

-->
</style>
<div id="header"></div>
<div id="headerleft"></div>
<div id="headerbig">Ich bin der Inhalt und will 100% breit sein</div>

Boris · #8 (**permalink**) 27.02.2005, 13:04

Zitat:

was meinst du damit, sorry bin nett so der profi ...

Was war daran nicht so klar? Du benutzt um CSS überall (und durcheinander) margin und padding-Angaben. Diese dienen tatsächlich dazu, Abstände zu definieren - und eben genau die musst Du anpassen

GateKay · #9 (**permalink**) 27.02.2005, 13:46

da habe ich nett gewusst.
ich dachte immer wenn ich einselne sachen damit bestimme sind nur sie gemeint. da habe ich wieder dazu gelernt.

vielen dank @Adagio für deine mühe und ausdauer !!! THX

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
DIV in DIV BOX	party	CSS	1	24.08.2007 16:20
ps design (slices), php (dynamischer inhalt), css gestaltung	schleepy	CSS	19	02.06.2006 22:46
Kniffliges Layout mit float	Roadrunnerle	CSS	6	14.03.2006 11:26