| Autor |
Nachricht |
-
brawl-crushers
|
 24.07.2010 um 00:38 (UTC)
Titel: Navigation |
|
|
ginge solch eine Navigation auch bei einem CSS Design ?
 |
|
|
↑
|
|
 |
-
badweb
Wohnort: BaWü
|
24.07.2010 um 21:32 (UTC)
Titel: |
|
|
klar, geht das ______________ Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
  |
|
|
↑
|
|
|
-
brawl-crushers
|
25.07.2010 um 14:20 (UTC)
Titel: |
|
|
kannst du das oder kennst du jemanden der das kann ?
denn meine Navi ist ziemlich langweilig  |
|
|
↑
|
|
|
-
badweb
Wohnort: BaWü
|
25.07.2010 um 15:18 (UTC)
Titel: |
|
|
Habs auf die Schnelle nachgebebaut. Die Grafiken sind natürlich austauschbar, so kannst du die Navigation farblich anpassen..
Code: <style type="text/css">
#navi_box {
width: 198px;
height: 204px;
background: url(http://img.webme.com/pic/b/badnet/bc_nav_container.png) no-repeat;
}
#navi_heading {
width: 183px;
height: 38px;
margin-left: 5px;
padding-top: 5px;
float: left;
}
#navi_links {
width: 120px;
float: left;
margin-left: 50px;
margin-top: 15px;
margin-right: 10px;
}
#navi_links a {
text-decoration: none;
font-size: 12px;
color: #3dadd8;
}
#navi_links li {
list-style-image: url(http://img.webme.com/pic/b/badnet/bc_nav_button.png);
border-bottom: 1px solid #3dadd8;
padding-top: 5px;
}
#navi_links li:hover {
list-style-image: url(http://img.webme.com/pic/b/badnet/bc_nav_button_hover.png);
}
</style>
<div id="navi_box">
<div id="navi_heading"><img src="http://img.webme.com/pic/b/badnet/bc_nav_head.png">
</div>
<div id="navi_links">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</div>
</div> ______________ Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
|
|
|
↑
|
|
|
-
brawl-crushers
|
25.07.2010 um 15:48 (UTC)
Titel: |
|
|
hey cool danke ^^
aber das wird bei mir so angezeigt:
 |
|
|
↑
|
|
|
-
badweb
Wohnort: BaWü
|
25.07.2010 um 15:51 (UTC)
Titel: |
|
|
Im Editor ist das völlig normal, da wird alles meist komisch dargestellt.
Auf der Seite selbst sollte es so aussehen:
http://badnet.de.tl/Test-5.htm______________ Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
|
|
|
↑
|
|
|
-
brawl-crushers
|
25.07.2010 um 16:00 (UTC)
Titel: |
|
|
ist auch auf der Seite so vllt mach ich ja was falsch
 |
