✔ Problem mit Hintergrundfarbe / Image

Duergy

Duergy

Mitglied
Halli Hallo ich habe da so ein kleines Problem.

erst einmal der Beispiel Code
HTML: 
<html>
<head>
<title>titel</title>
<style type="text/css">
#testmenu{
display: block;
padding: 0;
margin: 0;
background: #FF6600;
display:block;
}
</style>
</head>
<body>
<div id="testmenu">
dddfdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
<br>
dddfdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
<br>
dddfdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
</body>
</html>

Wenn wir diese Datei jetzt öffnen, sehen wir einen Orangenen Balken mit vielen "d".

Wenn wir jetzt die Breite des Browsers halbieren sehen erscheint unten ein scrollbalken. Den schieben wir ganz nach rechts. Wo ist das Orange hin?

Im prinzip will ich wissen wie ich den Hintergrund auf die Komplette breite bekomme.
 
Moin,

tausch in deinem gezeigten CSS-Code die doppelt vorhandene display:block-Deklaration gegen float:left aus.

mfg Maik
 
Hallo Maik,
danke dir für deine Antwort in der Demo-Datei funktioniert das gut.

Nun habe ich aber das Problem am lebendem Objekt

css für das menü:
Code: 
#slidemenu{
background: url(../img/menue_bg.jpg);
display: block;
padding: 0;
margin: 0;
float: left;
}

.slidetabsmenu{
float:left;
font-size: 12px;
line-height:normal;
margin: auto auto;
width: 100%
}
.slidetabsmenu ul{
list-style-type: none;
padding:0;
width: 990px;
margin: 0 auto;
}

.slidetabsmenu li{
display:inline;
margin:0;
padding:0;
}

der html code
HTML: 
<div id="slidemenu" class="slidetabsmenu">
<ul>
<li><a href="/startseite" id="link_01"><span>&nbsp;</span></a></li>
<li><a href="/vserver" id="link_02" rel="dropmenu2_c"><span>&nbsp;</span></a></li>
<li><a href="/rootserver" id="link_03" rel="dropmenu3_c"><span>&nbsp;</span></a></li>
<li><a href="/webhosting" id="link_04" rel="dropmenu4_c"><span>&nbsp;</span></a></li>
<li><a href="/domains" id="link_05" rel="dropmenu5_c"><span>&nbsp;</span></a></li>
<li><a href="/gameserver" id="link_06" rel="dropmenu6_c"><span>&nbsp;</span></a></li>
<li><a href="/voiceserver" id="link_07" rel="dropmenu7_c"><span>&nbsp;</span></a></li>
<li><a href="#" id="link_08" rel="dropmenu8_c"><span>&nbsp;</span></a></li>
<li><a href="#" id="link_09" rel="dropmenu9_c"><span>&nbsp;</span></a></li>

<li><a href="#" id="link_10" rel="dropmenu10_c"><span>&nbsp;</span></a></li>
<li><a href="#" id="link_11" rel="dropmenu11_c"><span>&nbsp;</span></a></li>
<li><a href="/angebote-shop" id="link_12" rel="dropmenu12_c"><span>&nbsp;</span></a></li>
</ul>
</div>

Mit dem Logo darunter habe ich ähnliche Probleme aber evtl. hilft mir ja dein Tipp das selber zu lösen
 

Anhänge

  • frei.jpg
    frei.jpg
    6,5 KB · Aufrufe: 32
Das lebende Objekt ist entgegen deinem gestrigen HTML-Code nun ein <ul>-Element mit absoluter Breite, das innerhalb von #slidemenu horizontal zentriert werden soll, dessen Hintergrundbild weiterhin links und rechts sichtbar ist, wenn die Viewport-Breite die deklarierten 990px unterschreitet, was die Sachlage nun grundlegend ändert, und anstelle meiner empfohlenen float:left-Regel eine Angabe zur Mindestbreite erfordert.

CSS: 
#slidemenu{
background: url(../img/menue_bg.jpg);
display: block;
padding: 0;
margin: 0;
min-width:1050px; /* Wert ist von mir hier frei gewählt, und erzeugt links und rechts vom Menü einen Überstand von 30px */
}

Für die Klasse .slidetabsmenu entfällt ebenso float:left.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück