CSS Probleme mit einem Script

PuITutorials · 21. September 2010

Hallo,

Ich habe mir eben ein Script für einen Menübalken runtergeladen nur ich kann das ganze nicht ganz Anpassen

Es müsste den ganzen Zwischenraum ausfüllen zwischen dem Logo und dem unteren Teil der Webseite 946 px lang und 30 px hoch und ich bekomme das nicht zentriert.

Der Code

Html

Code:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

Css

Code:

#navcontainer ul li
{
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
background: url("http://biphome.spray.se/karl10/images/navBarBg.gif") repeat-x 20px;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
text-align: center;
}

#navcontainer a
{
color: #000;
text-decoration: none;
display: block;
width: 100px;
border-top: 1px solid #A8B090;
border-bottom: 1px solid #A8B090;
border-left: 1px solid #A8B090;
}

#navcontainer li#active { background: url("http://biphome.spray.se/karl10/images/navBarBgHover.gif") repeat-x 20px; }
#navcontainer a:hover { background: url("http://biphome.spray.se/karl10/images/navBarBgHover.gif") repeat-x 20px; }

Webseite: http://umfrage-welt.de/testprojekt

Könntet ihr mir da ein bisschen Helfen ?

Gruß Niklas

Kausalat · 21. September 2010

Erst einmal solltest du versuchen, den CSS-Code so anzupassen, dass auch Browser wie Opera oder Chrome die Seite bei höheren Monitorauflösungen korrekt anzeigen.

Versuch's beim Menü mit

Code:

#navcontainer {
margin: 0 auto;
}

PuITutorials · 21. September 2010

Code:

#navcontainer ul li
{
[COLOR="Red"]margin: 0 auto;[/COLOR]
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
background: url("http://biphome.spray.se/karl10/images/navBarBg.gif") repeat-x 20px;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
text-align: center;
}
/CODE]

Keine Veränderung

Kausalat · 21. September 2010

Schau dir noch einmal meine CSS-ID an.

P. S.:

Antoniker · 21. September 2010

Code:

#navcontainer ul li
{
[B]margin: 0 auto;[/B]
list-style-type: none;
padding: 0;
[B]margin: 0;[/B]
display: block;
float: left;
background: url("http://biphome.spray.se/karl10/images/navBarBg.gif") repeat-x 20px;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
text-align: center;
}

Naja klar verändert das nichts... Lies dir nochmal das CSS-Manual durch...

Wenn du ganz oben margin: 0 auto; setzt und zwischendurch dann wieder margin: 0 ...
Gilt zweiteres, somit hast du keine Änderung

PuITutorials · 21. September 2010

Immernoch nichts verändert

Ich zeige am besten mal den ganzen Code

Html

Code:

<html>
<head>
<title>Test</title>
<meta content="Sport" name="keywords">
<link rel="stylesheet" type="text/css" href="/style/styletest.css" /> 
</head>
<body>
[COLOR="Red"]<div id="wrapper">[/COLOR]
<img src="../bilder/puitv.png" alt="logo" />
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
<img src="../bilder/balken1.png" alt="balken1" />
<img src="../bilder/balken2.png" alt="balken2" />
<div id="wrap">
    <div id="box1">Link1<br>Link2<br>Link3</div>
    <div id="box2">Das hier ist ein Test aaaaaaaaaaaaaallllllllll<br>Achja das auch<br>Und dies auch :P</div>
<img src="../bilder/balken3.png" alt="balken3" />
</div>
[COLOR="Red"]</div>[/COLOR]
</body>
</html>

Css

Code:

body {
background-color: #2688db;
color: black;
text-align: center;
font: 25px Arial;
margin: 0 auto;
background-repeat: repeat-x;background-image:url( ../bilder/blau.png);
}
[COLOR="#ff0000"]#wrapper {
padding: 22px 0px 25px 0px ;
margin: 0 auto; 
}[/COLOR]
#wrap { 
width: 946px; 
background:blue;
margin: 0 auto; 
}
#box1 {
width: 246px;
float:left;
background: #f88214;
margin: 0 auto;   
}
#box2 {
width: 685px; 
float:right; 
background: white;
margin: 0 auto;
border-style: solid ;
border-color: #f88214 ;
border-width: 0px 15px 0px 0px ; 
}
#navcontainer ul li
{
margin: 0 auto;
list-style-type: none;
padding: 0;
display: block;
float: left;
background: url("http://biphome.spray.se/karl10/images/navBarBg.gif") repeat-x 20px;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
text-align: center;
}

#navcontainer a
{
color: #000;
text-decoration: none;
display: block;
width: 100px;
border-top: 1px solid #A8B090;
border-bottom: 1px solid #A8B090;
border-left: 1px solid #A8B090;
}

#navcontainer li#active { background: url("http://biphome.spray.se/karl10/images/navBarBgHover.gif") repeat-x 20px; }
#navcontainer a:hover { background: url("http://biphome.spray.se/karl10/images/navBarBgHover.gif") repeat-x 20px; }

Doch es verschiebt sich immernoch

Kausalat · 21. September 2010

Meine Quick-&-Dirty-Vorschläge:

Verzichte auf eine Logo-Einbindung per <img>-Tag. Via CSS geht's komfortabler.
Verzichte auf sonstige Ecken-Grafiken. Besser als Hintergrundbilder für die HTML-Elemte festlegen. Einfach mal nach "CSS rounded corners" googeln .

Arthur1901 · 21. September 2010

versuchs doch mal mit
#navcontainer div
{
clear:both;
align:center;
}

vlt gehts damit

PuITutorials · 21. September 2010

Verzichte auf eine Logo-Einbindung per <img>-Tag. Via CSS geht's komfortabler.

Malsehen

Verzichte auf sonstige Ecken-Grafiken. Besser als Hintergrundbilder für die HTML-Elemte festlegen. Einfach mal nach "CSS rounded corners" googeln .

Ich glaube manche Browser machen da nicht mit oder ?

Kausalat · 21. September 2010

PuITutorials schrieb:
Ich glaube manche Browser machen da nicht mit oder ?

Über die Fähigkeit, Hintergrundbilder mit einer benutzerdefinierten Ausrichtung anzuzeigen, sollten sogar Browser wie der IE 6 verfügen. Schau dir einfach ein paar Tutorials dazu an, dort steht meistens auch geschrieben, wo und an welcher Stelle es vielleicht haken könnte.

PuITutorials · 21. September 2010

Okay

So jetzt aber mal wieder zum Thema wie bekomme ich das so hin wie im Anhang ?

Code ist im 1sten gepostet ! Ich bin echt verzweifelt ich versuche und versuche nur bisher konnte ich nur die Länge verändern

Kausalat · 21. September 2010

So, ich habe mal ein wenig an deiner Seite gebastelt ...

Eines vorweg gesagt: So einen "Kuddelmuddel" würde ich auf meiner eigenen Website nie verwenden. Da du aber das Gefühlt hattest, dass Gespräche z. B. über die runden Ecken mit CSS vom Thema abschweifen und du dich nicht um einen semantischen Quellcode bemüht hast, sieht mein CSS-Code entsprechend ... aus.

P. S.: Mein Browser hat sich die Freiheit genommen, einige Bilddateien umzubenennen. Dies bitte ich zu entschuldigen.

Mister Blue Sky · 22. September 2010

Getestet mit Firefox, Opera, Safari [Win], Chrome, IE8

Bilder-hochladen.de: Pixelgleiches Aussehen in den 5 Testbrowsern

Zip-Inhalt: puitv.html, Verzeichnis mit test.css, Verzeichnis mit 6 *.pngs

GF

Kausalat · 22. September 2010

@ Mister Blue Sky:
Gute Umsetzung ohne direkte Bildereinbindung, allerdings nicht semantisch durch eine inflationäre Nutzung von <div>-Elementen (z. B. auch unnötigerweise im Menü).

Mister Blue Sky · 22. September 2010

Der Einwand ist berechtigt - Anhang: Version 2 mit Menü als "unordered list".

