PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : kleine CSS Hilfe...

R300
2004-11-18, 17:11:24
Hallo
Kann mir jemand ein Menü so in ein CSS StyleSheet einbauen, dass ich in der html Datei nur noch die Links habe und die Hintergrundbilder vom Menü in der CSS festgelegt sind.

So soll das Menü aussehen:
http://img108.exs.cx/img108/653/menu.png

und das sind die dazugehörigen pics:
http://img108.exs.cx/img108/1893/block_top.jpg

http://img108.exs.cx/img108/9761/block_mid.jpg

http://img108.exs.cx/img108/8834/block_bot.jpg

Ich weiß ich könnte auch CSS anständig lernen und es selbst machen, aber ich hab im Moment nicht die Zeit dazu. Meine Kenntnisse reichen noch nicht aus, um die Bilder richtig zu positionieren und vorallem dass die Höhe des Blocks sich verändert wenn man da mehr Links einbaut.

THX
darph
2004-11-18, 18:07:58
5 Minuten Arbeit :)

<html>
<head>
<title>Unbenannt</title>
<style type="text/CSS">
div.menu
{ width: 145px;
margin: 0px;
padding: 0px;
border: 0px;
}

div.mtop
{ height: 19px;
background-image: url("block_top.jpg");
background-repeat: no-repeat;
}

div.mbottom
{ height: 19px;
background-image: url("block_bot.jpg");
background-repeat: no-repeat;
}

div.mmiddle
{ background-image: url("block_mid.jpg");
background-repeat: repeat-y;
margin: auto;
text-align: center;
}

a
{ font-family: tahoma, sans serif;
font-size: 9px;
font-weight: bold;
color: white;
}
</style>
</head>

<body>
<div class="menu">
<div class=" menu mtop"></div>
<div class="menu mmiddle">
<a href="link hier hin">click mich</a><br />
<a href="link da hin">mich auch!</a><br />
<a href="link hier hin">click mich</a><br />
<a href="link da hin">mich auch!</a><br />
<a href="link hier hin">click mich</a><br />
<a href="link da hin">mich auch!</a><br />
<a href="link hier hin">click mich</a><br />
<a href="link da hin">mich auch!</a><br />
<a href="link hier hin">click mich</a><br />
<a href="link da hin">mich auch!</a><br />
<a href="link hier hin">click mich</a><br />
<a href="link da hin">mich auch!</a><br />
<a href="link hier hin">click mich</a><br />
<a href="link da hin">mich auch!</a><br />
<a href="link hier hin">click mich</a><br />
<a href="link da hin">mich auch!</a><br />
</div>
<div class="menu mbottom"></div>
</div>
</body>
</html>
R300
2004-11-18, 20:04:22
Vielen Dank. :massa: :up:
R300
2004-11-20, 11:58:47
So ich kriege es wieder nicht hin.
Jetzt gehts um die Mitte, die aus etwas mehr Bildern besteht und das Schwierige: Sie ändert die größe abhängig von der Auflösung.

So solls aussehen:
http://img58.exs.cx/img58/7532/menu3.png

die dazugehörigen Bilder:
http://img58.exs.cx/img58/3507/cbox_def_bot1.jpg
http://img58.exs.cx/img58/8819/cbox_def_bot2.jpg
http://img58.exs.cx/img58/7227/cbox_def_bot3.jpg
http://img58.exs.cx/img58/783/cbox_def_left.jpg
http://img58.exs.cx/img58/6436/cbox_def_right.jpg
http://img58.exs.cx/img58/895/cbox_def_top1a.jpg
http://img58.exs.cx/img58/8553/cbox_def_top2a.jpg
http://img58.exs.cx/img58/830/cbox_def_top3a.jpg

Wenn jemand Zeit hat und das für mich mal zusammen basteln könnte wäre ich sehr dankbar. :)
Gast
2004-11-20, 13:06:01
Sehr gute CSS referenz:
http://www.htmldog.com/
R300
2004-11-20, 13:45:15
Hab ich schon gelesen.
Ich kapiers trotzdem nicht. :frown:
Liegt wohl auch am Englich
R300
2004-11-20, 23:00:27
Och kommt schon Leute das andere hat auch nur 5 min gedauert.
Das kriegt ihr in 10 min hin.
darph?
R300
2004-11-22, 13:56:12
Oh man das kann doch nicht war sein. :usad:
R300
2004-11-23, 23:11:18
Ok vergesst es.
Was anderes:

Gibt es eine Möglichkeit ein Footer mit CSS zu machen ohne vorher die Menüs mit float:left und right positioniert zu haben.
Ich habe mit google nur Beispiele gefunden, wo der footer mit clear: both gemacht wird, aber ich habe kein bock meinen ganzen CSS Code umzuschreiben, um das verwenden zu können.
Kann man irgendwie einen Block unten anhängen ohne clear:both ?

der CSS Code:

...
body {
font-family: tahoma, sans serif;
font-size: 8pt;
font-weight: bold;
color: white;
padding: 0px;
margin: 0px;
background-color: #000000;
}

#logo {
height: 122px;
margin: 10px;
background-color: #ffffff;
background-image: url("header2.png"); background-repeat: repeat-x;
}

#inhalt {
width: auto;
height: 100%;
margin: 0px 170px;
background-color: #283a60;
border-style: ridge;
border-width: 8px;
border-color: #6f81a7;
padding: 10px;
}

#links {
position: absolute;
top: 142px;
left: 10px;
width: 160px;
height: 300px;
background-color: #000000;
}
#rechts {
position: absolute;
top: 142px;
right: -5px;
width: 160px;
height: 300px;
background-color: #000000;
}
...


Könnt ihr mir wenigstens hier helfen?
ravage
2004-11-24, 08:04:43
Kannst du das nicht auch mit position:absolute machen? So wie ich das sehe ist dein Content ja von der Höhe genau definiert.
R300
2004-11-24, 14:16:11
Ne der Footer erscheint dann irgendwie in der Mitte der Page.
Ich glaube ich vergesse da etwas. :|
Und den Content bereich muss ich noch ändern, der soll sich der länge des Inhalts anpassen.


#footer {
position: absolute;
bottom: 5px;
background-color: #283a60;
width: 100%;
height: 70px;
margin: 10px;
}