zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 spaltiges CSS Layout mit fixer Breite!?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.07.2008, 10:08
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.02.2004
Beiträge: 35
atmosfear befindet sich auf einem aufstrebenden Ast
Frage Grundlagen: 3 spaltiges CSS Layout mit fixer Breite!?

Hallo und schönen Vormittag zusammen!

Ich versuche gerade ein fertiges CSS-Layout auf meine Bedürfnisse anzupassen, schaffe
es aber irgendwie nicht. Hier der Quelltext:

Code:
<?xml version="1.0" encoding="utf-8"?>
<!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" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style media="screen" type="text/css">
body {
	margin:0;
	padding:0;
	border:0;				/* This removes the border around the viewport in old versions of IE */
	width:100%;
	background:#e6e0d6;
	min-width:955px;		/* Minimum width of layout - remove line if not required */
							/* The min-width property does not work in old versions of Internet Explorer */
	font-size:90%;
	text-align:center;
}
#frame {
	width:955px;
	margin-right:auto;
	margin-left:auto;
	margin-top:0px;
	padding:0px;
	text-align:left;
}
#header {
	clear:both;
	float:left;
	width:100%;
}
#header {
	border-bottom:1px solid #000;
}
.colmask {
	position:relative;		/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
	width:100%;				/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
}
.threecol {
	background:#eee;		/* right column background colour */
}
.threecol .colmid {
	right:158px;			/* width of the right column */
	background:#b9aa94;		/* center column background colour */
}
.threecol .colleft {
	right:639px;			/* width of the middle column */
	background:#CC9900;		/* left column background colour */
}
.threecol .col1 {
	width:46%;				/* width of center column content (column width minus padding on either side) */
	left:102%;				/* 100% plus left padding of center column */
}
.threecol .col2 {
	width:21%;				/* Width of left column content (column width minus padding on either side) */
	left:31%;				/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
	width:21%;				/* Width of right column content (column width minus padding on either side) */
	left:85%;				/* Please make note of the brackets here:
							(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
.colright,
.colmid,
.colleft {
	float: left;
	width: 100%;			/* width of page */
	position: relative;
}
.col1,
.col2,
.col3,
.col10,
.col20 {
	float: left;
	position: relative;
	padding: 0 0 1em 0;		/* no left and right padding on columns, we just make them narrower instead 
							only padding top and bottom is included here, make it whatever value you need */
	overflow: hidden;
}
</style>
</head>
<body>
<div id="frame">
  <div class="colmask threecol">
    <div class="colmid">
      <div class="colleft">
        <div class="col1">
          <div id="header">header</div>
          <div class="col10"> left submenu </div>
          <div class="col20">Lorem ipsum dolor sit amet, pede vestibulum, eu ut leo sed, sit eros nec amet sollicitudin, at auctor eget libero nulla sit, sodales ac eu. Pede arcu scelerisque aliquam, lacus magna odio, aenean nulla pretium pellentesque aliquam elementum placerat, morbi tellus volutpat mi lacus tellus, nibh nec nunc non per tellus. Vestibulum mattis ornare ac, eu tortor amet ut, dignissim luctus, tortor mauris semper vehicula, mattis aliquam metus. Erat quo, nulla lorem elementum integer interdum velit, augue fermentum massa massa arcu, sit consequat sem ridiculus. Wisi non nec vitae, turpis sit aliquam suspendisse orci. Sit sit elit. Vitae convallis pellentesque et sollicitudin pharetra urna, venenatis tempus porttitor sit wisi mattis. Non laoreet lacus, in ipsum orci potenti viverra vulputate libero, nulla aenean sit, natoque est leo ad. Donec nunc commodo elementum, posuere felis feugiat egestas lacus.

Sed faucibus integer turpis facilisis risus, scelerisque laborum justo urna, libero lacinia gravida. Urna vestibulum rhoncus, sit ipsum purus suspendisse justo, lorem viverra nam elit tempus est, vitae ullamcorper. Aut tellus mus fusce ut elit ut, lorem sed nibh sociosqu. Enim semper justo eu rutrum, a ornare eros vestibulum, aliquam turpis lorem, est ea pede, sodales diam. Libero sit quis, neque accusamus gravida pellentesque donec interdum amet. Pede habitasse ipsum dui proin nulla lorem. Nulla mi erat est interdum proin dapibus, condimentum viverra nulla, arcu id quis atque ac. Nec vulputate at ac diam cum ultrices. In magna lorem tristique volutpat praesent, nibh adipiscing eu eget nec eget, nulla nibh fusce leo et voluptatem, tincidunt at vestibulum vitae iaculis amet, venenatis proin occaecat sociis congue. Nibh etiam suscipit. Elit elementum, erat lorem dui amet tristique, maecenas eros malesuada in cras nulla. Porttitor erat.

Luctus in volutpat sagittis dolor diam, ut lorem ante urna mollis ut metus, mauris nibh interdum vestibulum non vel mattis, pharetra veniam in lobortis quis eleifend. Egestas lectus dignissim sem tempus tincidunt libero. Aliquet in auctor ad, ipsum dolor per eget condimentum, cras ut nulla tempore lorem ultricies, amet sit arcu adipiscing. Eu class, et blandit at viverra ac et, platea praesent, ante ipsum quisque in cursus, neque in libero in dignissim. Odio sodales mi.</div>
        </div>
        <div class="col2">left menu</div>
        <div class="col3">right menu</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
Ich möchte den mittleren Bereich gerne 639 Pixel breit und die beiden äusseren jeweils
158 Pixel breit machen (daraus ergibt sich dann einen Gesamtbreite von 955 Pixel, was für 1024 optimal sein sollte)
Wie kann/muss ich die prozentuellen Angaben so anpassen, dass ich auf mein gewünschtes Ergebnis komme?
Der mittlere Content-Bereich muss noch einmal in einen Header und 2 Spalten, für Menü und Content unterteilt werden...

DANKE!
atmosfear

Geändert von atmosfear (22.07.2008 um 10:43 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.07.2008, 10:27
k.A. aber davon viel
neuer user
 
Registriert seit: 13.08.2007
Ort: Oberbayern
Beiträge: 47
Non3 befindet sich auf einem aufstrebenden Ast
Standard

Ich würde vll. mir noch das ein oder andere CSS tutorial ansehen.

Du hast 8 DIV's ineinander verschachtelt, 2x eine #header id, dem body tag 100% width gegeben, dann dem body-tag noch eine min-width von 955px... Also ich glaube da scheitert es noch am grundsätzlichen.

Vll solltest du ein solch einfaches layout einfach mal versuchen selbst zu schreiben, wenn du sehr wenig ahnung hast - anstatt ein fertiges layout nehmen und dies anzupassen.
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
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 12:25
Banner neben CSS Layout platzieren? delaspuke CSS 19 29.12.2010 22:08
Hilfe bei gesamten CSS Layout mexxat CSS 0 22.08.2007 13:40
3 spaltiges Layout, die 100.000te Speedoo CSS 21 18.08.2006 10:13
includes bei css layout dan CSS 2 10.03.2004 18:21


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