BS

Koki_87 · 22. September 2010

Also da sieht einiges noch sehr unschön aus.

Warum bitte für die Ecken, gleich die gesamte Breite als Bild, entweder mit CSS Sprites machen oder die einzelnen Ecken ordentlich positionieren, so ist das nur verschwendeter Traffic
eine Navi mit Listen zu machen ist sehr unschön. Bei so einer Navi ist das auch noch ganz leicht anders zu lösen. Das a Tag ohne div oder li umrandung, einfach mit "display:block" als Block Element setzen und dieses kannst du dann per "float:left" linksbündig an die anderen floaten lassen (ACHTUNG, nach der Navi Leiste auf alle fälle ein <br style="clear:both;" /> einbauen

Belee · 22. September 2010

Ohne mir den Code da angeschaut zu haben, denke aber ich weiß was du meinst!

@Koki...
Zu "Warum bitte die Ecken ..."

Kann ich so nicht stehenlassen

1. Man sparrt Klassen.

2. Man reduziert Zugriffe "wenn keine Sprites benutzt werden".

3. Nutzt man Sprits benötigt man mehr Klassen, also mehr Code, nutzt man keine [2.] für jede Ecke sowie den Body der Box, und meistens muss man auch floaten, für meinen Geschmack ist sowas für eine Box deren Grafik eventuell 10kb beträgt Blödsinn. Einfacher als

HTML:

<div class="hintergrund">....</div>

geht es nicht, oder doch?

4. Hat man keine Probleme mit Farben, es kann nämlich passieren das auf manchen Computern die Farbe des Body der Box eine ganz andere ist als die der Ecken. Und wenn man mit JPG die Ecken abspeichert sieht man zu 99% immer einen Unterschied zum Körpfer der Box also Farbe. Und wenn der
Client eigene Styles nutzt hast du eh die A...Karte und deine Seite bzw. die Boxen sind genau das was du sagst 'unschön' anzusehen.

Warum einfach wenn es kompliziert geht?

Kausalat · 22. September 2010

Koki_87 schrieb:
eine Navi mit Listen zu machen ist sehr unschön. [...]

Der Großteil der Webdesigner sind da anderer Meinung. Wie sähe die Seite denn ohne CSS aus (Druckausgabe etc.)?

StartseiteArtikelTestsNewsDownloadsPreisvergleich

Belee · 23. September 2010

Unschön?

S.o.T. · 23. September 2010

Koki_87 schrieb:
[*]eine Navi mit Listen zu machen ist sehr unschön. Bei so einer Navi ist das auch noch ganz leicht anders zu lösen. Das a Tag ohne div oder li umrandung, einfach mit "display:block" als Block Element setzen und dieses kannst du dann per "float:left" linksbündig an die anderen floaten lassen (ACHTUNG, nach der Navi Leiste auf alle fälle ein <br style="clear:both;" /> einbauen

Tut mir leid, aber das ist mit Abstand der größte Quatsch, den hier bisher gelesen habe. Jeder vernünftige Mensch, der sich mit Semantik auskennt, wird dir sagen, dass die Listenelemente von HTML absolut legitim sind. Denn was suchen wir denn zu erstellen? Richtig: Eine Liste von Navigationspunkten.

Dazu ist dein Tipp mit <br style="clear:both;" /> so etwas von schauderhaft, dass mir die sprichwörtlichen Haare zu Berge stehen.

Sorry, wenn das jetzt angreifend rüberkommt, aber mir tränen beinah die Augen ob dieses Unfugs...

CSS Probleme mit einem Script

Ensign

Kausalat

Gast

Ensign

Kausalat

Gast

Lt. Junior Grade

Ensign

Kausalat

Gast

Banned

Ensign

Kausalat

Gast

Ensign

Anhänge

Kausalat

Gast

Anhänge

Mister Blue Sky

Gast

Kausalat

Gast

Mister Blue Sky

Gast

Lt. Commander

Lt. Commander

Kausalat

Gast

Lt. Commander

Ensign

Ähnliche Themen