zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden header/navi-Problem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #21 (permalink)  
Alt 01.09.2014, 22:30
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Hallo glupto,

was dein Footer betrifft.

Verzichte auf feste Höhe stattdessen setze "line-height" richtig ein, achte darauf was du mit CSS ansprichst.
Der Footer passt sich Dan der Browsergröße Höhe automatisch an beim Verkleinern.

Die Schriftgröße 14 Pixel ist zu gering für eine Überschrift.

Überschriften brauchen auch keine Fettschrift "bold per CSS zugewiesen werden ist Standard.

Versuch das mal umzusetzen.
____________
MfG Roland

HTML-Code:
<div class="footer">
<h4>Verantwortlich für dieses nichtkommerzielle Informationsangebot: P. Tomuscheit 2014 </h4>
</div>
Code:
h4, h5, h6 {
    font-size: 14px;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    line-height: 1;
    margin: 8px 0 0;
}
.footer {
    clear: both;
    color: #fff;
    font-size: 14px;
    margin: 4px;
    padding: 2px 0 0;
    text-align: center;
}
.footer {
    background: none repeat scroll 0 0 #006985;
    height: 30px;
}
.header, .footer {
    box-sizing: border-box;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 40px;
}
Mit Zitat antworten
Sponsored Links
  #22 (permalink)  
Alt 07.09.2014, 15:11
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2014
Beiträge: 45
glupto befindet sich auf einem aufstrebenden Ast
Standard Navi

Danke noch mal für die Tipps, werde auch den footer noch entsprechend ändern. Im Moment habe ich immer noch ein Problem mit der Navi. Ich habe nach zahlreichen anderen Versuchen versucht, die Menü-Listenpunkte auszublenden mit

Code:
#menu1 a {display:none;}
so dass nur nich Uhrzeit stehen bleibt und das Menü durch ein icon ersetzt wird. Ich weiß nur nicht, wieso dann die Menüleistenhöhe verringert wird.

Wenn jemand eine Idee hat, wäre ich dankbar.

Gruß
glupto
Noch mal der Link nachrichtentisch
Mit Zitat antworten
Sponsored Links
  #23 (permalink)  
Alt 08.09.2014, 07:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.039
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Du verwendest die Links um die Höhe zu definieren und wunderst dich, dass die Höhe sich ändert, wenn du besagte Links ausblendest?
Mit Zitat antworten
  #24 (permalink)  
Alt 08.09.2014, 11:38
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von glupto Beitrag anzeigen
Ich weiß nur nicht, wieso dann die Menüleistenhöhe verringert wird.
Wie cloned schon sagte.

Entferne mal hier Margin und auch Float existiert schon.
Code:
#datumzeit {
    float: right;
    margin: 12px 3% 0 10px !important;
}
Entferne auch dieses
Code:
}
#menu1 {
    padding: 10px 0 0;
    width: 100%;
}
#menu1 a {
    height: 25px;
}
Dan Teste mal so mit Padding und die Höhe mit line-height anpassen.
Code:
}
#menu1 li {
    padding: 10px 0; 
    line-height: 30px;
}
______________
MfG Roland
Mit Zitat antworten
  #25 (permalink)  
Alt 09.09.2014, 13:29
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2014
Beiträge: 45
glupto befindet sich auf einem aufstrebenden Ast
Standard Danke

für die Hinweise. Habe sie umgesetzt, das letzte li-Element, die "Datumzeit" klemmt allerdings noch oben am Rand und ist nicht, wie die anderen mittig. Ich verstehe nicht, dass für dieses Element, die ursprünglichen ul, li-Definitionen gelten (Margin:0) während für die menu1 li a-Elemente diese nicht gelten und auch wenn ich "Datumzeit" dieselben Attribute zuordne wie bei menu1 li a, wird Datumzeit nicht vertikal "mittig"...
AUßerdem hängt das erste Unter-Element ul ul li jetzt mit etwas zu weit oben und überlappt die Menü-Leiste minimal.

