SELFPHP: Version 5.8.2 Befehlsreferenz - Tutorial – Kochbuch – Forum für PHP Einsteiger und professionelle Entwickler

SELFPHP


Professional CronJob-Service

Suche



CronJob-Service    
bei SELFPHP mit ...



 + minütlichen Aufrufen
 + eigenem Crontab Eintrag
 + unbegrenzten CronJobs
 + Statistiken
 + Beispielaufrufen
 + Control-Bereich

Führen Sie mit den CronJobs von SELFPHP zeitgesteuert Programme auf Ihrem Server aus. Weitere Infos



:: Buchempfehlung ::

Websites optimieren für Google & Co.

Websites optimieren für Google & Co. zur Buchempfehlung
 

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP  

 

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!

Vorname: 
Name:
E-Mail:
 
 

Zurück   PHP Forum > HTML, CSS und JavaScript Help!
Hilfe Community Kalender Heutige Beiträge Suchen

HTML, CSS und JavaScript Help! Hier gibt es Hilfe zu HTML, CSS und JavaScript Problemen

Antwort
 
Themen-Optionen Ansicht
  #1  
Alt 23.07.2006, 19:02:17
langwebdesign langwebdesign ist offline
Junior Member
 
Registriert seit: Oct 2002
Ort: Titting
Alter: 39
Beiträge: 251
<ul> Liste mit CSS formatieren

Hallo zusammen,

ich würder gerne meine Navigation mit einer Liste erstellen und mit CSS formatieren.

Hab aber noch nicht soviel mit CSS gemacht will aber nicht mehr mit Tabellen an das Problem ran.

so sollte das dann mal ausschauen

Hier mein Code, CSS kommt später noch in extra Datei:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>
<style type="text/css">

li.off1 {
   list-style-position: inside;
   width: 200px;
   height: 25px;
   border-width: 1px;
   border-style: solid;
   border-color: #e1819c;
   font-family: Verdana, Helvetica, sans-serif;
   color: #ffffff;
   text-align: left;
   font-size: 8pt;
   list-style-image: url(MainNavDot800000.jpg);
   background-color: #800000;
}

li.on1 { 
   list-style-position: inside;
   width: 200px;
   height: 25px;
   border-width: 1px;
   border-style: solid;
   border-color: #e1819c;
   font-family: Verdana, Helvetica, sans-serif;
   color: #ffffff;
   text-align: left;
   font-size: 8pt;
   list-style-image: url(MainNavDotBA0033.jpg);
   background-color: #BA0033;
}

li.off2 {
   list-style-position: inside;
   width: 100%;
   height: 25px;
   border-width: 1px;
   border-style: solid;
   border-color: #e1819c;
   font-family: Verdana, Helvetica, sans-serif;
   color: #ffffff;
   text-align: left;
   font-size: 8pt;
   list-style-type: none;
   background-color: #800000;
}

li.on2 { 
   list-style-position: inside;
   width: 100%;
   height: 25px;
   border-width: 1px;
   border-style: solid;
   border-color: #e1819c;
   font-family: Verdana, Helvetica, sans-serif;
   color: #ffffff;
   text-align: left;
   font-size: 8pt;
   list-style-type: none;
   background-color: #BA0033;
}

</style>
</head>

<body bgcolor="#800000">

<ul>
	<li class="off1">Startseite</li>
	<li class="off1">Aktuelles</li>
	<li class="on1">Verein</li>
	<ul>
	<li class="on2">A-Jugend</li>
	<li class="off2">AH-Manschaft</li>
        </ul>
	<li class="off1">Tabelle</li>
	<li class="off1">Kontakt</li>
	<li class="off1"><a href="nav.htm">Impressum</a></li>
</ul>

</body>

</html>
Ist das überhaupt möglich?
Was mach ich falsch?
Was sollte man beachten um in den verschiedenen Browsern ein gleiches Resultat zu erhalten?
Bis jetzt schauts im IE noch schlimmer aus als im Firefox.

Ich hoffe Ihr habt ein paar Tipps für mich.

Danke
Stephan
__________________
Affen benutzen oft Stöckchen als Hilfsmittel...
Mit Zitat antworten
  #2  
Alt 23.07.2006, 19:26:25
Andes Andes ist offline
Member
 
Registriert seit: Jun 2006
Ort: Bayern
Alter: 56
Beiträge: 930
AW: <ul> Liste mit CSS formatieren

Warum willst du dies unbedingt mit List-Elementen machen? Mit div-Boxen wird es wesentlich einfacher und die unterschiedlichen Browser machen dabei auch nicht solche Probleme wie die List-Elemente.
Das vorgestellte Viereck kannst du durch Background-Image erstellen und den Text mit text-indent einrücken. Dem Background musst du über background-position eine Position zuweisen und mit background-repeat verhindern, dass er wiederholt wird.
__________________
Grüße Andes
Mit Zitat antworten
  #3  
Alt 23.07.2006, 19:38:45
langwebdesign langwebdesign ist offline
Junior Member
 
Registriert seit: Oct 2002
Ort: Titting
Alter: 39
Beiträge: 251
AW: <ul> Liste mit CSS formatieren

Aber mit div bau ich ja blos die Tabellen nach und das sollte man ja eigentlich sein lassen, oder?

Mein Weg glaub ich ist schon ok aber die Umsetzung ist halt so ein Ding.

So schauts im IE aus
Und so schauts im Firefox

Wobeis im Firefox schon recht gut ausschaut nur die Zweite Ebene zieht er über die gesamte Fensterbreite. Das Müsste man aber hinbekommen wenn man im <ul> die Breite defieniert.

Bringt mich aber leider nicht weiter.
Trotzdem Danke.
__________________
Affen benutzen oft Stöckchen als Hilfsmittel...
Mit Zitat antworten
  #4  
Alt 23.07.2006, 19:50:14
Andes Andes ist offline
Member
 
Registriert seit: Jun 2006
Ort: Bayern
Alter: 56
Beiträge: 930
AW: <ul> Liste mit CSS formatieren

Was für eine Tabelle und was soll man sein lassen?
Bei einer Navigation würde ich eine div-Box als Container erstellen, den ich dann beliebig positionieren kann ohne dass sich dabei die einzelnen Links ändern.
In den kommen dann halt die Links.

Das könnte so aussehen. Bei dem Beispiel sind die Untermenüs nicht berücksichtigt, aber diese kann man auf die gleiche Weise definieren.


Code:

a.test {
	display:block;
	width:200px;
	height:20px;
	background-image:url(bild.jpg); <!-- ca. 12 x 12 Pixel //-->
	background-position:5px 1px;
	background-repeat:no-repeat;
	font-size:10pt;
	text-decoration:none;
}
a.test:link { color:#0A0D92; }
a.test:visited { color:#0A0D92; }
a.test:hover { 
	color:red; 
	background-image:url(bild_c.jpg); <!-- ca. 12 x 12 Pixel //-->
	background-position:5px 1px;
	background-repeat:no-repeat;
}
a.test:active { color:#0A0D92; }
div.test { width:200px; background-color:#FCE8C7; text-indent:25px; border-bottom:1px solid #990000; }

.rahmen { width:200px; border:1px solid #990000; }



<div class="rahmen">
<div class="test"><a class="test" href="#">Test 1</a></div>
<div class="test"><a class="test" href="#">Test 2</a></div>
</div>
__________________
Grüße Andes

Geändert von Andes (23.07.2006 um 19:50:51 Uhr)
Mit Zitat antworten
  #5  
Alt 23.07.2006, 20:03:25
langwebdesign langwebdesign ist offline
Junior Member
 
Registriert seit: Oct 2002
Ort: Titting
Alter: 39
Beiträge: 251
AW: <ul> Liste mit CSS formatieren

Hi

ich hab damit gemeint das ich eine Tabellenstruktur mit div containern nachbaue. Hab mal wo gelesen das man beim umsteigen von Tabellen auf CSS Design aufpassen sollte die Tabellenstruktur nicht mit div Containern nachzubauen.

Aber dein Ansatz ist doch nicht schlecht.
Werd mir das dann mal genauer anschauen.

Danke
Ciao
__________________
Affen benutzen oft Stöckchen als Hilfsmittel...
Mit Zitat antworten
Antwort


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

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 aus.
[IMG] Code ist aus.
HTML-Code ist aus.

Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
datenbanknamen als liste ausgeben howie MySQLi/PDO/(MySQL) 1 19.06.2006 15:11:55
Liste in Formular soll andere Listen öffnen in dem Formular Sandra PHP für Fortgeschrittene und Experten 2 15.05.2006 11:46:34
Randomized Liste Safran PHP Grundlagen 1 23.01.2006 21:33:41
Baumstruktur in Drop Down Liste möglich? Tikiwiki PHP Grundlagen 3 21.10.2005 14:01:24
wer kennt die liste ... andreas87 PHP Grundlagen 12 09.01.2003 14:43:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:48:07 Uhr.


Powered by vBulletin® Version 3.8.3 (Deutsch)
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.


© 2001-2024 E-Mail SELFPHP OHG, info@selfphp.deImpressumKontakt