Layout
- Ersteller Mario348
- Erstellt am
- Status
neuroleptika
Aktives Mitglied
li-Elemente nebeneinander
Wenn das Menü horizontal angezeigt werden soll:
Wenn das Menü horizontal angezeigt werden soll:
HTML:
#tabsH {
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
float:left;
}neuroleptika
Aktives Mitglied
Was soll ich sagen.
So wie ich es geschrieben habe funktioniert es. Probiere es doch aus.
So wie ich es geschrieben habe funktioniert es. Probiere es doch aus.
neuroleptika
Aktives Mitglied
Vieles in der css ist verkehrt oder überschreibt irgendwas.
Ich hab es korrigiert und Sinnloses entfernt:
Die Hintergrundgrafik gibt es unter der angegebenen Adresse nicht:
background:url("tabrightH.gif") no-repeat;
http://www.arudc.ch/tableftH.gif
Ich hab es korrigiert und Sinnloses entfernt:
HTML:
.style00 {
font-family: 'UniversalMath1 BT', Helvetica, 'sans-serif';
font-size:1em;
color:#ffa500;
text-align:center;
}
#tabsH {
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
float:left;
}
#tabsH a {
float:left;
display:block;
background:url("tabrightH.gif") no-repeat;
padding:5px 15px 4px 6px;
color:#FFF;
text-decoration:none;
}background:url("tabrightH.gif") no-repeat;
http://www.arudc.ch/tableftH.gif
neuroleptika
Aktives Mitglied
in die oben.css
neuroleptika
Aktives Mitglied
Den Code hab ich mir angesehen und geändert:
http://www.arudc.ch/oben.css
und da muss er auch wieder hin.
Ich habe Anfangs gesagt "Wenn das Menü horizontal angezeigt werden soll:".
Das Menü wird in der oben.css formatiert.
Mario348
Neues Mitglied
Die Navigation ähnelt in keinster Weise der der Vorlage!
Habe nun die Buttons kopiert (Anhang).
Stimmt aber immer noch nicht mit der hier überein:
Free CSS Navigation Menu Designs at exploding-boy.com
Habe nun die Buttons kopiert (Anhang).
Stimmt aber immer noch nicht mit der hier überein:
Free CSS Navigation Menu Designs at exploding-boy.com
Anhänge
neuroleptika
Aktives Mitglied
Ich konnte ja nicht wissen wie es aussehen soll:
So sind die Grafiken direkt von der Seite eingebunden.
Das darfst du aber auf keinen Fall so lassen. (Traffikklau)
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Menü</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("http://exploding-boy.com/images/cssmenus/tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("http://exploding-boy.com/images/cssmenus/tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}
</style>
</head>
<body>
<h2>Tab Menu H</h2>
<div id="tabsH">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
<p>Hier geht es weiter</p>
</body>
</html>Das darfst du aber auf keinen Fall so lassen. (Traffikklau)
Mario348
Neues Mitglied
Dann ist das oben der HTML Code?
Was kommt dann in die .css?
Die Tabs habe ich mit Printscreen hergestellt. Dann muss ich diese Stelle noch abändern?
Bitte beantworte all die oben genannten Fragen, es ist wirklich wichtig!
Wie kann ich die Tabs 1:1 nachbauen?
Was kommt dann in die .css?
Die Tabs habe ich mit Printscreen hergestellt. Dann muss ich diese Stelle noch abändern?
Code:
http://exploding-boy.com/images/cssmenus/tableftH.gifWie kann ich die Tabs 1:1 nachbauen?
neuroleptika
Aktives Mitglied
Ich habe die css-Anweisungen mit in den head-Bereich der html-Datei geschrieben, damit du beides zusammen hast.
die .css ist damit erstmal nicht nötig.
Ich würde es erstmal mit den Originalbildern verwenden.
Die Bildchen kannst du später austauschen wenn sie dir nicht gefallen.
Nur solltest du sie auf deinen eigenen Webspace laden.
Brauchst du nicht nachbauen. Die Tabs kannst du verwenden.
Da habe ich es noch mal hochgeladen:
Menü
Mario348
Neues Mitglied
Wieso klappt das nicht?
Wie kann ich diesen Trafficklau umgehen?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL]http://www.w3.org/TR/html4/loose.dtd[/URL]">
<html>
<head>
<title>Menü</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}
</style>
</head>
<body>
<h2>Tab Menu H</h2>
<div id="tabsH">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
<div id="box1">
<iframe name="I1" marginwidth="1" marginheight="1" scrolling="no" border="0" frameborder="0" width="135" height="55"src="[url=http://www.adm24.de/hp_counter/counter.php?counter_nummer=2453&type=1]Live-Counter:[/url]">
</iframe>
</div>
<div id="box2">
<!-- Beginn Bannercode submitter.de -->
<CENTER><A HREF="[url=http://www.submitter.de]submitter.de - Der Eintragservice für Profis - Mit uns Boomt Ihre Homepage[/url]" target="new">
<IMG SRC="[URL]http://www.submitter.de/banner/banner1.gif[/URL]" NOSAVE BORDER=0 HEIGHT=50 WIDTH=200 ALT="submitter.de - Kostenloser Eintrag in über 1111 Suchmaschinen!"></A> </CENTER>
<!-- Ende Bannercode submitter.de -->
</div>
<!-- Counter von [url=http://fc.webmasterpro.de]FlashCounter - Counterservice - kostenloser Besucherzähler mit Statistik - Kostenlos - free-web-counter[/url] : dieser Code zeigt ihre Besucherzahl an und zählt mit -->
<script type="text/javascript" src="[URL]http://fc.webmasterpro.de/counter.php?name=mario348&style=none[/URL]" id="fcScriptmario348"></script>
<noscript><div><img src="[URL]http://fc.webmasterpro.de/as_noscript.php?name=mario348[/URL]" alt="" /></div></noscript>
</body>
</html>Wie kann ich diesen Trafficklau umgehen?
neuroleptika
Aktives Mitglied
In dem du die Bildchen auf deinen eigenen Server lädst.
Bildchen 1:
http://exploding-boy.com/images/cssmenus/tabrightH.gif
Bildchen 2:
http://exploding-boy.com/images/cssmenus/tableftH.gif
Mario348
Neues Mitglied
Ah, logisch!
Als ich deine vorherige Antwort noch ein paar Mal durchgelesen habe, war mir alles klar.
Kannst du mir ein Beispiel machen, wie ich nun die Links einbinde?
Ich weiss nur, dass es bei "name" nicht funktioniert...
Die <span> benötige ich scheinbar auch nicht, oder?
Könntest du mir mit diesen Anforderungen ein Beispiel machen?
Wäre super :-)
Als ich deine vorherige Antwort noch ein paar Mal durchgelesen habe, war mir alles klar.
Kannst du mir ein Beispiel machen, wie ich nun die Links einbinde?
Ich weiss nur, dass es bei "name" nicht funktioniert...
Die <span> benötige ich scheinbar auch nicht, oder?
Könntest du mir mit diesen Anforderungen ein Beispiel machen?
Wäre super :-)
neuroleptika
Aktives Mitglied
Ich würde vorschlagen du machst dafür ein ein neues Thema Verweise und Frames auf
In span wird die Grafik tabrightH.gif eingebunden, die müssen drin bleiben.
Mario348
Neues Mitglied
- Status