Gruß
glupto
Mit Zitat antworten
  #26 (permalink)  
Alt 09.09.2014, 16:19
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

O.K. Teste mal bitte so.

ohne: font: bold 12px/25px Arial,Helvetica;
Code:
}
#menu1 a {
    font: bold 12px/25px Arial,Helvetica;
}
ohne: line-height: 15px;
Code:
#menu1 li {
    padding: 10px 0;
}
Dan sollte es hinhauen.

Oder du fügst es hier auch hinzu:
Code:
}
#datumzeit, #zeit {
    font: bold 12px/25px Arial,Helvetica;
}
____________
MfG Roland

Geändert von K.Roland (09.09.2014 um 18:45 Uhr)
Mit Zitat antworten
  #27 (permalink)  
Alt 10.09.2014, 13:58
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2014
Beiträge: 45
glupto befindet sich auf einem aufstrebenden Ast
Standard Jetzt

Danke, aber nun hängt der erste Listenpunkt bei den Submenus in der Luft, so dass er nicht mehr erreichbar ist. Und dieSchrift sitzt nicht mehr vertikal mittig und die Breite ist jetzt auch anders.

Werde da wohl noch ein wenig herumexperimentieren müssen.

Gruß
glupto
Mit Zitat antworten
  #28 (permalink)  
Alt 10.09.2014, 15:42
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von glupto Beitrag anzeigen
Danke, aber nun hängt der erste Listenpunkt bei den Submenus in der Luft, so dass er nicht mehr erreichbar ist. Und dieSchrift sitzt nicht mehr vertikal mittig und die Breite ist jetzt auch anders.
Hier neu anpassen

Code:
}
#menu1 li {
    padding: 6px 0;
}
#menu1 ul {
    background: linear-gradient(#444, #111) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 5px;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
    display: none;
    left: 0;
    list-style-type: none !important;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 30px;
    z-index: 99999;
}
#menu1 ul li:first-child > a:after {
    border-bottom: 8px solid #444;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    content: "";
    height: 0;
    left: 30px;
    position: absolute;
    top: -10px;
    width: 0;
}
_____________-
MfG Roland
Mit Zitat antworten
  #29 (permalink)  
Alt 15.09.2014, 12:43
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.931
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Ein Blick auf die CSS Fehler hilft vielleicht auch noch
W3C CSS Validator results for http://nachrichtentisch.de/_stickyheaderneu5.php (CSS level 3)
Mit Zitat antworten
Sponsored Links
  #30 (permalink)  
Alt 15.09.2014, 15:31
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Hallo glupto,

nur als Hinweis.

In den Boxen Tagesschau usw. diese Grafiken musst du nicht floaten.

Code:
.img-rounded {
    border-radius: 10px;
    float: left;
    margin-bottom: 5px;
    margin-left: 3px;
    margin-top: 5px;
    max-width: 80%;
    padding-left: 3px;
    padding-top: 2px;
}
Teste mal so:
Code:
article a img.img-rounded {
    border-radius: 10px;
    margin: 5px 0px 5px 10px;
    max-width: 80%;
    padding: 0;
    vertical-align: bottom;
}
article { text-align: left; }
Die <article> Listenpunkte in der Box Tagesschau würde ich mit Margin erst mal ins Ul-Element hineinschieben.

Das kannst du selbst mal austesten gebe einfach mal Ul und Li eine Hintergrundfarbe.

Dan sieht man, wo sich der Listenpunkt befindet.

_____________
MfG Roland
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
header

Themen-Optionen
Ansicht

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 an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit margin-left Shyne CSS 7 03.03.2008 18:02
Font der Überschrift ändern (Problem) artist CSS 2 07.12.2007 10:01
Design zu CSS/HTML verarbeiten - Problem häufen sich. Grafikamateur CSS 2 06.08.2007 09:57
Problem bei Div's - zwei mal das gleiche und doch nicht ... Niriel CSS 10 09.06.2005 17:39
Problem mit einem CSS Layout nARC CSS 20 21.05.2005 06:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:08 Uhr.