Antworten auf deine Fragen:
Neues Thema erstellen

Design in CSS umsetzen

DaRocco

DaRocco

Nicht mehr ganz neu hier

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
 
Zuletzt bearbeitet:

Automatikk

Automatikk

Nicht mehr ganz neu hier

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
 
Y

Yaulin

Nicht mehr ganz neu hier

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

cebito

undefined

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

DaRocco

Nicht mehr ganz neu hier

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?
 
Zuletzt bearbeitet:
sokie

sokie

Mod | Web

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

lauffreak

FotoAnfänger

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

DaRocco

Nicht mehr ganz neu hier

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

Tattoomaus78

nemesis-artgroup.de

AW: Design in CSS umsetzen

ui ui ui...wassn ditte :D ...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;
}
 
Zuletzt bearbeitet:
K

kleinerOnkel

Nicht mehr ganz neu hier

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

DaRocco

Nicht mehr ganz neu hier

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?
 
Zuletzt bearbeitet:
K

kleinerOnkel

Nicht mehr ganz neu hier

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!
 
Zuletzt bearbeitet:
Tattoomaus78

Tattoomaus78

nemesis-artgroup.de

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?
Zum Vergrößern anklicken....

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!
Zum Vergrößern anklicken....
 
DaRocco

DaRocco

Nicht mehr ganz neu hier

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.
 
Zuletzt bearbeitet:
K

kleinerOnkel

Nicht mehr ganz neu hier

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!
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 116 (Mitglieder: 2, Gäste: 114)
Robots: 182

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.528
Neuestes Mitglied
Links Stream es
Oben