zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Tabellenloses Layout mit dreispaltigen Kopf, dreispaltigen Hauptteil und Footer

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.11.2013, 21:59
www.VG-company.com
neuer user
Thread-Ersteller
 
Registriert seit: 01.11.2013
Beiträge: 3
www.VG-company.com befindet sich auf einem aufstrebenden Ast
Frage Tabellenloses Layout mit dreispaltigen Kopf, dreispaltigen Hauptteil und Footer

Hallo liebe Community,
Dies ist mein erster Beitrag, also seid mir wegen eventuellen "Fehlern" bitte nicht böse, die können gerne gegessen werden

So soll das ganze aussehen

Ich versuche mich aktuell an einem Layout mit einem Kopf, einem Hauptteil und einem Footer. Das Layout setzt ist liquid, das Problem was ich habe beschränkt sich jedoch auf die korrekte Anordnung bzw. den Zeilenumbruch der Div's Der Kopf, welcher als #top deklariert wurde, besteht aus 3 Div's der #logo, der #navi und der #login Div. #top ist fixed. Anschliessend soll darunter der Hauptteil folgen, welcher sich aus einer #left, einer #main und einer #right div zusammen setzt. Die #left und #left Div's bestehen wiederum aus kleinen .ad Klassen welche untereinander angeordnet sind und im #mid ist eine #title div und darunter die #content. Abschliessend folgt unter der #mid div der Footer, welcher #footer heißt.

Dies ist mein CSS-Code:
Code:
@charset "utf-8";
/* CSS Document */
* {
	margin:0px;
	padding:0px;
	border:0px;
	overflow:visible;
	text-align:center;
}

#wrapper {
	min-height:100%;
	width:100%;
	max-width:100%;
	max-width:100%;
}

#top {
	height:10%;/* perfect version later */
	position:fixed;
}

.logo {
	width:25%;
	height:100%;
	position:fixed;
	float:left;
}

.navi {
	width:50%;
	height:100%;
	position:fixed;
	float:left;
	
}

.login {
	width:25%;
	height:100%;
	position:fixed;
	float:left;
}

#left {
	width:25%;
	float:left;
}

#mid {
	width:45%;
	max-width:50%;
	float:left;
}

#main {
	width:100%;
	height:100%;
}

#title {
	width:100%;
}

#content {
	width:100%;
}

#footer {
	height:100%;
	width:100%;
}

#right {
	width:25%;
	float:left;
}

/* classes */

.ad {
}
Dieser Code enstammt der Layout.css, die anderen Stylesheets dienen nur Farben etc.


Und hier der HTML-Code:
HTML-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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="stylesheet" type="text/css" href="classes.css" />
<link rel="stylesheet" type="text/css" href="design.css" />
<link rel="stylesheet" type="text/css" href="fonts.css" />
<link rel="stylesheet" type="text/css" href="specials.css" />
</head>

<body>
<div id="wrapper">
  <div id="top">
    <div class="logo">
      BILD
    </div>
    <div class="navi">
      <a>Link1</a>
      <a>Link2</a>
      <a>Link3</a>
      <a>Link4</a>
      <a>Link5</a>
    </div>
    
    <div class="login">
      <form>
      <input placeholder="Benutzername"/>
      <input placeholder="Password"/>
      <input value="Anmelden"/>           
      </form>
    </div>
  </div>
    <div id="left">
      <div class="ad">
        Werbung
      </div>
      <div class="ad">
        Werbung
      </div>
      <div class="ad">
        Werbung
      </div>
      <div class="ad">
        Werbung
      </div>
    </div>
    <div id="mid">
      <div id="main"><!-- beinhaltet titel, inhalt -->
        <div id="title">
        Title
        </div>
        <div id="content">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </div>        
      </div><!-- end of #main -->
  </div>
  <div id="right">
        <div class="ad">
          Werbung
        </div>
        <div class="ad">
          Werbung
        </div>
        <div class="ad">
          Werbung
        </div>
        <div class="ad">
          Werbung
        </div>
  </div>    
  <div id="footer">
  copyright ...
  </div>
</div>
</body>
</html>

Und unter Layout ist der Versuch zu sehen

Ich hoffe ihr könnt mir weiterhelfen ich sitze da schon ewig dran