|
|
↑
|
|
|
-
brawl-crushers
|
25.07.2010 um 16:21 (UTC)
Titel: |
|
|
also irgendwas passt da noch nicht, ich verstehe nicht wieso es bei mir so angezeigt wird |
|
|
↑
|
|
|
-
badweb
Wohnort: BaWü
|
25.07.2010 um 16:23 (UTC)
Titel: |
|
|
Uncool ...
Ich tippe darauf, dass sich dein Quellcode für die Seite an einer oder mehreren Stellen mit meinem Quellcode für die Navi-Box überschneidet.
Einen Punkt habe ich schon gefunden.
Füge folgende Codezeile zum Quellcode der Klasse "#navi_links a" der Box hinzu:
Woher die Verschiebung nach rechts kommt, kann ich nicht sagen, da ist mir noch nichts aufgefallen in deinem Code. ______________ Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
|
|
|
↑
|
|
|
-
testsuperspinsonic
|
25.07.2010 um 16:25 (UTC)
Titel: |
|
|
habe mal auf meiner Testseite das Design genommen wo die Navi richtig da gestellt wird und es wird auch jetzt richtig dagestellt vielleicht fehlt mir ja nur ein code dass das ganze richtig da stellt |
|
|
↑
|
|
|
-
badweb
Wohnort: BaWü
|
25.07.2010 um 16:35 (UTC)
Titel: |
|
|
Ich hab grade meine Testseite auf 0 gesetzt (also Design komplett entfernt) und jetzt wird die Box auch bei mir so dargestell.
Ich setzt mich nochmal ran. ______________ Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Zuletzt bearbeitet von badweb am 25.07.2010, 17:36, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
-
badweb
Wohnort: BaWü
|
25.07.2010 um 16:40 (UTC)
Titel: |
|
|
Ok versuchs mal hiermit:
Code: <style type="text/css">
#navi_box {
width: 198px;
height: 204px;
background: url(http://img.webme.com/pic/b/badnet/bc_nav_container.png) no-repeat;
}
#navi_heading {
width: 183px;
height: 38px;
margin-left: 5px;
padding-top: 5px;
float: left;
}
#navi_links {
width: 120px;
float: left;
margin-left: 50px;
margin-top: 15px;
margin-right: 10px;
}
#navi_links a {
text-decoration: none;
font-size: 12px;
color: #3dadd8;
line-height: 12px;
}
#navi_links li {
list-style-image: url(http://img.webme.com/pic/b/badnet/bc_nav_button.png);
border-bottom: 1px solid #3dadd8;
}
#navi_links li:hover {
list-style-image: url(http://img.webme.com/pic/b/badnet/bc_nav_button_hover.png);
}
</style>
<div id="navi_box">
<div id="navi_heading"><img alt="" src="http://img.webme.com/pic/b/badnet/bc_nav_head.png" /></div>
<div id="navi_links">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div> ______________ Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
|
|
|
↑
|
|
|
-
badweb
Wohnort: BaWü
|
03.08.2010 um 12:28 (UTC)
Titel: |
|
|
Leider musste ich den Farbverlauf aus den Hintergrundbildern nehmen, da die Wiederholung im mittleren Bereich und der Übergang zum unteren Teil sonst etwas uncool aussieht.
Css Code(mit Styletags)
Code: <style type="text/css">
#navi_box {
width: 198px;
}
#navi_container_pre {
width: 198px;
height: 15px;
background: url(http://img.webme.com/pic/b/badnet/bc_nav_container_pre.png) no-repeat;
float: left;
}
#navi_heading {
width: 183px;
height: 48px;
margin-left: 5px;
margin-top: -10px;
float: left;
background: url(http://img.webme.com/pic/b/badnet/bc_nav_header.png) no-repeat;
}
.navi_text {
font-size: 14px;
font-family: arial;
font-weight: bold;
color: #f2f2f2;
padding-top: 5px;
padding-left: 15px;
}
#navi_container {
width: 198px;
background: url(http://img.webme.com/pic/b/badnet/bc_nav_container.png) repeat-y;
float: left;
}
#navi_links {
width: 180px;
float: left;
margin-left: 0px;
margin-top: 1px;
margin-right: 0px;
}
#navi_links a {
text-decoration: none;
font-size: 12px;
color: #000000;
line-height 12px;
}
#navi_links li {
list-style-image: url(http://img.webme.com/pic/s/superspinsonic/bc_nav_button.png);
border-bottom: 1px solid #07427e;
}
#navi_links li:hover {
list-style-image: url(http://img.webme.com/pic/s/superspinsonic/bc_nav_button_hover.png);
}
#navi_container_post {
width: 198px;
height: 15px;
background: url(http://img.webme.com/pic/b/badnet/bc_nav_container_post.png) no-repeat;
float: left;
}
</style>
HTML Code (für deine erste Box)
Code: <div id="navi_box">
<div id="navi_container_pre"></div>
<div id="navi_container">
<div id="navi_heading">
<h1 class="navi_text">Text hier</h1>
</div>
<div id="navi_links">
<ul>
<li><a href="http://brawl-crushers.de.tl/Tutorials.htm">Tutorials</a></li>
<li><a href="http://brawlcrushers.foren-city.de/">Forum</a></li>
<li><a href="http://brawl-crushers.de.tl/-Ue-ber-uns.htm">Über Uns</a></li>
<li><a href="http://brawl-crushers.de.tl/Chatbox.htm">Chat</a></li>
<li><a href="http://brawl-crushers.de.tl/Flash-Games.htm">Flash-Games</a></li>
<li><a href="http://brawl-crushers.de.tl/Super-Smash-Bros-.--Brawl.htm">Super Smash Bros. Brawl</a></li>
</ul>
</div>
</div>
<div id="navi_container_post"> </div>
</div> ______________ Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Zuletzt bearbeitet von badweb am 05.08.2010, 00:58, insgesamt 5-mal bearbeitet
|
|
|
↑
|
|
|
-
badweb
Wohnort: BaWü
|
05.08.2010 um 00:12 (UTC)
Titel: |
|
|
So der Button ist fertig, ganz ohne Bilder gings dann doch nicht, sonst sieht der Button extrem langeweilig aus. Wenn du so bedacht auf deine Inhalte bist solltest du deinen Quelltext verschlüssenln, da kann nämlich jeder sprichwörtlich drinne frühstücken.
Css Code ohne Styletags (auch in der Box einfügen, nicht nur bei der betroffenen Seite. Erklärung folgt)
Code: a.button {
height: 13px;
background: #f2f2f2;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #8f8f8f;
font-size: 10px;
color: #000;
text-decoration: none;
padding: 2px 2px 1px 2px;
font-family: sans-serif;
margin: 2px;
}
a.button:hover {
background: url(http://img.webme.com/pic/b/badnet/bc_button_verlauf.png) #f2f2f2;
}
HTML Code
Code: <a href="Linkadresse" class="button">Text hier</a>
Der Button funktioniert über eine sog. Klasse (zu sehen im HMTL Code bei "class").
Willst du das ein Link wie ein Button aussieht dann füge zum Standart-HTML-Code eines Links noch die Anweisung class="button" hinzu.
Du brauchst also nur den Css Code bei "Css Code ohne Styletags" einzufügen und kannst mit der kleinen Erweiterung class="button" den Button auf jeder Seite nutzen. ______________ Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Zuletzt bearbeitet von badweb am 05.08.2010, 01:28, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
|
