XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Ich kriege mein CSS Layout nicht hin :( (http://xhtmlforum.de/showthread.php?t=38790)

ConiKost 17.02.2006 12:48

Ich kriege mein CSS Layout nicht hin :(
 
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo!
Ich bin hier neu! Ich bin momentan dabei einen Einstieg in xhtml + css hinzukriegen :)

Aber leider will mir ein basis layout nicht gelingen ... :(

Ich will das so haben, dass es aussieht wie auf layout.jpg ... sry für die schlechte quali. Angang meine index.html und meine style.css ...

Und ich will das vorallem so haben, dass bei veränderung der browsergröße sich die seite anpasst. Leider will das mit dem rechtem Menü nicht gelingen.

Und die "div" Fuss kann ich einfach nicht unten possitionieren.

Bitte um Ratschlag.

mazzo 17.02.2006 13:07

Mal ab davon, dass sicher viele kein RAR installiert haben und somit ein Online- oder hier gepostetes Beispiel effektiver wäre.

Hast Du Dir die Beispiele auf css4you.de mal angeschaut? Davon ausgehend lässt sich schon ein grobes Skellet aufbauen welches auf die Seitengröße angepasst ist.

ConiKost 17.02.2006 13:14

Hi!
Jap, CCS4You lese ich gerade, habe halt momentan meine Probleme noch damit ...

mazzo 17.02.2006 13:29

Tja, ich gehör auch zu denen die kein RAR haben...

ConiKost 17.02.2006 13:36

Hmm, so, ich bin da jetzt weiter ... alles klappt bis auf eine kleine Sache

Die Sache ist wie folgt. Ich will jetzt unten eine Fusszeile einrichten. Die soll dynmisch unter dem gelben Teil immer sein! Wie kann ich das einrichten?

Sry für die schlechten Farben! Die sind nur für mich da um zu sehen wie die divs angeordnet sind.

index.html :

Code:

<?xml version="1.0" encoding="iso-8859-15"?>
<!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" xml:lang="de">
<head>
        <link rel="stylesheet" type="text/css" href="Metabox.css"/>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-15"/>
        <meta name="Author" content="ConiKost" />
        <meta name="description" content="Der Met@box 500 Server - by ConiKost"/>
        <meta name="keywords" content="ConiKost Metabox"></meta>
  <title>Der Met@box 500 Server - by ConiKost</title>
</head>
<body>
        <div id="Website">
                <div id="Kopf">
                        <h1>Willkommen auf der Met@box 500</h1>
                </div>
                <div id="MenuL">
                       

Menü 1</p>
                 

Menü 2</p>
                 

Menü 3</p>
                 

Menü 4</p>
                 

Menü 5</p>
                </div>
                <div id="Inhalt">
                       

DAS IST DER INHALT!</p>
                       

DAS IST DER INHALT!</p>
                       

DAS IST DER INHALT!</p>
                       

DAS IST DER INHALT!</p>
                       

DAS IST DER INHALT!</p>
                       

DAS IST DER INHALT!</p>
                       

DAS IST DER INHALT!</p>
                       

DAS IST DER INHALT!</p>
                       

DAS IST DER INHALT!</p>
                       

DAS IST DER INHALT!</p>
                       

DAS IST DER INHALT!</p>
                       

DAS IST DER INHALT!</p>
                       

DAS IST DER INHALT!</p>
                       

DAS IST DER INHALT!</p>
                       

DAS IST DER INHALT!</p>
                </div>
                <div id="MenuR">
                       

Menü 6</p>
                 

Menü 7</p>
                 

Menü 8</p>
                 

Menü 9</p>
                 

Menü 10</p>
                </div>
                <div id="Fuss">
                       

(c) 2006 by ConiKost</p>
                </div>
  </div>
</body>
</html>

Style.css

Code:

/* Met@box 500 Website - CSS Datei */

body {
  color:white;
  background-color:black;
}

#Website {
  background-color:red;
  margin:auto;
  width:80%;
}

#Kopf {
  background-color:blue;
  text-align:center;
}

#MenuL {
  background-color:green;
  float:left;
  text-align:center;
  width:10%;
}

#Inhalt {
  background-color:yellow;
  float:left;
  margin-left:2.5%;
  margin-right:2.5%;
  width:75%;
}

#MenuR {
  background-color:green;
  float:right;
  text-align:center;
  width:10%;
}

#Fuss {
  background-color:orange
}


mazzo 17.02.2006 13:53

Ein Fall für den heiligen Gral (anderes Wort für ein perfektes 3-Spalten-Layout)! Lies Dir das durch, ist nicht so schwer.

Wichtig ist das clearen wenn Du floatest. Beschreibungen dazu werden hier täglich mehrfach gepostet. Hier ein sehr guter Thread dazu:
http://www.xhtmlforum.de/viewtopic.php?t=3772

Dann empfehle ich Dir ein globales
Code:

* {margin: 0; padding: 0;}
und das Menu in eine Liste zu schreiben, nicht in

s. Beispiele für schicke Menulisten gibts in meiner Sig.

fricca 17.02.2006 13:54

Zitat:

Zitat von ConiKost
Ich will jetzt unten eine Fusszeile einrichten. Die soll dynmisch unter dem gelben Teil immer sein! Wie kann ich das einrichten?

clear:both für den Fuß.

Lesestoff:
http://www.andreas-kalt.de/webdesign.../float-theorie
http://www.complexspiral.com/publica...aining-floats/


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:32 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023