zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Umsetzung eines Layouts

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.01.2009, 17:52
Christian Seel
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2009
Beiträge: 10
Seel-Media befindet sich auf einem aufstrebenden Ast
Unglücklich Problem mit Umsetzung eines Layouts

Hallo liebe Community,

bisher habe ich meine Layouts hauptsächlich mit Tabellen umgesetzte, bin nun aber dabei vollständig zu CSS überzugehen.

Gerade komme ich jedoch nicht weiter.
Dieses Grdundlayout soll umgesetzt werden:


Logischerweise geht es um die beiden grünen Balken. Der schwarze Bereich wird mal 900px breit. Genau über und unter dem schwarzen Bereich soll in den grünen Bereichen Text stehen. Der restliche grüne Teil des Balkens nach rechts bzw links soll leer bleiben und einfach nur bis zum rand gehen.

Wie kann man diese beiden grünen Balken umsetzen?

Würde mich über Hilfe sehr freuen.

Gruß
Christian
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.01.2009, 20:14
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Nimm ein <div>, packe da rein <div> für grün-oben, schwarz und grün-unten.

Gib dem äußeren Div die Breite von 900px, #schwarz keine Breite, #oben und #unten eine größere Breite als 900px, wobei #unten mit "margin-left:-100px" über den Rand von #wrap gezogen wird.

Sieht dann ungefähr so aus:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
   <style type="text/css">
  html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, strong, em, table, td, tr, th, a, div {
  margin: 0 ;
  padding: 0 ;
  }
 #wrap {
 margin:0 auto;
 border:1px solid red;
 width:900px;
 height:600px;
 }
 #oben {
 width:1000px;
 background: green;
 height:100px;
 }
 #schwarz {
 background: #000;
 height:400px;
 }
  #unten {
 width:1000px;
 background: green;
 height:100px;
 margin-left:-100px;
 }
  </style>
</head>
<body>
<div id="wrap">
<div id="oben"></div>
<div id="schwarz"></div>
<div id="unten"></div>
</div>
</body>
</html>
Funktioniert im IE7, FF3.x und Safari 3.1.

Damit in den überstehenden Bereich von #oben und #unten kein Element platznimmt, musst du noch padding-left bzw. padding-right vergeben und die Breite anpassen.

Gibt natürlich auch andere Versionen, da ist dann statt dem negativen Abstand #schwarz einfach kleiner als #wrap, #oben und #unten genauso groß.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ

Geändert von Crizzo (24.01.2009 um 20:18 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.01.2009, 21:18
Christian Seel
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2009
Beiträge: 10
Seel-Media befindet sich auf einem aufstrebenden Ast
Standard

Danke BlackHawk für deine Antwort.

Also das war noch nicht ganz so wie ich es wollte, aber dank deinem Gerüst, hab ichs jetzt geschafft.

Scheint so auch wunderbar zu funktionieren. Getestet mit FF und IE 6.

Wär nett wenn mir mal noch jemand sagt, gut, so kann man es ohne Probleme machen....

Quelltext:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
   <style type="text/css">
  html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, strong, em, table, td, tr, th, a, div {
  margin: 0 ;
  padding: 0 ;
  }
 #wrap {
 margin: 0 auto; text-align:center;
 border:1px solid red;
 width:100%;
 height:600px;
 }
 #oben {
 width:100%;
 background: green;
 height:35px;
 margin-left:50%;
 }
 #wrapper {
 margin: 0 auto;
 text-align:center;
 width:900px;
 }
 #schwarz {
 margin: 0 auto;
 text-align:center;
 background: #000;
 width: 900px;
 height:400px;
 }
 #unten {
 width:100%;
 background: green;
 height:35px;
 margin-left:-50%;
 z-index:0;
 }
 
 #untenb {
 width:900px;
 background: red;
 height:35px;
 margin: 0 auto;
 text-align:center;
 z-index:2;
 margin-top: -35px;
}
  </style>
</head>
<body>
<p>&nbsp;</p>
<div id="wrap">
	<div id="oben"></div>
	<div id="untenb"></div>
		<div id="schwarz"></div>
	<div id="unten"></div>
	<div id="untenb"></div>
</div>
</body>
</html>
Gruß
Chris
Mit Zitat antworten
  #4 (permalink)  
Alt 24.01.2009, 21:31
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von Seel-Media Beitrag anzeigen
Danke BlackHawk für deine Antwort.

Also das war noch nicht ganz so wie ich es wollte, aber dank deinem Gerüst, hab ichs jetzt geschafft.

Scheint so auch wunderbar zu funktionieren. Getestet mit FF und IE 6.

Wär nett wenn mir mal noch jemand sagt, gut, so kann man es ohne Probleme machen....
Was soll dir nochmal jemand sagen?
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #5 (permalink)  
Alt 24.01.2009, 21:37
Christian Seel
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2009
Beiträge: 10
Seel-Media befindet sich auf einem aufstrebenden Ast
Standard

Sowas wie: "gut, so kann man es ohne Probleme machen".
Wegen dem negativen margin zum Beispiel. Kommen damit alle Browser klar (auch ältere)?
Mit Zitat antworten
  #6 (permalink)  
Alt 24.01.2009, 21:39
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Das solltest du selbst testen können.
Hiermit z.B. sind alte Internet Explorer testbar: Install multiple versions of IE on your PC | TredoSoft

An ältere Opera, Safari und Firefox sollte man recht einfach kommen.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #7 (permalink)  
Alt 24.01.2009, 21:48
Benutzerbild von In4matiker
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 19.12.2005
Ort: Winterthur (Schweiz)
Beiträge: 158
In4matiker befindet sich auf einem aufstrebenden Ast
Standard

