WinFuture-Forum.de: Css-problem - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Css-problem navi-positionieren


#1 Mitglied ist offline   bluescorp 

  • Gruppe: aktive Mitglieder
  • Beiträge: 323
  • Beigetreten: 23. Oktober 04
  • Reputation: 0
  • Wohnort:nähe Wien

geschrieben 02. März 2009 - 15:58

Hiho!

Ich hab gerade ein Problem.

Ich soll eine Webpage mit CSS machen und steh gerade voll am Schlauch...

also:

CSS-Datei:
CODE
body{
margin:0px;
padding:0px;
font-size:12px;
font:Arial, Helvetica, sans-serif;
color:#000000;
background:url(hintergrund.jpg) repeat-x;
}

#header {
width: 558px;
height: 147px;
margin: 50px 250px;
background: url(logo.jpg);
}

#navi{
width:900px;
height:50px;
margin:0 0;
padding:0;
}


die Werte in #navi sind mittlerweile nur noch irgendwelche Werte, wie gesagt, ich hatte alles durchprobiert :/

index.html:
CODE
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<title>mc</title>
</head>

<body>
<div id="header"></div>

<div id="navi">

<a href="index.html"> Home</a>
<a href="index.html"> Über Uns I </a>
<a href="index.html"> Kontakt I </a>
<a href="index.html"> Kunden I</a>
<a href="index.html"> Impressum</a>

</div> <!-- Navi -->



</body>
</html>


So. Im body hab ich den Hintergrund bestimmt usw. Im Header ist das Logo drinnen, damit das mit dem Design zusammenpasst.

Aber das "Navi" will nicht an seinen Platz. hab jetzt schon so gut wie mit allen Werten rumexperimentiert, es klappt einfach nicht.

Zur besseren Darstellung hier ein Screen:

Eingefügtes Bild

der linke Slice ist der Hintergrund im body und das weiße Feld ist das logo.

Vlt kann mir wer von euch helfen, ich steh im Moment total an. CSS4you und Konsorten helfen mir einfach nicht weiter.

MfG

Dieser Beitrag wurde von bluescorp bearbeitet: 02. März 2009 - 15:59

0

Anzeige



#2 Mitglied ist offline   Witi 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.947
  • Beigetreten: 13. Dezember 04
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Kingsvillage
  • Interessen:Frickeln

geschrieben 02. März 2009 - 16:23

Wo soll die Navigation überhaupt hin? Zeigt das Bild deinen aktuellen Stand oder so wie es werden soll? Wo finde ich deinen aktuellen Stand, hast du einen Link, wo man sich das anschauen kann?

Vom HTML-Code her, sieht das schon in Ordnung aus. Gewöhne dir allerdings an, Menüs bzw Navigationen als Liste zu erstellen, bedeutet:
<ul>
<li><a href="#" title="Link 1">Link 1</a></li>
<li><a href="#" title="Link 2">Link 2</a></li>
<li><a href="#" title="Link n">Link n</a></li>
</ul>

[email protected] 0xAAE321A2

50226 - Witis Blog
0

#3 Mitglied ist offline   bluescorp 

  • Gruppe: aktive Mitglieder
  • Beiträge: 323
  • Beigetreten: 23. Oktober 04
  • Reputation: 0
  • Wohnort:nähe Wien

geschrieben 02. März 2009 - 16:32

Eingefügtes Bild

So schauts im Moment aus, weiter rauf bekomm ichs einfach nicht ;)
0

#4 Mitglied ist offline   Witi 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.947
  • Beigetreten: 13. Dezember 04
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Kingsvillage
  • Interessen:Frickeln

geschrieben 02. März 2009 - 16:44

Ach...du willst die Navigation über dem Header haben.

Entweder du machst #header kleiner, packst die #navi in #header oder positionierst #navi absolut.
[email protected] 0xAAE321A2

50226 - Witis Blog
0

#5 Mitglied ist offline   bluescorp 

  • Gruppe: aktive Mitglieder
  • Beiträge: 323
  • Beigetreten: 23. Oktober 04
  • Reputation: 0
  • Wohnort:nähe Wien

geschrieben 02. März 2009 - 16:54

ok, das mit header kleiner machen hab ich nicht zusammen gebracht, aber absolute Positionierung war das perfekte Stichwort :blink:

Dankeschön ;)
0

#6 Mitglied ist offline   bluescorp 

  • Gruppe: aktive Mitglieder
  • Beiträge: 323
  • Beigetreten: 23. Oktober 04
  • Reputation: 0
  • Wohnort:nähe Wien

geschrieben 06. März 2009 - 08:13

Ich hätte da noch eine Frage:

Beim IE ist die Navi leider nicht ganz auf der Position die ich ihr gegeben habe, sprich um 10px oder so zu weit oben.
Hab ich mal rumgesucht und da gibt es so "Star-HTML-Hack" oder so, aber da wird immer von der width geredet und nicht von der Höhe (Breite stimmt ja).

In allen anderen Browsern (Opera, FF, Chrome, Safari, moblie) stimmts ja. Nur leider ist der Großteil der Kundschaft IE-Benutzer.

Gibts da noch eine Lösung?

MfG
0

#7 Mitglied ist offline   Witi 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.947
  • Beigetreten: 13. Dezember 04
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Kingsvillage
  • Interessen:Frickeln

geschrieben 06. März 2009 - 09:08

Am einfachsten per conditional comments:
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css"/> 
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css"/> 
<![endif]-->


Sollte, denke ich, selbsterklärend sein.
[email protected] 0xAAE321A2

50226 - Witis Blog
0