Vielen Dank im Vorraus
Angehängte Grafiken
Dateityp: jpg layout.jpg (258,1 KB, 4x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.11.2013, 22:25
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard ???

und was genau ist dein problem?
__________________
Gruss Dieter

Vegetarier essen meinem Essen das Essen weg.
Und unsere Norweger sind reine Karnivoren.

selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.11.2013, 22:29
www.VG-company.com
neuer user
Thread-Ersteller
 
Registriert seit: 01.11.2013
Beiträge: 3
www.VG-company.com befindet sich auf einem aufstrebenden Ast
Standard

Ich krieg es nicht hin, dass sowohl die Kopf Div als auch die Hauptteil div dreispaltig ist. Ein Tabellenloses Layout / 2- oder 3-Spalten-Layout mit CSS ist kein Problem
Mit Zitat antworten
  #4 (permalink)  
Alt 02.11.2013, 02:01
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard

[Invalid] Markup Validation of http://vg-company.com/test/index.php - W3C Markup Validator

W3C CSS Validator results for http://vg-company.com/test/index.php (CSS level 2.1)
__________________
Gruss Dieter

Vegetarier essen meinem Essen das Essen weg.
Und unsere Norweger sind reine Karnivoren.

selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS
Mit Zitat antworten
  #5 (permalink)  
Alt 02.11.2013, 11:51
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

einfaches Beispiel mit fester Breite. Kann man beliebig anpassen.
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style type="text/css">
	* {padding: 0; margin: 0;}
	body {font: 100%/1.5 sans-serif;}
	.wrapper {width: 990px; margin: 0 auto;}
	.logo, .login, .left, .right {width: 25%; float: left;}
	.navi, .main {width: 50%; float: left;}
	.logo, .login, .title, .footer {background: #FF8080;}
	.navi, .content, .left, .right {background: #ccc;}
	p {padding: .5em 1em;}
	.cf:before, .cf:after {content:" "; display:table;}
	.cf:after {clear:both;}
	.cf {*zoom:1;} /* for IE 6/7 (trigger hasLayout) */
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="top cf">
			<div class="logo">#logo</div>
			<div class="navi">#navi</div>
			<div class="login">#login</div>
		</div>
		<div class="mid cf">
			<div class="left">#left</div>
			<div class="main">
				<div class="title">#title</div>
				<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, asperiores amet quaerat delectus sapiente quo commodi perspiciatis assumenda. Ab, eius ratione accusantium provident cupiditate eveniet consectetur tempore id voluptatibus illo.</p>
					<p>Cupiditate, cum, adipisci ducimus cumque delectus possimus quibusdam libero fugiat animi dolorem eveniet optio minima quas aliquam facilis. Quas earum quasi vero numquam vitae temporibus quis minus voluptatum ut ullam.</p>
					<p>Porro, soluta, mollitia, natus culpa quibusdam sunt vero aliquid architecto sit officia nulla accusantium dolor. Error, explicabo, deleniti, accusamus eaque dolor nulla nihil dicta exercitationem dolorum quae optio aspernatur veritatis.</p>
					<p>Ab, consectetur, doloribus non ducimus impedit quia architecto fugiat sapiente facilis? In aspernatur sint explicabo! Tempora, fuga, eos, repudiandae amet cumque sed voluptatum ad expedita excepturi magnam quos nesciunt alias!</p></div>
				</div>
				<div class="right">#right</div>
			</div>
			<div class="footer">#footer</div>
		</div>
	</body>
	</html>
wenn .top fixiert sein soll:
Code:
	* {padding: 0; margin: 0;}
	body {font: 100%/1.5 sans-serif;}
	.wrapper, .top {width: 990px; margin: 0 auto;}
	.top {position: fixed; height: 30px;}
	.mid {padding-top: 30px;}
	.logo, .navi, .login {height: 100%;}
	.logo, .login, .left, .right {width: 25%; float: left;}
	.navi, .main {width: 50%; float: left;}
	.logo, .login, .title, .footer {background: #FF8080;}
	.navi, .content, .left, .right {background: #ccc;}
	p {padding: .5em 1em;}
	.cf:before, .cf:after {content:" "; display:table;}
	.cf:after {clear:both;}
	.cf {*zoom:1;} /* for IE 6/7 (trigger hasLayout) */
Mit Zitat antworten
  #6 (permalink)  
Alt 02.11.2013, 16:29
www.VG-company.com
neuer user
Thread-Ersteller
 
Registriert seit: 01.11.2013
Beiträge: 3
www.VG-company.com befindet sich auf einem aufstrebenden Ast
Lächeln

Vielen Dank Manfred, werds ausprobieren

Wandel ich dann in ein liquides Layout um, aber das sollte kein Problem sein


Grüße VG company
Mit Zitat antworten
Antwort

Stichwörter
dreispaltig, footer, hauptteil, kopf, liquid layout

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
Untermenü im IE nici CSS 10 22.06.2009 22:19
Höhe in einem dreispaltigen Layout sliver2203 CSS 4 24.02.2009 11:55
Layout - footer und layer[links] - Probleme - (CSS-Anfänger) Basti_LRT CSS 1 08.10.2007 23:03
Footer Problem (3 spaltiges Layout, variable Höhe) Lofesto CSS 2 23.07.2007 17:13
Problem mit dreispaltigem Layout mit Hintergrundmuster und Footer G321 CSS 2 09.07.2007 01:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:21 Uhr.