Oder gleich Virtual PC installieren und die kostenlosen XP (mit IE6) Images von Microsoft ziehen.
Download details: IE App Compat VHD

Dann kannst Du auch gleich eure Firmenwebseite checken weil die sieht im IE7 nicht ganz korrekt aus
__________________


Geändert von In4matiker (24.01.2009 um 21:55 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 24.01.2009, 23:53
Christian Seel
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2009
Beiträge: 10
Seel-Media befindet sich auf einem aufstrebenden Ast
Standard

Hallo nochmal,

habe jetzt noch ein Problem das ich mir nicht erklären kann:

Der div "mitte" hat einen hintergrund zugewiesen bekommen. Der wird aber nur angezeigt, wenn ich dem div eine Höhe zuweise. Warum?

Hier der Quelltext:
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>

<title>Eipper-DA-Personalservice GmbH - [*pagetitle*]</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="de" />


<!-- BASE AENDERN!!
<base href="http://www.eipper-da-personalservice.de" />
-->

<script type="text/javascript" src="/assets/repository/slimbox/js/mootools.js"></script>
<script type="text/javascript" src="/assets/repository/slimbox/js/slimbox.js"></script>
<link rel="stylesheet" href="/assets/repository/slimbox/css/slimbox.css" type="text/css" media="screen" />

<!-- STYLESHEET EINRICHTEN!!
<link rel="stylesheet" href="/screenstyle.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/printstyle.css" type="text/css" media="print" />
-->

<link rel="shortcut icon" href="http://eipper.seel-media.de/favicon.png" type="image/png" />
<link rel="icon" href="http://eipper.seel-media.de/favicon.png" type="image/png" />

<style type="text/css">
/*
GRUNDGERÜST
*/ 
  html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, strong, em, table, td, tr, th, a, div {
   margin: 0 ;
   padding: 0 ;
  }
  
  body {
   background-color:#EBF0F1;
  }
  
  #page {
   margin: 0 auto;
   text-align:center;
   width: 100%;
  }
  
  #oben {
   width:100%;
   background: green;
   height:35px;
   margin-left:50%;
  }
  
  #mitte {
   margin: 0 auto;
   text-align:center;
   width: 900px;
   background-image:url(/assets/images/tpl/bg.gif);
   background-repeat:repeat-y;
  }
    
  #unten {
   width:100%;
   background: green;
   height:35px;
   margin-left:-50%;
   clear:left;
  }
  
  #contentoben {
   margin: 0 auto;
   text-align:center;
   width:900px;
   background: red;
   height:35px;
   margin-top: -35px;
 } 

  #contentunten {
   margin: 0 auto;
   text-align:center;
   width:900px;
   background: red;
   height:35px;
   margin-top: -35px;
  } 

/*
LAYOUT MITTE
*/

  div#inhalt {
   float:right;
   width:593px;
   height: 100%;
   padding:20px;
   margin-left:15px;
   text-align: left;
   border-left: 1px solid #D4D4D4;
   border-right: 1px solid #D4D4D4;
  }

  div#newsletter {
   float:left;
   width:228px;
   padding:10px;
   border: 1px solid #D4D4D4;
   border-top: 0px solid #D4D4D4;
   background-color: #FFFFFF;
   background-image:url(/assets/images/tpl/newsletter.png);
   background-repeat:no-repeat;
   text-align: left;
  }

  div#ticker {
   float:left;
   clear:left;
   width:250px;
   background:#FF8539;
   text-align: left;
  }
</style>
</head>
<body>
<p>&nbsp;</p>
<div id="page">
	<div id="oben"></div>
	<div id="contentoben"></div>
	<div id="mitte">
		<div id="wrapper">
		    <div id="inhalt">
			<p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill			 very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long 			long fill very.</p>

			<p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill			 fill long make very filler column very long very filler silly very make filler silly make make column column </p>
			<p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column fil			ler make silly make text text fill make very filler column very </p>
			<p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill 			fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p>
		    </div>
		</div>
	
		<div id="newsletter">
			<strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly fil			ler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler
		</div>

		<div id="ticker">
			<p><strong>3) More stuff here.</strong> very text make long column make filler fill make column column silly filler text silly column fill silly fill column text filler make text			silly filler make filler very silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long			long column fillsilly column very </p>
		</div>	
	</div>
	<div id="unten"></div>
	<div id="contentunten"></div>
</div>
</body>
</html>
...der Hintergund dient dazu die boxen "gleich lang" aussehen zu lassen....damit das weiße bis unten zum Balnken geht.

Geändert von Seel-Media (24.01.2009 um 23:56 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 25.01.2009, 00:59
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Klick

Der Container #mitte wächst nicht mit, da die inneren "floats" ihn nicht ausdehnen. Dir fehlt ein "clear".
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 25.01.2009, 13:33
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Code:
 #oben {
   width:100%;
   background: green;
   height:35px;
   margin-left:50%;
  }

Nimm noch die Breitenangabe width:100% raus, sie verursacht in allen geprüften Browsern eine ellenlange horizontale Scrollleiste.
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
Mitwachsender Content und Footer Problem Bentham CSS 5 19.09.2010 12:49
IE 7: Zoom Problem, Höhen Problem, Text problem Cu Chullain CSS 4 02.09.2010 14:56
PNG in IE Problem mit der Mauserkennung (klickbar oder nicht) Angélique CSS 13 16.03.2010 19:20
Stu Nicholls Galerie - Problem bei Umsetzung rockpianist CSS 16 30.10.2009 21:20
Problem mit Background-Color im FireFox to.ni CSS 2 31.08.2004 12:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:35 Uhr.