mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 25.11.2017 10:49 Benutzername: Passwort: Auto-Login

Thema: CSS Layout vom 23.10.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS Layout
Autor Nachricht
Micha02
Threadersteller

Dabei seit: 04.08.2004
Ort: Hilden
Alter: -
Geschlecht: Männlich
Verfasst Di 23.10.2007 18:58
Titel

CSS Layout

Antworten mit Zitat Zum Seitenanfang

Hallo,

bin was das Layouten mit css und div containern etc. angeht nicht besonders fit. Hab halt bis jetzt immer mit Tabellen gearbeitet. Möchte nun das folgende Layout in css umsetzten, komm da allerdings nicht weiter. Was mir da Probleme bereitet sind die (Hintergrund) Grafiken bzw. wie man diese übereinander legen kann. Hab also eine Hintergrundgrafik auf der eine weitere Grafik liegen soll und auf dem Hintergrund der Navigation halt auch. Bei meiner "Programmierung" bekomm ich zwar die Navigation (Links) zentriert auf den Hintergrund allerdings wird dieser unterhalb wiederholt. Ich hoffe ich hab mich einigermaßen verständlich ausgedrückt. Kann sich das vielleicht einer mal ansehen und Tipps geben?

MfG
Micha


So soll´s mal aussehen:




So siehts im Moment aus:





Code html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<head>
<title>Prototypestudio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/proto.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
   <div id="header"></div>
   <div id="navigation">
   <a href="#">INDEX</a>
   <a href="#">PROFIL</a>
   <a href="#">PORTFOLIO</a>
   <a href="#">LINKS</a>
   <a href="#">KONTAKT</a>
   <a href="#">IMPRESSUM</a>
   </div>
    <div id="menu_bg"></div>
   <div id="content"></div>
</div>


</body>
</html>


Code css Datei:

Code:

body
   {
      margin: 0;
      padding: 0;
      font-family : "Georgia", Trebuchet MS , Times, serif;
      text-align: center;
      color: #9C9B9B;
      background-color: #0F1112;
   }
   
   a:link
   {

        color: #BEBDBD;

        text-decoration: none;

     }
     a:visited
    {

        color:#BEBDBD;

        text-decoration: none;

     }
     a:hover{color:#FFFFFF;

        text-decoration: none;

     }
     a:active
    {
       color:#FFFFFF;
        text-decoration: none;

     }
   
   #container
   {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      text-align: left;
      background-color: #0F1112;
   }
   
   #header
   {
       height: 200px;
      background-image: url(../images/bg.jpg);
      
    }
   
   #navigation
   {
    font-family : "Georgia", Trebuchet MS , Times, serif;
    font-weight: bold;
    font-size: 75%;
    word-spacing: 2.5em;
    text-align: center;
    padding:13px 0px;
    background-image: url(../images/menu_bg.jpg); height: 42px; 
   
   }



//EDIT by Sarky
Bitte Code-Tags verwenden!


Zuletzt bearbeitet von Sarky am Di 23.10.2007 21:10, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
choise

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 29
Geschlecht: Männlich
Verfasst Mi 24.10.2007 07:31
Titel

Antworten mit Zitat Zum Seitenanfang

bei navigation einfach mal das probieren:
also anstatt background image.....

Code:

background-image: url(../images/menu_bg.jpg);
background-repeat: repeat-x;
height: 42px; // Halt so groß wie des einmal ist


mfg choise
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Micha02
Threadersteller

Dabei seit: 04.08.2004
Ort: Hilden
Alter: -
Geschlecht: Männlich
Verfasst Mi 24.10.2007 13:45
Titel

Antworten mit Zitat Zum Seitenanfang

choise hat geschrieben:
bei navigation einfach mal das probieren:
also anstatt background image.....

Code:

background-image: url(../images/menu_bg.jpg);
background-repeat: repeat-x;
height: 42px; // Halt so groß wie des einmal ist


mfg choise



Vielen Dank choise,

das hat funktioniert. Kann man jetzt noch eine Hintergrundgrafik zwischen die vorhandene und die Navigation im Vordergrund setzen? Also wie im oberen Layout Entwurf (hoffentlich) zu erkennen. Oder sollte man das anders lösen?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 44
Geschlecht: Männlich
Verfasst Mi 24.10.2007 16:42
Titel

Antworten mit Zitat Zum Seitenanfang

Micha02 hat geschrieben:



Vielen Dank choise,

das hat funktioniert. Kann man jetzt noch eine Hintergrundgrafik zwischen die vorhandene und die Navigation im Vordergrund setzen? Also wie im oberen Layout Entwurf (hoffentlich) zu erkennen. Oder sollte man das anders lösen?


du meinst also deine headergrafik (prototypestudios)?
du kannst einen div darüber setzen und mit einem z-index versehen...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Micha02
Threadersteller

Dabei seit: 04.08.2004
Ort: Hilden
Alter: -
Geschlecht: Männlich
Verfasst Mi 24.10.2007 19:38
Titel

Antworten mit Zitat Zum Seitenanfang

pixelpapst303 hat geschrieben:
Micha02 hat geschrieben:



Vielen Dank choise,

das hat funktioniert. Kann man jetzt noch eine Hintergrundgrafik zwischen die vorhandene und die Navigation im Vordergrund setzen? Also wie im oberen Layout Entwurf (hoffentlich) zu erkennen. Oder sollte man das anders lösen?


du meinst also deine headergrafik (prototypestudios)?
du kannst einen div darüber setzen und mit einem z-index versehen...



Ja genau, werd das mal ausprobieren. Vielen Dank. *Thumbs up!*

MfG
Micha
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [CSS Layout] An Fenstergröße anpassendes Layout
css layout
CSS Layout
CSS Layout
CSS-Layout.. wie?
CSS-Layout
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.