Anzeige - [Hier werben / Mediadaten]
(?) Tags raten (?) (edit)
 
Reply to this topicStart new topicStart Poll
> css-Design
Thema abonnieren | Thema versenden | Thema drucken
kare
Geschrieben am: So 1.06.2008, 12:06
Report PostQuote Post

AyomRank 3
******

Gruppe: Member (aktiv)
Beiträge: 42
Mitglied seit: 3.01.2008
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



angehängtes Bild
Angefügtes Bild
Top
PMEmail Poster
Top
 
 
Manuel Merz
Xdreams.ch
#2 Geschrieben am: So 1.06.2008, 12:44 (+00:37)
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 145
Mitglied seit: 28.04.2008
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.


--------------------
Mein Blog über Affiliate / Internet Marketing, Software Reviews und Photoshop
Top
PMEmail PosterUsers WebsiteMSN
Top
 
Crazymind
#3 Geschrieben am: Mo 2.06.2008, 06:52 (+18:08)
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 187
Mitglied seit: 25.02.2005
Guckst du hier:
http://layouts.ironmyers.com/

Grüsse, Crazy


--------------------
www.crazymind.ch - Webdesign, Bildbearbeitung, Animationen
Top
PMEmail Poster
Top
 
kare
#4 Geschrieben am: Sa 21.06.2008, 13:12 (+19d 06:19)
Report PostQuote Post

AyomRank 3
******

Gruppe: Member (aktiv)
Beiträge: 42
Mitglied seit: 3.01.2008
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;
}
Top
PMEmail Poster
Top
 
#5 Geschrieben am: Sa 21.06.2008, 14:34 (+01:22)
Report PostQuote Post

AyomRank 1
**

Gruppe: Member (inaktiv)
Beiträge: 0
Mitglied seit: --
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
Top
PMEmail Poster
Top
 
Manuel Merz
Xdreams.ch
#6 Geschrieben am: Sa 21.06.2008, 14:56 (+00:22)
Report PostQuote Post

AyomRank 4
********

Gruppe: Member (aktiv)
Beiträge: 145
Mitglied seit: 28.04.2008
@kare: Schreib mal folgendes in deinen body {} im CSS

CODE

text-align: center;


wink.gif


--------------------
Mein Blog über Affiliate / Internet Marketing, Software Reviews und Photoshop
Top
PMEmail PosterUsers WebsiteMSN
Top
 
Thema wird von 0 Benutzer(n) gelesen (0 Gäste und 0 anonyme Benutzer)
0 Mitglieder:
« Countdown mit toggle pause/weiter | Programmierung Allgemein | Videokommunikation einbinden bzw Audio »
Trackback-Url: http://www.ayom.com/track/t/24691
Dieses Thema abonnieren

Topic Options Reply to this topicStart new topicStart Poll

 


> Ähnliche Themen
Themen Titel Autor Views Antworten Letzte Aktion
Design ändern kahart 151 3 Sa 18.10.2008, 15:28
LOGO Design Wettbewerb HappyHippo 287 13 Sa 18.10.2008, 07:22
Formular input zerstört design im IE inox 219 4 Do 16.10.2008, 21:44
Kreditdomain + Design yoopi 118 0 Mi 1.10.2008, 20:15
Verkaufe Domain + Design Koly007 232 0 Di 16.09.2008, 22:27
Design + Wordpresstemplate Job kim s. 128 0 Do 11.09.2008, 09:12
suche design aufträge aerotech 158 0 Mi 10.09.2008, 21:41
Joomla Template aus Design erstellen? TGDESIGN 215 1 Fr 29.08.2008, 17:21
Web 2.0. Community Design partyspezial 242 0 Do 24.07.2008, 08:48
Suche: Unique Design slayter 290 1 Mi 23.07.2008, 06:23




Anzeige - [Hier werben / Mediadaten]



Anzeigen


[Hier werben / Mediadaten]