Antworten auf deine Fragen:
Neues Thema erstellen

Design in CSS umsetzen

DaRocco

Nicht mehr ganz neu hier

AW: Design in CSS umsetzen

margin und padding vertauscht, das wars...

So nächstes Problemchen:

Das Logo wird nicht angezeigt! Warum?

Und kann ich das Flash Zeug auch in die .css packen?

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>
 
<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;
}
 
#logo {
 margin:0px;
 background-image: url(images/logo.gif);
}
 
#navibereich{
  padding-top:50px;
  padding-left: 300px; 
}
 
 
#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;
}
 
Zuletzt bearbeitet:

cebito

undefined

AW: Design in CSS umsetzen

So nächstes Problemchen:

Das Logo wird nicht angezeigt! Warum?

Weil #logo keine Größe hat und auch keinen Inhalt der den div auf 'ne gewisse Größe bringt (macht kein BG-Image)... In deinem Fall solltest du ihm 'ne feste Größe geben oder das Logo als img reinsetzen..

Edit: Grad mal reingeschaut, würd in jedem Fall ne andere hover-Farbe für die Navi nehmen, aber - Geschmackssache, wie immer ;)
 
Zuletzt bearbeitet:

DaRocco

Nicht mehr ganz neu hier

Ja wie gesagt, das ist nur zum testen und rumprobieren, bitte nicht so den großen Wert auf die Optik legen...
aber ihr habt natürlich recht.

Jetzt habe ich dem Logo eine Höhe und Breite zugewiesen, da verschwindet auf einmal meine Navi??????

Waaaaaaruuuum? :)


edit by Tattoomaus: Bitte keine Doppelposts. Benutze die edit-Funktion unten rechts.
 
Zuletzt bearbeitet von einem Moderator:

noosh

Noch nicht viel geschrieben

AW: Design in CSS umsetzen

Jetzt ist die Navi wieder da aber das Logo weg ^^


Es kann sein das ich mich jetzt verguckt habe / oder du nur ausschnitte deiner Css datei uns gepostet hast, aber wieso fängst du nicht von oben an und arbeitest dich mit float's durch? so wie ich das sehe hast du dies nicht gemacht.

So würde zumind. erstmal eine struktur reinkommen, außerdem hat es mir früher /und heute auch noch geholfen immer "border:1 solid #000;"(ohne "") zu setzen damit ich weiß wo die divs sind wie groß etc. kann man ja nachher alle wieder auf 0 setzen ^^ oder raus löschen^^ :p

Ja wie gesagt, das ist nur zum testen und rumprobieren, bitte nicht so den großen Wert auf die Optik legen...
aber ihr habt natürlich recht.

Jetzt habe ich dem Logo eine Höhe und Breite zugewiesen, da verschwindet auf einmal meine Navi??????

Waaaaaaruuuum? :)


edit by Tattoomaus: Bitte keine Doppelposts. Benutze die edit-Funktion unten rechts.


Ich glaube das ist so weil deine Box sich dann verschiebt und das Logo nach unten schiebt xD guck ma nach ob du runter scrollen kannst und das Logo da irgendwo versteckt ist :p ansonsten einfach alles nen bissel kleiner machen bis das Logo wieder dahin gerutscht ist wo es hingehört ^^ aber das ist einfacher wenn man die divs sieht sprich mit "border:1 solid #000;"


mfg
 
Zuletzt bearbeitet:

DaRocco

Nicht mehr ganz neu hier

AW: Design in CSS umsetzen

Ich spiel ja immernoch mit CSS rum und probiere...



Hier habe ich jetzt ein Problem festgestellt... seltsam aber wahr... FireFox und Co macht mir Probleme... IE funzt 1a!

Und zwar die Navi... der HoverEffekt soll wie im IE sein, nicht anders. Wo liegt das Problem, dass es so komisch im FF aussieht?

Und der Content. Habe dem Content DIV eine auto Höhe verpasst gehabt. Funktioniert im IE 1a aber im FF wird die Hintergrundfarbe überhaupt nicht angezeigt. Erst wenn ich dem Content DIV eine fixe Höhe gebe passt das auch im FF... aber das ist ja nicht Sinn und Zweck. Was muss ich da ändern?

Danke für eure Hilfe schon an dieser Stelle
 

kleinerOnkel

Nicht mehr ganz neu hier

AW: Design in CSS umsetzen

Hallo ravox,

ich glaube nicht, dass der ie alles korrekt darstellt. Für Deine Begriffe und Dein Design zwar schon, aber leider halt nicht im Sinne des W3C bzw. validem CSS.
Das ist das, was ich schonmal angesprochen habe. Der Box Fehler des IE.

schau mal bitte hier:
 

cebito

undefined

AW: Design in CSS umsetzen

Hier habe ich jetzt ein Problem festgestellt... seltsam aber wahr... FireFox und Co macht mir Probleme... IE funzt 1a!
Liegts vielleicht daran, dass das rote fehlt? FF stellt eigentlich schon richtig dar...
Code:
#navi a {
  color: white;                   
  text-decoration: none;         
  padding: 20px;
  [COLOR=Red]padding-bottom:0;  [/COLOR]            
}
 

leohh

CSS verliebt

AW: Design in CSS umsetzen

cebito hat es erklaert.
Zu deinem Hoehenproblem: zu einem float, gehoert in der Regel auch eine Art von clearing.
 

DaRocco

Nicht mehr ganz neu hier

AW: Design in CSS umsetzen

clear hab ich auch schon probiert aber hat nicht funktioniert.. hab ich es nur an der falschen Stelle gesetzt gehabt? Wo würdet ihr clearen?
 

leohh

CSS verliebt

AW: Design in CSS umsetzen

Bevor du dich fragst, wo du clearen koenntest, sollest du dich fragen, ob du ueberhaupt das floaten brauchst.

Beispiel:
Code:
<div id="header">
   <div id="logo"></div>
   <div id="navibereich">
      <ul id="navi">
         <li id="aktiv"><a href="index.html"><font size="2">home</font></a></li>
         <li><a href="design.html"><font size="2">webdesign</font></a></li>
         <li><a href="photo.html"><font size="2">photography</font></a></li>
         <li><a href="style.html"><font size="2">lifestyle</font></a></li>
      </ul>
   </div>
</div>
Wenn du das Logo, nicht direkt ueber ein img-tag einbinden moechtest, wieso bindest du es nicht gleich um den Hauptcontainer header? Wieso ist eigentlich dein Menue, das korrekter Weise eine Liste ist, noch mal zusaetzlich mit einem Container umschlossen. Hat das irgend einen semantischen Nutzen?

Waere es vllt. nicht doch ganz nuetzlich, wuerde man Paragraphen im Inhaltscontainer benutzen anstatt weiterer Divs, obwohl man aktuell nur Content transportiert und sollte man das Font-Tag wirklich noch benutzen. Im Menue, kannst du die erscheinung der Schrift direkt ueber die Ankerelemente bestimmen. Das Zauberwort heisst hier font-size

Zum float selber: Du clearst immer dann wenn du es nicht mehr brauchst, nach deinem Menue nach deinen Inhalten.

Ich hoffe die Hinweise bezueglich deines Markups gehen in Ordnung
 
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

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

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