✔ Benötige Layout-Hilfe

Status
Nicht offen für weitere Antworten.
M

Meikel25

Erfahrenes Mitglied
Hallo zusammen,

ich brauche dringend Hilfe.
Ich habe für eine neue Firma ein Layout erhalten und es soll in CSS umgesetzt werden.
Anbei das Scribble.
Nun mein Problem. Wie baue ich das CSS-Layout auf, der Header und der Content sollen immer Zentriert ausgerichtet werden und die Subheadline läuft dann immer rechtsbündig an der Seite entlang.

Ist dies überhaupt so möglich und wenn ja kann mir einer dabei behilflich sein?

MFG, und fetten Dank schon mal für die Mühen.

Meikel25
 

Anhänge

  • 1.gif
    1.gif
    5,9 KB · Aufrufe: 27
HTML: 
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>test</title>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
	<link href="styles.css" rel="stylesheet" />
</head>
<body>
	<div class="subheadline">
		&nbsp;
	</div>
	<div class="header">
		&nbsp;
	</div>
	<div class="content">
		&nbsp;
	</div>
</body>
</html>

CSS: 
body 
{
	margin: 0;
	padding: 0;
}

.subheadline
{
	float: left;
	background-color: red;
	height: 500px;
	width: 50px;
}

.header
{
	background-color: blue;
	height: 200px;
	margin-left: 50px;
}

.content
{
	background-color: black;
	height: 100%;
	margin-left: 50px;
}
 
Hier mein alternativer Lösungsvorschlag mit einem horizontal zentriertem Layout:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div.wrapper {
width: 600px;
margin: 0 auto;
border: 1px solid #fff;
}

div.leftCol {
float: left;
width: 50px;
}

div.subheadline {
height: 400px;
background: #ff0000;
}

div.rightCol {
float: right;
width: 550px;
}

div.header {
height: 200px;
background: #00a0ff;
}

div.content {
height: 500px;
background: #000;
color: #fff;
}

div.clear {
clear: both;
height: 0;
line-height: 0;
margin: 0;
padding: 0;
font-size: 0;
}
-->
</style>

</head>
<body>

<div class="wrapper">
     <div class="leftCol">
          <div class="subheadline">&nbsp;</div>
     </div>

     <div class="rightCol">
          <div class="header">header</div>
          <div class="content">content</div>
     </div>

     <div class="clear">&nbsp;</div>
</div>

</body>
</html>
P.S. Bitte unterlasse zukünftig das Pushen eines Threads, nur weil du noch keine Antwort auf deine Frage erhalten hast. Deinen Threadpusher habe ich entfernt, lese hierzu bitte auch die Netiquette Nr.12.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück