zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden bekomme div box design einfach nett hin.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.02.2005, 11:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.12.2004
Beiträge: 17
GateKay befindet sich auf einem aufstrebenden Ast
Standard bekomme div box design einfach nett hin.

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....
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.02.2005, 11:47
Benutzerbild von derHund
durstiges Tier
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2004
Beiträge: 869
derHund befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
Die Zeit hat ihre Kinder längst gefressen: hund (back in black) | ??? | ??? | ...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.02.2005, 12:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.12.2004
Beiträge: 17
GateKay befindet sich auf einem aufstrebenden Ast
Standard

danke für deine antwort,

davon habe ich keine ahnung wie das geht das " floaten ". kannste mir das mal bite an einen beispiel zeigen ?
Mit Zitat antworten
  #4 (permalink)  
Alt 27.02.2005, 12:24
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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>
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #5 (permalink)  
Alt 27.02.2005, 12:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.12.2004
Beiträge: 17
GateKay befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #6 (permalink)  
Alt 27.02.2005, 12:53
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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;

__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #7 (permalink)  
Alt 27.02.2005, 12:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.12.2004
Beiträge: 17
GateKay befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #8 (permalink)  
Alt 27.02.2005, 13:04
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #9 (permalink)  
Alt 27.02.2005, 13:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.12.2004
Beiträge: 17
GateKay befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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
css box design in header und footer trennen GateKay CSS 1 08.01.2005 14:54


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:10 Uhr.