• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Layouten mit CSS Probleme

C

cyberoner1

Neues Mitglied
Hallo Leute,

ich habe folgendes vor. Ich möchte ein Hintergrundbild fest positionieren, darüber einen dunklen Streifen setzen, welcher genauso groß ist wie die Breite des Bildes und darüber einen Text setzen. Das ganze soll auf eine fixe größe gesetzt werden.

gesagt, getan, aber es ist doch nicht ganz soooo einfach wie ich dachte, naja auf jeden Fall für mich :)

also soweit bin ich:

RDG - Ring Deutscher Gutachter GmbH

hier mein html code:
HTML: 
....
<body>
 
 <div id="leiste_oben"></div>
<ul id="text">  
<li>Experten-Suche</li>
<li>Rechtsanwälte</li>
<li>Sachverständige</li>
<li>Gutachter</li>
<li>Bau-Gutachter</li>
<li>KFZ-Gutachter</li>
<li>Medizin-Gutachter</li>
<li>etc.</li>
</ul>
</body>

und meine CSS:

Code: 
body {
  background-image:url([URL]http://cyberoner1.kilu.de/rdg/images/bg.jpg[/URL]);
  background-attachment:fixed;
  background-position:50% 1em;
  position:center;
  width: 70em;
  margin: 0px auto;
  background-repeat:no-repeat;
  height: 100.01%;
  background-color:#bec7fe;
 
  }
 
#leiste_oben {
background-color:#000080;
max-width:62.5em;
min-width:62.5em;
margin: 1.5em auto;
}
 
#text li {
position:center;
list-style-type:none;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
 font-style: italic;
 color: #ffffff;
 font-size: 14px;
 margin: 1.5em auto;
 word-spacing:10px;
  }

die leiste sieht ja schon nicht soo schlecht im Vollbild aus. Nur wenn ich das Fenster verkleiner schrumpft diese auch und der Text (es bleibt ein reiner Text ohne ein Menüauswahl, dazu komme ich später) sollte genau in diese Leiste und auch nicht verschoben werden können
 
Warum weist Du das Bild dem body zu, wenn Du nicht willst, dass der Inhalt darüber hinaus geht? Das Hintergrundbild könnte in einem Container stecken, der die gleiche Breite hat, wie das Bild. Dann kann der Inhalt auch nicht rausrutschen.

Mal jetzt abgesehen von den Problemen bei unterschiedlich großen Viewports, die Deine fixe Breite mit sich bringt.
 
Ich würde für den body lediglich die allgemeinen Angaben wie Schrift, Hintergrundfarbe etc. verwenden.
Danach einen zentrieten Wrapper entsprechend der Breite der Grafik und diesem dann die Hintergrundgrafik zuweisen.
Für den Balken kannst du eine Überschrift verwenden und die Navi dann links floaten.
 
hmm ok. habe das ganze mal geändert:
Code: 
body {
margin: 0;
padding:0;
width: 100%;
height:100%;
background-color:#bec7fe;
}

#background {
margin: 10px auto;
width: 990px;
height:800px;
background-image:url(http://cyberoner1.kilu.de/rdg/images/bg1.JPG);
background-repeat:no-repeat;
}


#leiste_oben {
background-color:#000080;
width:990px;
margin:-800px auto;

und
HTML: 
<body>
                    
 <div id="background"></div>
 <div id="leiste_oben"></div>

wie ihr seht mußte ich bei der #leiste_oben ein margin von -800px angeben und ich denke dies ist jan nicht ganz so im Sinne des Erfinders. auch bin ich mir nicht ganz sicher wie ich dann da noch einen text mit einfügen kann.

Ich hoffe ihr könnt mir da helfen
 
"Verschachteln" sollte helfen.
Den negativen Margin brauchst du nicht, wenn du die #leiste in den #background setzt:

Code: 
<body>
<div id="background">
<div id="leiste_oben"></div><!--Ende #leiste_oben-->
</div><!--Ende #background-->
 
Was ist eigentlich Dein Problem?

Wenn Du ein Block-Element hast, das 800px hoch ist, und Du danach ein Block-Element einfügst, das Du eigentlich über dem anderen haben willst, dann stimmt doch die ursprüngliche Reihenfolge Deiner Elemente nicht, klar, dass das dann 800px zu wet unten ist.

Aber auf unsere Vorschläge, die Dein Problem wirklich lösen würden, reagierst Du irgendwie gar nicht, wie es mir scheint.

Nachtrag: Okay...wenn er nicht wusste, dass man Elemente verschachteln kann, dann verstehe ich die seltsame Vorgehensweise...aber das sollte man schon wissen, das ist ja HTML-Basics.
 
so ein Mist.. ich habe das verschateln verpeilt. Danke für den Tipp hat jetzt alles gut geklappt. Und vielen Dank für die Hilfe
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben