mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 10:29 Benutzername: Passwort: Auto-Login

Thema: div von links nach rechts ? HILFE vom 15.10.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> div von links nach rechts ? HILFE
Seite: 1, 2  Weiter
Autor Nachricht
vali97
Threadersteller

Dabei seit: 10.10.2012
Ort: Bockenau
Alter: 27
Geschlecht: Männlich
Verfasst Mo 15.10.2012 20:07
Titel

div von links nach rechts ? HILFE

Antworten mit Zitat Zum Seitenanfang

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 ?
*Schnief*
  View user's profile Private Nachricht senden
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst Mo 15.10.2012 20:11
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
vali97
Threadersteller

Dabei seit: 10.10.2012
Ort: Bockenau
Alter: 27
Geschlecht: Männlich
Verfasst Mo 15.10.2012 20:25
Titel

Antworten mit Zitat Zum Seitenanfang

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*/
  View user's profile Private Nachricht senden
vali97
Threadersteller

Dabei seit: 10.10.2012
Ort: Bockenau
Alter: 27
Geschlecht: Männlich
Verfasst Mo 15.10.2012 20:27
Titel

Antworten mit Zitat Zum Seitenanfang

Sry wenn ich fehler im Code habe. Bin am Anfang meiner Ausbildung.
  View user's profile Private Nachricht senden
ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich
Verfasst Mo 15.10.2012 20:37
Titel

Antworten mit Zitat Zum Seitenanfang

OK, andere Frage: Warum glaubst Du denn, dass die <a>s nebeneinander stehen sollten? In deinem CSS finde ich dazu keinen Anhaltspunkt *zwinker*

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
vali97
Threadersteller

Dabei seit: 10.10.2012
Ort: Bockenau
Alter: 27
Geschlecht: Männlich
Verfasst Mo 15.10.2012 21:11
Titel

Antworten mit Zitat Zum Seitenanfang

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;
}
  View user's profile Private Nachricht senden
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Mo 15.10.2012 21:45
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
<h>Impressum</h>
Was soll denn bitte <h> sein?
  View user's profile Private Nachricht senden
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht: Männlich
Verfasst Di 16.10.2012 06:03
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.