Antworten zum Thema „Design in CSS umsetzen“

DaRocco · 15.06.2009

Ich möchte mich jetzt auch mal daran machen meine erste Seite in CSS aufzubauen.

Bis jetzt habe ich alles mit Tabellen gemacht aber nun möchte ich auch auf den Pfad der Erleuchtung kommen

Eine Grundidee habe ich schon...

Nun habe ich mir überlegt, wie ich das in CSS umsetzen könnte, dazu muss ich ja boxed denken hat man mir gesagt.

Bin ich hiermit bei diesem schlichten Design auf der richtigen Seite?

Wenn nicht, was muss ich anders machen? Vielleicht habt ihr auch Verbesserungsvorschläge schon an dieser Stelle.

MFG

Rocco

Automatikk · 15.06.2009

AW: Design in CSS umsetzen

Hallo Rocco,

sieht schon einmal sehr vielversprechend aus!
Jedoch würde ich die Schrift ändern. Ist meiner meinung nach ein wenig unleserlich.

Ansonsten top!

mfg

Yaulin · 15.06.2009

AW: Design in CSS umsetzen

Skizze sieht gut aus...du musst nur aufpassen, das du nicht Prozenzangaben und feste Pixelbreiten zusammenwürfelst...da kann je nach Auflösung böses dabei rauskommen

Und wenn du mit DIV-Tags und CSS arbeitest, kannst du dich grundsätzlich immer von außen nach innen vorarbeiten.

Also erst einen Rahmen, dann darin Kopf, Navigation, Content etc... und immer weiter ins Detail... so mach ichs immer, und bisher auch mit Erfolg

cebito · 15.06.2009

AW: Design in CSS umsetzen

Mal ehrlich, mich spricht das Design nicht besonders an, hattest schon bessere Ideen. Wozu ist denn bspw. dieser Mausverfolger gedacht? Irgendwie gefällt mir dein altes Design (trotz Tabellen) besser. Und auch das ließe sich ganz einfach mit css umsetzen...

DaRocco · 15.06.2009

AW: Design in CSS umsetzen

Die Schrift hab ich jetzt nur beim shoppen reingetan damits nicht so leer aussieht....

Das mit der Mausverfolgung ist mein erster Versuch in Flash

Will da jetzt einfach mal rumprobieren wie das alles so funktioniert.

Gibts ne gute Seite, wo richtig mit Codebeispielen beschrieben wird, wie ich das umsetze?

kleinerOnkel · 15.06.2009

AW: Design in CSS umsetzen

codebeispiele für was? fürs layout mit boxen? Für css oder für flash?

DaRocco · 15.06.2009

AW: Design in CSS umsetzen

wie ich die boxen erstelle... so step by step halt

kleinerOnkel · 15.06.2009

AW: Design in CSS umsetzen

Grundlagen zum Beispiel hier: CSS-Design in 3 (oder 5) Schritten [barrierefreies-webdesign.de]

oder bei selfhtml mit Beispielen: SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)

sokie · 16.06.2009

AW: Design in CSS umsetzen

willst du in den contentbereich wirklich so eine scrollbox setzen??
da ist doch einen Verlängerung der Seite mit dem Content einfacher zu benutzen (nmM sieht das auch besser aus)
so wie das bisher aussieht brachst du nur 3boxen einen wrapper 800px breit in dem die headerbox ist und die für den content.

HTML:

<body (farbe und bg im css)>
     <wrapper>
             <headerbox bg 66px no-repeat>
                    <logo <a>(img)</a> />
                   (<object> flash</object>)
                   <navi(ul)>
                              <li><a></a></li>
                              <li><a></a></li>
                              <li><a></a></li>
                              <li><a></a></li>
                              <li><a></a></li>
                   </navi>
             </headerbox>
         <content>
         </content>
  </wrapper>
</body>

damit liesse sich das design nach der skizze bauen.
die Boxen sind dann <div>s
das ist für das design sehr einfach weil die einfach in den wrapper gebaut werden, keine floats.
der body hat in der breite sowiso immer 100%,da legst du diesen hintergrundstreifen rein, der sich nur repeat-x wiederholt.
in den body kommt der wrapper<div> mit einer breite von 800pxund den margin:0 auto;
in den wrapper der header<div> mit einer höhe von deinen oberen beiden bereichen (kann die zahlen nicht genau lesen 66 + 198px?) das hintergrundbild(header) setzt du per background-position einfach weiter runter(66px) und positionierst das Logo<img> und die navigation<ul>
und darunter der div für den content. dann den wrapper schliessen und das wars eigentlich schon.

lauffreak · 16.06.2009

