|
|||
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) |
Sponsored Links |
|
|||
Zitat:
Die weite 100% brauchst du nicht. Code:
} .main { margin: 25px 0 20px; padding: 1% 1% 1% 2%; width: 100%; } Teste mit einer Hintergrundfarbe. HTML-Code:
<div class="main clearfix"> <div class="content"> 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; } } 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) |
Sponsored Links |
|
|||
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) |
|
|||
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 |
|
|||
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 |
|
|||
Zitat:
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 |
|
|||
Zitat:
Gruß glupto |
|
|||
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 |
Sponsored Links |
Stichwörter |
header |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |