Autor |
Nachricht |
vali97
Threadersteller
Dabei seit: 10.10.2012
Ort: Bockenau
Alter: 27
Geschlecht:
|
Verfasst Mo 15.10.2012 20:07
Titel div von links nach rechts ? HILFE |
|
|
ich bin dabei eine Seite zu programmieren und im Menü läuft so einiges schief.
So sollte das normalerweise Aussehen. In IE 9-10, Chrome 21 sieht alles prima aus.
Doch im Browser Safari Alle Versionen, Firefox 11, IE 7-8 sieht das so aus :
Kann jemand vll. helfen wie ich das so mache wie auf dem ersten bild ?
|
|
|
|
|
ChrisKam
Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht:
|
Verfasst Mo 15.10.2012 20:11
Titel
|
|
|
Zeig' mal Deinen Quelltext. Und das macht man übrigens z.B. mit einer Liste, die <li> Elementen sollten aber display: inline sein und nicht block. Gibt aber noch 1000 andere Möglichkeiten, ohne in Deinen Code zu schauen wird das hier ein Ratespiel.
|
|
|
|
|
Anzeige
|
|
|
vali97
Threadersteller
Dabei seit: 10.10.2012
Ort: Bockenau
Alter: 27
Geschlecht:
|
Verfasst Mo 15.10.2012 20:25
Titel
|
|
|
html :
<!--nav-->
<div id="navheader">
<a style="text-decoration:none;" href="..."><h4>Impressum</h4></a>
<a style="text-decoration:none;" href="..."><h1>Kontakt</h1></a>
<a style="text-decoration:none;" href="..."><h1>Blog</h1></a>
<a style="text-decoration:none;" href="..."><h1 style="margin-right:0px;">Werbung</h1></a>
</div>
<!--nav-->
css ohne media queries :
/*nav*/
#navheader {
width:auto;
height:85px;
position:relative;
float:right;
margin-top:0px;
}
/*nav*/
/*h1*/
a h1 {
font-family:Arial, Helvetica, sans-serif !important;
font-size:16px ;
color:#966643 !important;
text-align:right;
margin-right:30px;
margin-top:0px;
padding-top:44px;
text-decoration:none;
border-top:0px solid #966643;
display:inline-block;
}
a:hover h1 {
font-family:Arial, Helvetica, sans-serif !important;
font-size:16px ;
color:#333 !important;
text-align:right;
margin-right:30px;
margin-top:0px;
padding-top:38px;
text-decoration:none;
border-top:6px solid #333;
display:inline-block;
}
/*h1*/
/*h4*/
a h4 {
font-family:Arial, Helvetica, sans-serif !important;
font-size:16px ;
color:#333 !important;
text-align:right;
margin-right:30px;
margin-top:0px;
padding-top:38px;
text-decoration:none;
border-top:6px solid #333;
display:inline-block;
}
a:hover h4 {
font-family:Arial, Helvetica, sans-serif !important;
font-size:16px ;
color:#333 !important;
text-align:right;
margin-right:30px;
margin-top:0px;
padding-top:38px;
text-decoration:none;
border-top:6px solid #333;
display:inline-block;
}
/*h4*/
|
|
|
|
|
vali97
Threadersteller
Dabei seit: 10.10.2012
Ort: Bockenau
Alter: 27
Geschlecht:
|
Verfasst Mo 15.10.2012 20:27
Titel
|
|
|
Sry wenn ich fehler im Code habe. Bin am Anfang meiner Ausbildung.
|
|
|
|
|
ChrisKam
Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht:
|
Verfasst Mo 15.10.2012 20:37
Titel
|
|
|
OK, andere Frage: Warum glaubst Du denn, dass die <a>s nebeneinander stehen sollten? In deinem CSS finde ich dazu keinen Anhaltspunkt
Damit Elemente floaten, müssen sie eine feste Breite haben. Sonst klappt das nicht, selbst wenn Du Deinen <a>s ein float: left zuweist. Ich würde die Navi aber lieber in eine Liste packen, und diese Liste dann entsprechend stylen. Überschriftselemente (<h1> usw.) haben in einer Navigation übrigens nichts verloren.
|
|
|
|
|
vali97
Threadersteller
Dabei seit: 10.10.2012
Ort: Bockenau
Alter: 27
Geschlecht:
|
Verfasst Mo 15.10.2012 21:11
Titel
|
|
|
So, ich hab jetzt ein paar Sachen von Ihren Tipps angewendet und es funktioniert in allen Browsern !!! Danke
Mein Code sieht jetzt so aus :
Html :
Code: | <div id="navheader">
<h>Impressum</h>
<a href="...">Kontakt</a>
<a href="...">Blog</a>
<a style="margin-right:0px;" href="...">Werbung</a>
</div> |
CSS :
Code: | /*nav*/
#navheader {
width:auto;
height:85px;
position:relative;
float:right;
margin-top:0px;
}
/*nav*/
/*a*/
#navheader a {
font-family:Arial, Helvetica, sans-serif !important;
font-size:16px ;
color:#966643 !important;
font-weight:bold;
text-align:right;
margin-right:30px;
margin-top:0px;
padding-top:44px;
text-decoration:none;
border-top:0px solid #966643;
display:inline-block;
}
#navheader a:hover {
font-family:Arial, Helvetica, sans-serif !important;
font-size:16px ;
color:#333 !important;
font-weight:bold;
text-align:right;
margin-right:30px;
margin-top:0px;
padding-top:38px;
text-decoration:none;
border-top:6px solid #333;
display:inline-block;
}
/*a*/
/*a*/
#navheader h {
font-family:Arial, Helvetica, sans-serif !important;
font-size:16px ;
color:#333 !important;
font-weight:bold;
text-align:right;
margin-right:30px;
margin-top:0px;
padding-top:38px;
text-decoration:none;
border-top:6px solid #333;
display:inline-block;
}
#navheader h {
font-family:Arial, Helvetica, sans-serif !important;
font-size:16px ;
color:#333 !important;
font-weight:bold;
text-align:left;
margin-right:30px;
margin-top:0px;
padding-top:38px;
text-decoration:none;
border-top:6px solid #333;
display:inline-block;
} |
|
|
|
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Mo 15.10.2012 21:45
Titel
|
|
|
Was soll denn bitte <h> sein?
|
|
|
|
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht:
|
Verfasst Di 16.10.2012 06:03
Titel
|
|
|
Eine Navigation ist eine Liste von gleichwertigen Verweisen, eine Aufzählung, darum solltest du im Hinblick auf Semantik auch eine solche dafür nehmen. Damit sparst du dir auch den zusätzlich div-Wrapper.
<h> ist kein HTML-Element.
Dein CSS-Code steckt voll von überflüssigem Code. z.B. wird die Schriftart (i.d.R.) vom Elternelement auf Kindelemente vererbt.
Inline-Style ist schlechter Stil.
Ein sicheres Zeichen dafür, dass du einen groben Designfehler in deinen CSS hast, ist, wenn du "!Important" verwenden musst.
Vielen Angaben wie lassen sich in Shortcodes (z.B. margin, padding) zusammenlegen.
Schau dir mal den Google Styleguide für HTML und CSS an, der ist zwar stellenweise recht radikal, aber sehr anschaulich.
Gruß
Karl
|
|
|
|
|
|
|
|
Ähnliche Themen |
Rechts Links td background=
DW-Extension für Frames LINKS-RECHTS unverschachtelt
HTML - 2 Objekte links und rechts ausrichten
Flash AS3: Links, Rechts scrollen (Mouseover)
HTML & CSS: Unternavigation mit Pfeil links und rechts
CSS: Schattierung links un Rechts der Website - kl. Problem
|
|