#8 Mitglied ist offline   bluescorp 

  • Gruppe: aktive Mitglieder
  • Beiträge: 323
  • Beigetreten: 23. Oktober 04
  • Reputation: 0
  • Wohnort:nähe Wien

geschrieben 06. März 2009 - 12:39

Ich habs mal probiert, aber ganz klar ist es mir nicht (ändert sich auch nichts)...

ich hab meine style.css die überall funktioniert, auch der IE korrekt anzeigt, bis eben die absolute Positionierung der Navigationsleiste, die ist um 10px herum zu weit oben.

dann erstell ich eine ie.css, lasse alles gleich, bis auf eben die Positionierung der NavLeiste, die hab ich um 10px nach unten versetzt.

Jetzt sagte machte ich:

CODE
<link href="style.css" rel="stylesheet" type="text/css" media="screen" /> <!-- Basis-CSS -->
<!--[if IE]> <!-- Wenn Browser=IE, lade ie.css -->
<link rel="stylesheet" href="ie.css" type="text/css"/>
<![endif]-->


So, nur ändert sich dadurch nichts!?

Hab auch schon auf SELFHTML nachgesehen, aber die sprechen überhaupt gleich von 3 css - Datein (Basis, eine für moderne Browser und eine für IE)

MfG
0

#9 Mitglied ist offline   Halt's_Maul_Paul 

  • Gruppe: aktive Mitglieder
  • Beiträge: 257
  • Beigetreten: 18. Dezember 04
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:HH

geschrieben 06. März 2009 - 18:10

Also zwei reichen idR!
Poste doch mal die 'ie.css'!
main-system on nethands

Gentoo - Debian - LFS
- - - - - - - - - - - - - - - - - - - - - - - - -
Beten wir alle zu unserem Schöpfer, dass der Internet Explorer 6 bald das Zeitliche segnet. Und wenn es geht, seinen jungen und auch nicht ganz koscheren Bruder mit der Nummer 7 gleich mitnimmt. (Versionsnummern natürlich beliebig austauschbar ;P )
[zitat von Peter Kropff - Tutorials HTML/CSS]
0

#10 Mitglied ist offline   bluescorp 

  • Gruppe: aktive Mitglieder
  • Beiträge: 323
  • Beigetreten: 23. Oktober 04
  • Reputation: 0
  • Wohnort:nähe Wien

geschrieben 10. März 2009 - 10:36

Naja, ist ja nicht viel Veränderung:

style.css:
CODE
#header{
position:absolute;
top:10px;
left:0px;
margin:0px 0px;
width:1015px;
height:126px;
background:url(img/logo.png);
}

#menue{
position:absolute;
top:77px;
left:250px;
width: 600px;
height: 28px;
}


ie.css
CODE
#header{
position:absolute;
top:10px;
left:0px;
margin:0px 0px;
width:1015px;
height:126px;
background:url(img/logo.png);
}

#menue{
position:absolute;
top:87px; <-- um 10px weiter nach unten verschoben
left:250px;
width: 600px;
height: 28px;
}


Mehr hab ich nicht verändert.... nur leider passiert da nix, wenn ich das so mache :blush:

MfG

Dieser Beitrag wurde von bluescorp bearbeitet: 10. März 2009 - 10:37

0

#11 Mitglied ist offline   Halt's_Maul_Paul 

  • Gruppe: aktive Mitglieder
  • Beiträge: 257
  • Beigetreten: 18. Dezember 04
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:HH

geschrieben 10. März 2009 - 20:57

Also bei mir funzt das wunderbar!
Da musst du iwo anders nen Fehler eingebaut haben!

Achja noch ein Tipp:
Die normale 'style.css' gilt natuerlich trotzdem auch fuer den IE, dh in der ie.css musst du nur Sachen angeben, die anders sind als in dem standard stylesheet.

EDIT: PS: Absolute Positionierung ist imho nicht besonders elegant! Guck dir lieber mal Sachen wie CSS Floaten bei Peter Kropff oder CSS Layout auf HTML-Seminar an! Sind auch beides sehr gute Seiten um mit HTML/CSS klar zu kommen!

Dieser Beitrag wurde von Halt's_Maul_Paul bearbeitet: 10. März 2009 - 21:00

main-system on nethands

Gentoo - Debian - LFS
- - - - - - - - - - - - - - - - - - - - - - - - -
Beten wir alle zu unserem Schöpfer, dass der Internet Explorer 6 bald das Zeitliche segnet. Und wenn es geht, seinen jungen und auch nicht ganz koscheren Bruder mit der Nummer 7 gleich mitnimmt. (Versionsnummern natürlich beliebig austauschbar ;P )
[zitat von Peter Kropff - Tutorials HTML/CSS]
0

#12 Mitglied ist offline   bluescorp 

  • Gruppe: aktive Mitglieder
  • Beiträge: 323
  • Beigetreten: 23. Oktober 04
  • Reputation: 0
  • Wohnort:nähe Wien

geschrieben 11. März 2009 - 10:38

Ah, super jetzt klappts! :-)

Ja, das mit der absoluten Positionierung gefällt mir leider auch nicht so toll ... es ist zwar leicht zu realisieren und bei meiner Seite, die immer gleich bleibt und nie mehr Text drinnen steht (ne Art Visitenkarte), ist es auch ziemlich egal denke ich.

Mein Problem liegt wie schon in Post#1 beschrieben, dass ich die Navigation einfach nicht in die Logografik bekommen habe, und so klappt das recht gut.

Wenn ich mal Zeit habe, werde ich die Homepage nochmals überarbeiten und versuchen das Ganze dynamischer zu machen :)

Fürs Erste reicht es so wie es im Moment ist :)

Danke für die Hilfe!

MfG
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0