zurück zur Startseite
  


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

Antwort
 
LinkBack Themen-Optionen Ansicht
  #31 (permalink)  
Alt 17.09.2014, 14:48
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2014
Beiträge: 45
glupto befindet sich auf einem aufstrebenden Ast
Standard Noch ne Frage

Danke nochmals für die viele Hilfe, ich kann wirklich jede Anregung brauchen. Bei den vielen css-Fehlern weiß ich nicht recht, wie ich manche eliminieren kann und ob ich alle eliminieren muss.

Aber eine andere Frage habe ich, Ihr kennt ja jetzt die Seite, ich möchte, dass die drei (bei normaler Browser-Fenstergröße) articles als Ganzes mittig sitzen, ich habe es jetzt so ungefähr mit der width-Angabe so hingekriegt, meine Versuche mit padding- oder margin:auto waren vorher nicht erfolgreich. Woran kann da liegen.

Gruß
glupto

Geändert von glupto (17.09.2014 um 14:54 Uhr)
Mit Zitat antworten
Sponsored Links
  #32 (permalink)  
Alt 17.09.2014, 21:19
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
Das geht so nicht du kommst mit Padding über 100 Prozent.
Die weite 100% brauchst du nicht.
Code:
}
.main {
    margin: 25px 0 20px;
    padding: 1% 1% 1% 2%;
    width: 100%;
}
Nicht .main clearen sondern Content.
Teste mit einer Hintergrundfarbe.
HTML-Code:
<div class="main clearfix">
<div class="content">
Teste mal so:
Code:
}
.main {
    background: #68a3ce;
    margin: 20px 0;
    padding: 1% 0;
}
.content {
    padding: 0 3% 0 0;
}
.content:after {
    content:"";
    clear: both;
    display: block;
}
article {
    background: none repeat scroll 0 0 #e6e6e6;
    border-radius: 16px;
    border: 3px solid #000;
    float: left;
    margin: 1% 0% 1% 3%;
    padding: 0% 0% 1% 0%;
    width: 29.8%;
    text-align: left;
}
}
Brauchst du DIV .main überhaupt?

setze HTML5 Elemente ein, die der semantischen Definition einer Webseite dienen können, also die Seite klar strukturieren.

<header> definiert den Kopfbereich einer Seite (nicht zu verwechseln mit <head>).
<nav> definiert den Navigationsbereich.
<section> steht für einen Abschnitt.
<main> definiert den Haupt-Bereich einer Website.
<article> weist auf einen Artikel oder Blogeintrag hin.
<aside> steht für eine Seitenleiste.
<details> steht für ein- und ausblendbare zusätzliche Informationen.
<summary> definiert eine Zusammenfassung eines <details>-Bereichs
<figure> steht für Bilder, Diagramme und Code-Blöcke.
<footer> definiert die Fußleiste.
______________
MfG Roland

Geändert von K.Roland (17.09.2014 um 21:54 Uhr)
Mit Zitat antworten
Sponsored Links
  #33 (permalink)  
Alt 17.09.2014, 21:50
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2014
Beiträge: 45
glupto befindet sich auf einem aufstrebenden Ast
Standard main/content

Hallo, ich habe gemerkt, dass ich eigentlich nur main ODER content brauche und habe die width:100% rausgenommen, aber mittig kriege ich es dennoch nicht hin, zumal sich die articles ohnehin nicht weiter ausdehnen, wenn ich den Rand links und rechts minimiere, weil ich ja festlegen muss, wieviele articles nebeneinander stehen (abhängig von der Fenstergröße). Idealvorstellung ist ja, dass bei Normalmonitor-Größen 3 Articles nebeneinander stehen und sich den Platz zentriert aufteilen, so kann ich mich jetzt nur heranpixeln, oder?

Gruß glupto
P.S. Ich würde übrigens gern den Nutzern ermöglichen, dass sie Einstellungen vornehmen können (Welche Medien, wieviel Schlagzeilen usw.), das wird vermutlich ohne Cookies und eigene Datenbank nicht gehen, oder? (Hat nichts mit css zu tun, ich weiß)

Geändert von glupto (17.09.2014 um 22:07 Uhr)
Mit Zitat antworten
  #34 (permalink)  
Alt 17.09.2014, 23:55
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Ich weis nicht genau, woran du scheitert.

Hier mal ein kleines Beispiel:

HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Test</title>

<style type="text/css">
* { margin: 0; padding: 0; }
html {
     font-family: Verdana, sans-serif;
     font-size: 120%;
}
#main {
    background: #68a3ce;
    padding-top: 3%;
}
#main:after {
    content:"";
    clear: both;
    display: block;
}
article {
    background: none repeat scroll 0 0 #ffb2b2;
    border: 3px solid #000;
    border-radius: 16px;
    box-sizing: border-box;
    margin-left: 3%;
    margin-bottom: 3%;
    float: left;
    width: 29.33%;
}   			
</style>

</head>	
<body>

<div id="main">

<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae!</p>
</article>

<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae!</p>
</article>

<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae!</p>
</article>

<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae!</p>
</article>

<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae!</p>
</article>

<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae!</p>
</article>

</div>
		
</body>	
</html>
_____________
MfG Roland
Mit Zitat antworten
  #35 (permalink)  
Alt 18.09.2014, 11:03
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger 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

