css-Design

K

kare

Aktives Mitglied
Hallo

Bis jetzt habe ich meine Seiten immer mit Tabellen erstellt. Nun will ich die Seiten jedoch mit CSS-Layouten. Ich habe darüber schon einiges gelesen, doch irgenwie blick ich da einfach nicht durch. Es gibt eine Reihe von Vorlagen im Web, doch wenn ich diese versuche anzupassen, dann klappt das nie.

Ich habe eine Datei angehängt wie das Design aussehen soll. Eigentlich ganz einfach. Der Inhalt wird durch einen Rahmen umgeben, der aus Bilder besteht. Kann mir da jemand einen Tip geben oder einen Link zu einer solchen Vorlage?

Gruss kare

Anhang anzeigen 2

 
XHTML Markup:
CODE
<div id="container">
<div id="head">

<div id="leftcol">Linke Spalte</div>
<div id="righcol">Rechte Spalte</div>
<div id="content">Inhalt</div>

<div id="footer">Footer</div>
</div>



CSS:

CODE
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 62.5%;
color: #333;
background-color: #fff;
text-align: center;
}
#container {
width: 750px;
margin: 0 auto;
padding-bottom: 64px;
}
#head {
padding: 0;
margin: 0;
width: 750px;
height: 112px;
}
#leftcol {
width: 50px;
float: left;
}
#rightcol {
width: 50px;
float: right;
text-align: left;
}
#content {
margin: 0 50px 0 50px;
text-align: left;
}
#footer {
clear: both;
width: 750px;
text-align: left;
}



So im Groben, nicht getestet.
 
Danke für den Link. Bin dort auch fündig geworden.

Nun schlage ich mich mit dem IE herum. Die Siete wird im Firefox und Safari gut dargestellt. Im IE jedoch nicht. Die Seite wird im IE nicht zentriert und auch solnst schleichen sich kleiner Fehler ein. Wo könnte das Problem liegen?

CODE <body>

<!-- Begin Wrapper -->
<div id="wrapper">

<!-- Begin Header -->
<div id="header"><img src="images/header.jpg" alt="" width="950" height="113" />
<div id="header2"></div>
<!-- End Header -->

<!-- Begin Left Column -->
</div>
<div id="leftcolumn"><img src="images/left.jpg" alt="" width="150" height="787" /></div>
<div align="left"><!-- End Left Column -->

<!-- Begin Content Column -->
</div>
<div id="content">
</div>
<!-- End Content Column -->

<!-- Begin Right Column -->
<div id="rightcolumn"><img src="images/right.jpg" alt="" width="150" height="787" /></div>
<!-- End Right Column -->

<!-- Begin Footer -->
<div id="footer"><img src="images/footer.jpg" alt="" width="950" height="100" /></div>
<!-- End Footer -->

</div>
<!-- End Wrapper -->

</body>


Und hier noch die CSS:


CODE
* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background: #009900;
}
#wrapper {
margin: 0 auto;
width: 950px;
}
#header {
color: #333;
width: 950px;
float: left;
padding: 0px;
border: 0px solid #ccc;
height: 113px;
margin: 0px 0px 0px 0px;
background: #FFFFFF;
}
#leftcolumn {
color: #333;
border: 0px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 0px;
height: 787px;
width: 150px;
float: left;
}
#content {
float: left;
color: #333;
border: 0px solid #ccc;
background: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 767px;
width: 630px;
display: inline;
}
#rightcolumn {
color: #333;
border: 0px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 0px;
height: 787px;
width: 150px;
float: left;
}
#footer {
width: 950px;
clear: both;
color: #333;
border: 0px solid #ccc;
background: #BD9C8C;
height: 100px;
margin: 0px 0px 10px 0px;
padding: 0px;
}



 
Hallo Kare

Ich kann dir wirklich Little Boxes empfehlen, wenn du längerfristig CSS lernen willst. Es gibt 2 Bücher (kenne nur Teil 1) und eine Video2Brain-Dvd.

Alles schön aufeinander aufbauend, speziell für Einsteiger gedacht (Auch solche welche bis dato nur mit Tabellen gearbeitet haben), und ein Sympatischer Autor.

http://little-boxes.de/

http://little-boxes.de/weblog/wp-content/u...oxes_teil01.jpg

Schöne Grüsse aus "oranje Basel"

Lukas
 
@kare: Schreib mal folgendes in deinen body {} im CSS

CODE
text-align: center;



wink.gif
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben