zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Hintergrund-Grafik für CSS-Links!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.10.2005, 16:30
Benutzerbild von Pumpkin
XHTML+CSS Lehrling
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 05.08.2005
Ort: Lübeck
Beiträge: 170
Pumpkin befindet sich auf einem aufstrebenden Ast
Standard Problem mit Hintergrund-Grafik für CSS-Links!

Hallo,

ich hab ein kleines Problem mit meinem horizontalen (schwarz-blau) Menü. Leider schaffe ich es nicht die Hintergrundgrafik (cellpic.png) durchgehend von links nach rechts hinzubekommen. Sondern nur da wo ein Link sich befindet.

http://gothic-saga.com

CSS
Code:
#mainmenu {
background: #679ccb url(http://gothic-saga.com/design/images/cellpic.png) repeat-x;
height: 28px;
}

#mainmenu ul {
list-style-type: none;
margin-left: 1%;
}

#mainmenu ul li {
display: block;
float: left;
border-right: 0px solid #fff4d8;
padding-right: 10px;
}

#mainmenu ul li a {
display: block;
width: 100%; height:25px;
line-height: 26px;
font-size: 0.66em;
font-weight: normal;
color: #ffffff;
text-decoration: none;
background: url(http://gothic-saga.com/design/images/cellpic.png) repeat-x;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
}

#mainmenu ul li a:hover {
background: transparent;
color:#000000; ;
}
HTML
Code:
<div id="mainmenu">
<ul>[*]Link 1[*]Link 2[*]Link 3[*]Link 4[*]Link 5[*]Link 6[*]Link 7[*]Link 8[*]Link 9[*]Link 10[*]Link 11[*]Link 12[*]Link 13[*]Link 14[*]Link 15[/list]</div>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.10.2005, 17:19
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.325
E|H befindet sich auf einem aufstrebenden Ast
Standard

Ja, genau.

Das liegt eben daran, daß du die Grafik den Links zugeordnet hast …

Lösung: gib den Listenpunkten die Grafik, oder besser:

Gib’ den Listenpunkten 0 padding, den Links 0 margin, dafür den Links aber soviel padding, daß sie die gewünschte Größe erhalten.

Dann sind die Links genauso groß wie die Listenpunkte und reihen sich aneinander. Somit reihen sich auch deren Hintergrundbilder aneinander.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.10.2005, 17:37
Benutzerbild von Pumpkin
XHTML+CSS Lehrling
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 05.08.2005
Ort: Lübeck
Beiträge: 170
Pumpkin befindet sich auf einem aufstrebenden Ast
Standard

wenn ich das mache bricht alles auseinander.
Mit Zitat antworten
  #4 (permalink)  
Alt 11.10.2005, 02:03
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.325
E|H befindet sich auf einem aufstrebenden Ast
Standard

Wenn du was machst?
Lösung 1 oder 2?

Ich denke, die Lücken im Menü kommen von dem padding:10px; bei den lis.

Gib das stattdessen dem a.
Oder bricht dann alles auseinander?

Wenn du etwas 0px border gibst, kannst du es auch ganz weglassen.
Mit Zitat antworten
  #5 (permalink)  
Alt 11.10.2005, 11:05
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Manchmal sieht man den Wald vor lauter Bäumen nicht

Schon mal probiert, die Hintergrundgrafik einfach dem ul zuzuordnen?
Das sollte deine Probleme mit dem durchgehenden Hintergrund beheben.

grüsse andir
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #6 (permalink)  
Alt 13.10.2005, 16:13
Benutzerbild von Pumpkin
XHTML+CSS Lehrling
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 05.08.2005
Ort: Lübeck
Beiträge: 170
Pumpkin befindet sich auf einem aufstrebenden Ast
Standard

Ich hab das ganze nun mal anders gemacht. Doch auch hier habe ich zwei Probleme:

1. Im Mozilla sieht allles prächtig aus, doch im IE natürlich nicht. Wo muss ich nun die Anpassungen für den M$ Browser machen?

2. Ich bekomme den weissen Streifen zwischen dem Logo und dem horizontalen Menü nicht weg

http://gothic-saga.com/test

CSS
Code:
body {
font-family:Verdana;
font-size:12px;
background-color:#e0e0e0;
}

#wrap {
width: 75%;
min-height:100%;
margin: auto;
border-width: 0 1px;
border-style: solid;
border-color: #000000;
background: #ffffff;
text-align: left;
}

#logo {
height:115px;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
}

#inhalt {
float:left;
width:66%;
padding:8px;
border-left:1px solid #000000;
border-right:1px solid #000000;
text-align: justify;
}

#footer {
text-align:center;
border-top:1px solid #000000;
}

#left, #right {
width:14%;
line-height:18px;
}

#left {
float:left;
margin-left:2.5%;
}

#right {
float:right;
}

.menutitle {
font-weight:bold;
border-top:1px
}

#navcontainer ul {
padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover {
background-color: #369;
color: #fff;
}

a:link, a:visited, a:active, a:hover { 
text-decoration:none;
font-weight:bold;
color:#036;
font-size:10px;
}

a:hover { 
color:#369;
}
HTML
Code:
<body>
<div id="wrap">
<div id="logo">
[img]./design/images/logo.png[/img]</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active">Home[*]Kotor I[*]Kotor II[*]Community[*]Guestbook[/list]</div>
<div id="left">
<p class="menutitle">Infos</p>
&raquo; Review

&raquo; Screenshots


&raquo; Charaktere

&raquo; Planeten

&raquo; Völker


<p class="menutitle">Tips &amp; Tricks</p>
&raquo; Komplettlösung

&raquo; Minispiele

&raquo; Fertikeiten

&raquo; Mächte

&raquo; Ausrüstung

&raquo; Items

&raquo; Gegner


<p class="menutitle">Downloads</p>
&raquo; Trailer

&raquo; Wallpaper

</div>
<div id="right">
<p class="menutitle">MENU 4</p>
&raquo; HYPERLINK 1

&raquo; HYPERLINK 2

&raquo; HYPERLINK 3


&raquo; HYPERLINK 4

&raquo; HYPERLINK 5



<p class="menutitle">MENU 5</p>
&raquo; HYPERLINK 1

&raquo; HYPERLINK 2

&raquo; HYPERLINK 3


&raquo; HYPERLINK 4

&raquo; HYPERLINK 5



<p class="menutitle">MENU 6</p>
&raquo; HYPERLINK 1

&raquo; HYPERLINK 2

&raquo; HYPERLINK 3


&raquo; HYPERLINK 4

&raquo; HYPERLINK 5

</div>
<div id="inhalt">
<h1><?php echo $title4 ?></h1>
<h2><?php echo $title5 ?></h2>
</div> 
<div id="footer">
<p style="clear:both;margin-top:20px;">Powered &amp; design by ### ©2005
All rights on ### by ### ©1999-<? $datum = date("Y"); echo $datum; ?></p></div>
</div> 
</body>
</html>
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Css Problem Hintergrund drag2killer CSS 1 19.07.2014 10:46
CSS / HTML Problem Meister CSS 1 29.05.2013 16:09
Ausrichtung Kalender greece4u CSS 20 14.05.2012 14:32
CSS Hover Submenü - Problem in Darstellung des Elternelements DaDom CSS 3 07.03.2011 10:44
Inspiration - Sammlung von Links emti Ressourcen 8 01.12.2009 19:02


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:42 Uhr.