AW: Design in CSS umsetzen

moin
für css Grundlagen gibts hier Tutorials, oder die Bücher css boxes von Peter Müller.
Suche mal nach css+tutorial+einführung- da gibt es ne Menge Stoff
Grüße-lauffreak

DaRocco · 17.06.2009

AW: Design in CSS umsetzen

So die ersten Anfänge hab ich gemacht:

http://www.ravox.de/ravox/CSS/index.html

Nur warum habe ich links und rechts noch diesen Abstand von dem hellen grau zum Rand?

Code:

<body bgcolor="#656060">
<div id="oben"><div align="center"><div id="kopf">kopf</div>
</div>
<div id="mitte"><div align="center"><div id="flash"><object> object>
 </div>
</div>
<div id="unten"><div align="center"><div id="content">content</div>
</div>
</body>

Die CSS Datei:

Code:

#oben {
  margin:0px;
  width:100%;
  height:66px;
  background-color:#656060;
  }
#kopf {
  margin:0px;
  width:800px;
  height:66px;
  background-color:#19366e;
  }
#mitte {
  margin:0px;
  width:100%;
  height:199px;
  background-color:#a09e9e;
  }
#flash  {
  margin:0px;
  width:800px;
  height:199px;
  background-color:#212223;
  }
#unten {
  margin:0px;
  width:100%;
  height:100px;
  background-color:#656060;
  }
#content {
  margin:0px;
  width:800px;
  height:100px;
  background-color:#FFFFFF;
  }

Tattoomaus78 · 17.06.2009

AW: Design in CSS umsetzen

ui ui ui...wassn ditte

...wassn chaos...

der code deiner seite sollte im grundlegenden so aussehen:

HTML:

<body>
<div id="wrapper">
<div id="header">ich bin der Header</div>
<div id="flash">Flashbilchen</div>
<div id="content">hier kommt dann ganz viel Text rein</div>
<div id="footer">ich bin der Footerr</div
></div>
</body>

Code:

* {
	margin:0;                             /**damit setzt du erstmal alles auf 0**/
	padding:0;
}
body {
	background-color:#656060;
background-image: url( images/Bild von deinem Streifen 1px breit.jpg);  /**Grafik erstellen für dein Body-Hintergrund**/
	background-repeat:repeat-x;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#fff;
	text-align:center;
}
#wrapper {                         /**zentriert dir den kompletten Inhalt der Seite bei Breite 800px**/
	margin:0 auto;
	width:800px;
	text-align:left;
}
#header {
	margin:0px;
	width:800px;
	height:66px;
	background-color:#19366e;
}
#flash {
	margin:0px;
	height:199px;
	background-color:#212223;
	text-align:center;
}
#content {
	margin:0px;
	height:100px;
	background-color:#FFFFFF;
	color:#000;
}
#footer {
	height:50px;
	text-align:center;
}

kleinerOnkel · 17.06.2009

AW: Design in CSS umsetzen

DaRocco schrieb:
Nur warum habe ich links und rechts noch diesen Abstand von dem hellen grau zum Rand?

Weil Deine CSS sagt width in Mitte ist 100%. Deshalb!

Aber nimm das von der Tattoomaus, das ist mal viel besser.

DaRocco · 17.06.2009

AW: Design in CSS umsetzen

Aha... interessant...

kleinerOnkel · 17.06.2009

AW: Design in CSS umsetzen

jo, das macht schon Spass mit CSS zu spielen. Ich hoffe es macht Dir Spass und bringt Dich weiter. Feintuning ergibt sich mit der Zeit.

DaRocco · 17.06.2009

AW: Design in CSS umsetzen

verstehe ich das richtig...

erst wird alles zentriert und dann nur dort linksbündig gesetzt wo es nötig ist

Aber im Grunde wäre mein Code doch auch nicht falsch gewesen oder?
Und da komme ich ohne eine Hintergrundgrafik aus.

Oder hab ich da was eingebaut, was so halt doch nicht geht?

kleinerOnkel · 17.06.2009

AW: Design in CSS umsetzen

Also im Wrapper wird es zentriert, richtig! Aber Du hast z.B. da stehen

<div id="oben"><div align="center"><div id="kopf">kopf</div>
</div>

soetwas ist nonsens. Bitte nicht als Angriff oder so verstehen. Es macht nur keinen Sinn. Wenn Du einen DIV setzt/ deklarierst, dann kannste den ja über css formatieren. Deshalb macht z.B. das <div align="center"> gar keinen Sinn!
Aber wie gesagt, lies noch etwas weiter und Du merkst es selbst.

