zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout mit Div Containern erstellen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.05.2014, 14:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.05.2014
Beiträge: 2
tigerpaw befindet sich auf einem aufstrebenden Ast
Ausrufezeichen Layout mit Div Containern erstellen

Hallo liebe Forumsmitglieder,

Ich möchte gern ein Layout nach diesem Gerüst aufbauen:

http://www.fotos-hochladen.net/uploa...c4expzbljh.jpg

Unter dem Logo soll noch ein dropdown menü eingefügt werden. Die zwei kleinen Bilder im Header sind Bilder die verlinkt werden soll. ich bekomme es nicht hin, das ich 3 container untereinander habe : (. Ich habe mir jetzt ein Grundgerüst nachgebaut, aber wenn ich versuche mehrere Container untereinander zu erstellen, sieht man nichts davon.

Die 3 unteren Kästchen sind Bilder, die aber nicht verlinkt werden und dann kommt noch der footer. Weiss jemand Rat? Wäre echt super lieb, muss heute noch vorankommen damit. Vielen Dank im voraus

Mein bisheriger 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>Unbenanntes Dokument</title>
<link rel="stylesheet" href="design-style.css">
</head>


<body>
<div id="webseite">
test test

<div id="header">
<h1>Hallo Hallo</h1>
</div>

<div id="main">
	<div id="menu">

</div>


<div id="inhalt">

	</div>
</div>

<div id="footer">

</div>

</div>
</body>
</html>
CSS:

Code:
@charset "utf-8";
/* CSS Document */

body{
background-color:lightyellow;
text-align:center;
}

#webseite{
width:980px;
margin:0 auto;
}

#header{
width:980;
height:150px;
background:orange;
}

#header h1{
padding:50px;
font-size:60px;
font-weight:bold;
font-family:Courier;
}

#main{
width:980px;
}

#menu{
float:right;
width:200px;
height:300px;
background:yellow;
margin-top:10px;
margin-bottom: 10px;
border-radius: 2px;
-moz-border-radius: 2px;
webkit-border-radius: 2px;
-o-border-radius:2px;

}

#inhalt{
float:left;
width:770px;
height:300px;
background-color:darkred;
margin-top:10px;
margin-bottom:10px;
-moz-border-radius: 2px;
webkit-border-radius: 2px;
-o-border-radius:2px;
}

#footer{
width:980px;
height:30px;
background:orange;
border-radius:5px;
-moz-border-radius: 2px;
webkit-border-radius: 2px;
-o-border-radius:2px;
margin-top:20px;
clear:both;
}

Ich schaffe es leider nicht den code zu umzubauen das ich das Grundgeüst um die Boxen erweitern kann . Die 2 oberen Kästchen und 3 unteren sollen dann durch Bilder ersetzt werden, also eher Platzhalter sein.

Vielleicht kann mir jemand helfen, wäre super lieb !

Danke
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.05.2014, 14:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

um dir helfen zu können müsste man schon mehr Inhalt der Seite haben. Also den Text und die Bilder.

Ein Online-Beispiel deiner aktuellen Seite wäre am besten.

Zunächst solltest du bei einer neuen Seite auf HTML5 und CSS3 umsteigen. XHTML wird bereits seit 2006 nicht mehr weiterentwickelt und es kann passieren, die die Browserhersteller die Unterstützung einfach mal einstellen, um unnützen Ballast abzuwerfen.

Im Prinzip liegst du mit deiner drei-teilung richtig. Bloß komplett ohne Inhalt läßt sich optisch kaum nachvollziehen, wie die Seite angezeigt wird.

Und dann ist noch die Frage, ob die Seite flexibel werden soll und wie sie auch Smartphones und Tablets angezeigt werden soll.

Im Moment baust du ja ein starres Tabellenlayout mit anderen Mitteln. Das ist HTML aus dem letzten Jahrtausend.

Gruss

MrMurphy

Geändert von MrMurphy (29.05.2014 um 15:03 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.05.2014, 15:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.05.2014
Beiträge: 2
tigerpaw befindet sich auf einem aufstrebenden Ast
Standard

Hallo MrMurphy,

danke für deine schnelle Antwort . Okay ich werkeln grade noch dran rum. Und ja, die Seite soll für verschiedene Endgeräte ausgabefähig sein. Also Responsive. Ich weiß aber noch nicht genau wie ich die breakpoints setzen muss. Screens habe ich bereits für beide Modellansichten erstellt.

Ich melde mich dann nochmal falls ich nicht voran komme.
Mit Zitat antworten
  #4 (permalink)  
Alt 29.05.2014, 15:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Ich weiß aber noch nicht genau wie ich die breakpoints setzen muss.
Das hängt einzig vom Inhalt ab und nicht von den Ausgabegeräten. Deshalb ist zur Problemlösung auch der Inhalt notwendig.

Zitat:
Screens habe ich bereits für beide Modellansichten erstellt.
Da die Darstellung vom Inhalt abhängt gibt es in der Regel mehr als zwei Ansichten. Sich auf zwei Lösungen festzulegen ist auch nicht viel besser als ein starres Layout.

Gruss

MrMurphy
Mit Zitat antworten
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
2 Spaltiges Layout / Rechter div will nicht wie ich freak83 CSS 4 21.08.2013 14:49
Div Layout, variable Div-Größe IE6 bw CSS 2 17.08.2007 12:32
Hilfe beim Layout erstellen kevink CSS 9 24.06.2007 19:13
Layout Problem mit div box powerpika CSS 8 16.12.2006 13:36
div layout mit em breiten > wie ohne div umbruch machbar? rib CSS 7 21.09.2006 15:09


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:11 Uhr.