Zitat:
Zitat von glupto Beitrag anzeigen
Danke nochmals für die viele Hilfe, ich kann wirklich jede Anregung brauchen. Bei den vielen css-Fehlern weiß ich nicht recht, wie ich manche eliminieren kann und ob ich alle eliminieren muss.
Ich hab sie mir nicht im Detail angeschaut, ich würde aber auf jeden Fall die syntaxfehler beseitigen. z.b.
Code:
.header a 	Ungültige Nummer : left Zu viele Werte oder die Werte werden nicht erkannt : 3 px 
15 	a:link 	Die Eigenschaft text-underline existiert nicht : none
Ich vermute die Fehler der data Resourcen sind Folgefehler. Die Warnungen kannst du wohl ignorieren, diese betreffen hauptsächlich Herstellerspezifische Präfixe.
Mit Zitat antworten
  #36 (permalink)  
Alt 18.09.2014, 12:56
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2014
Beiträge: 45
glupto befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von K.Roland Beitrag anzeigen
Ich weis nicht genau, woran du scheitert.
Ich leider auch nicht, habe Dein Beispiel mal bei mir ausprobiert, aber es wird nicht mittig, auch nicht, was ja dann nötig wäre, wenn ich bei main das padding rausnehme, was man ja noch mitrechnen muss.

Aber danke, werde mal Protonenbeschleunigers Rat folgen und erstmal Syntaxfehler beseitigen.

Gruß
glupto
Mit Zitat antworten
  #37 (permalink)  
Alt 18.09.2014, 16:45
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 leider auch nicht, habe Dein Beispiel mal bei mir ausprobiert, aber es wird nicht mittig, auch nicht, was ja dann nötig wäre, wenn ich bei main das padding rausnehme, was man ja noch mitrechnen muss.
Vielleicht erst mal eine separate Testseite erstellen und Teste dich mal dort heran.

Edit fiddle - JSFiddle

HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Test</title>

<style type="text/css">
* { margin: 0; padding: 0; }
html {
     font-family: Verdana, sans-serif;
     font-size: 120%;
}
#main {
    background: #68a3ce;
    padding-top: 3%;
}
#main:after {
    content:"";
    clear: both;
    display: block;
}
article {
    background: none repeat scroll 0 0 #ffb2b2;
    border: 3px solid #000;
    border-radius: 16px;
    box-sizing: border-box;
    margin-left: 3%;
    margin-bottom: 3%;
    float: left;
    width: 29.33%;
}
article p {
    padding: 10px;
}
@media all and (min-width: 230px) and (max-width: 450px) {
article {
    float: none;
    width: 94%;
    background: #fff;
}
}
@media all and (min-width: 450px) and (max-width: 635px) {
article {
    width: 45%;
    background: orange;
}
}
@media all and (min-width: 635px) and (max-width: 945px) {
article {
    width: 45%; 
    background: aqua;
}
}
@media all and (min-width: 945px) and (max-width: 1051px) {
article {
    width: 29%;
    background: orange;
}
}
</style>

</head>	
<body>

<div id="main">

<article>
<h2>Box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae!</p>
</article>

<article>
<h2>Box 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae!</p>
</article>

<article>
<h2>Box 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae!</p>
</article>

<article>
<h2>Box 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae!</p>
</article>

<article>
<h2>Box 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae!</p>
</article>

<article>
<h2>Box 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae!</p>
</article>

</div>
		
</body>	
</html>
__________________
MfG Roland
Mit Zitat antworten
  #38 (permalink)  
Alt 18.09.2014, 19:45
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2014
Beiträge: 45
glupto befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
Ich hab sie mir nicht im Detail angeschaut, ich würde aber auf jeden Fall die syntaxfehler beseitigen. z.b.
Code:
.header a 	Ungültige Nummer : left Zu viele Werte oder die Werte werden nicht erkannt : 3 px 
15 	a:link 	Die Eigenschaft text-underline existiert nicht : none
Ich vermute die Fehler der data Resourcen sind Folgefehler. Die Warnungen kannst du wohl ignorieren, diese betreffen hauptsächlich Herstellerspezifische Präfixe.
Also, das mit dem Laden der background-images kriege ich nicht weg, verstehe das auch nicht wirklich, weil ich diese Art der Image-Einbindung selbst nichr verwende, es aber Bestandteil des eingebundenen Slide-Menüs ist - und das Menü-Icon, das ich brauche, kommt ja so auch. Die übrigen Fehler habe ich eliminiert.

Gruß glupto
Mit Zitat antworten
  #39 (permalink)  
Alt 20.09.2014, 23:27
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.01.2014
Beiträge: 45
glupto befindet sich auf einem aufstrebenden Ast
Standard Schwarzer Balken im slidemenu

...also ohne dass ich daran was geändert hätte, zeigt das seitenmenü bei Smartphone Aufruf einen schwarzen Balken zwischen menu uns Hauptseite. Woher kann das denn jetzt kommen.
Fragt
Glupto
Mit Zitat antworten
Sponsored Links
  #40 (permalink)  
Alt 22.09.2014, 09:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Da wird gar kein Menü angezeigt (Getestet mit Firefox und dann Strg + Shift + M drücken)
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 19:02
Font der Überschrift ändern (Problem) artist CSS 2 07.12.2007 11:01
Design zu CSS/HTML verarbeiten - Problem häufen sich. Grafikamateur CSS 2 06.08.2007 10:57
Problem bei Div's - zwei mal das gleiche und doch nicht ... Niriel CSS 10 09.06.2005 18:39
Problem mit einem CSS Layout nARC CSS 20 21.05.2005 07:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:38 Uhr.