@Tattoomaus: Du bist echt mal ein Knaller! Und das mein ich ernst und nur positiv!

Tattoomaus78 · 17.06.2009

AW: Design in CSS umsetzen

DaRocco schrieb:
verstehe ich das richtig...

erst wird alles zentriert und dann nur dort linksbündig gesetzt wo es nötig ist

Aber im Grunde wäre mein Code doch auch nicht falsch gewesen oder?
Und da komme ich ohne eine Hintergrundgrafik aus.

Oder hab ich da was eingebaut, was so halt doch nicht geht?

hm..nicht ganz...mit dem wrapper zentrierst du dein layout...der Rest ist erstmal linksbündig und bei Bedarf werden Elemente im CSS zentriert...

deine <div align="center"> sind überflüssig und wohl noch ein Überbleibsel aus dem Tabellendenken

zu deinem Code....joar..ähm...ja...zumindest solltest du jedes !!! div auch wieder schließen... *gg

gewöhn dir von Anfang an ein sauberes CSS an..dann hast du später bei komplizierteren Sachen weniger Probleme...

kleinerOnkel schrieb:
@Tattoomaus: Du bist echt mal ein Knaller! Und das mein ich ernst und nur positiv!

DaRocco · 20.06.2009

AW: Design in CSS umsetzen

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]XHTML namespace[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css">
<title>..::[URL="http://www.ravox.de::"]www.ravox.de::[/URL]..  Lifestyle Webdesign Photography</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
<div id="navibereich">
<ul id="navi">
<li><a href="index.html"><font size="2">Home</font></a></li>
<li><a href="foto.html"><font size="2">Webdesign</font></a></li>
<li><a href="location.html"><font size="2">Photography</font></a></li>
<li><a href="galerie.html"><font size="2">Galerie</font></a></li>
<li><a href="labor.html"><font size="2">Lifestyle</font></a></li>
<li><a href="kontakt.html"><font size="2">Kontakt</font></a></li>
<li><a href="impressum.html"><font size="2">Impressum</font></a></li>
</ul>
</div>
 
<div id="flash">
 <object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="[URL]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0[/URL]" border="0" width="800" height="199">
  <param name="movie" value="http://www.psd-tutorials.de/modules/Forum/images/mazda.swf">
  <param name="quality" value="High">
  <embed src="http://www.psd-tutorials.de/modules/Forum/images/mazda.swf" pluginspage="[URL="http://www.macromedia.com/go/getflashplayer"]Adobe - Adobe Flash Player[/URL]" type="application/x-shockwave-flash" name="obj1" width="800" height="199"></object>
</div>
<div id="content">hier kommt dann ganz viel Text rein</div>
<div id="footer">ich bin der Footerr</div>
</div>
</body>
</body>
</html>

Code:

* {
 margin:0;                             /**damit setzt du erstmal alles auf 0**/
 padding:0;
}
 
body {
 background-color:#656060;
 background-image : url(images/bg.jpg);
 background-repeat:repeat-x;
 font-family:Arial, Helvetica, sans-serif;
 font-size: 12px;
 color:#fff;
 text-align:center;
}
 
#wrapper {                         /**Inhalt zentriert Breite 800px**/
 margin:0 auto;
 width:800px;
 text-align:left;
}
 
#header {
 margin:0px;
 height:66px;
 width:800px;
 background-color:#19366e;
}
 
#navibereich{
  margin-top:50px;
  margin-left: 340px; 
}
 
 
#navibereich a {
  color: white;                   
  text-decoration: none;         
  padding: 4px 5px;              
}
 
#navibereich a:hover {
  color:black;
}
 
 
#navi li {
    display: inline;  
    list-style-type: none;  /*Aufzählungszeichen entfernen */
}
 
#flash {
 margin:0px;
 height:199px;
 text-align:center;
}
 
#content {
 margin:0px;
 height:100px;
 background-color:#FFFFFF;
 color:#000;
}
 
#footer {
 background-color:#656060;
 height:50px;
 text-align:center;
}

Wieso wird mein Header kleiner wenn ich die Navigation einfüge?

Siehe:

Und wie gesagt ich strebe damit keine Perfektion an, das ist eher ein Testobjekt um zu lernen, also bitte nicht allzu großen Wert auf Optik usw. legen.

kleinerOnkel · 20.06.2009

AW: Design in CSS umsetzen

weil Du margin bzw. padding in Deinem Beispiel nutzt, glaub ich auf die Schnelle gesehn zu haben. Schau mal bei navibereich a{......}

mach mal das padding weg

und schließe alle divs. Ich glaube in Deinem html ist noch eins offen!