|
|||
Problem mit CSS
Hallo,
ich möchte das die Navigationszeile auf dieser Seite www.leagueofballs.de/ neben dem Kasten mit dem Inhalt setzen. Hier der Link zu der eingebundenen CSS Datei www.privatepaste.com :: Paste Not Found LG MrBlack P.S. Ich hoffe auf schnelle Hilfe |
Sponsored Links |
|
|||
privatepaste.com :: Paste ID e2b439cbc3 Der Link müsste jetzt funktioneieren
|
Sponsored Links |
|
|||
Hallo,
1. Verzichte auf Frames 2. Tip: Benutze HMTL5 und CSS3, XHMTL ist bereits 2006 offiziell begraben worden 3. Kuriere deine divitis aus 4. Deine Verwendung des b-Elements ist veraltet. Es dient nicht mehr dazu Text fett darzustellen. Um etwas hervorzuheben sollte das strong-Element verwendet werden. 5. Benutze UTF-8 und lass die Maskierung von Umlauten u.s.w. weg 6. Du hast ein div main mit einer Breite von 630px. Darin befinden sich ein div inhalt mit einer Breite von 630px und ein div navi mit einer Breite von 220px. Wie sollen div inhalt und div navi da nebeneinander passen? Ich habe deine Startseite mal mit aktuellem HMTL/CSS semantisch korrekt erstellt und mit etwas Responsive Design gewürzt. Die Abstände, Schriftgrößen u.s.w. haben mich dabei nicht so sehr interessiert, die können ja noch einfach angepasst werden: Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt --> <title>2 Boxen nebeneinander</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Um alte IE HTML5-tauglich zu machen --> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></script> <![endif]--> <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) --> <style> @media all { /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */ header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 100%; } body { padding: 0; color: white; background-color: black; font-family: Verdana,Geneva,Arial,sans-serif; letter-spacing: 0.1rem; line-height: 1.6; width: 98%; padding: 0; margin: 1rem auto; } main { width: 80%; margin-left: 20%; display: flex; } article { background-color: #222; width: 70%; padding: 1rem; border: 1px solid #666; } article h1 { font-family: Times, "Times New Roman", serif; font-variant: small-caps; color: #0FA; margin-bottom: 2rem; } article strong { letter-spacing: 0.3rem; } nav { width: 30%; padding: 1rem; } ul { padding: 0; margin: 0; } li { list-style-type: none; } a { text-decoration: none; display: block; color: white; background-color: #222; padding: 0.1rem 0.5rem; border: 1px solid #666; margin-bottom: 0.2rem; } a:hover { background-color: black; } footer { text-align: center; } } @media only screen and (max-width: 1050px) { main { width: 100%; padding: 0; margin: 0; /*display: block;*/ flex-direction: column; } article { width: 100%; padding: 0 1rem; margin: 0; order: 2; } nav { width: 100%; padding: 0; margin: 0; order: 1; } nav h2 { display: none; } nav ul { display: flex; } li { text-align: center; flex: auto; } a { padding: 1rem 0.5rem; } } @media only screen and (max-width: 750px) { nav ul { flex-wrap: wrap; } li { width: 50%; } } @media only screen and (max-width: 500px) { li { width: 100%; } } </style> </head> <body> <main> <article> <h1>Die Senfies</h1> <p>Wir sind ein kleiner Clan, der Counter-Strike:Global Offensive spielt. Für CS:GO suchen wir noch aktive Mitglieder, die mit uns trainieren und Wettkampf spielen wollen. Es kommt uns nicht darauf an welcher Rang ihr seid, hauptsache ihr seid gute <strong>Teamplayer</strong>.</p> </article> <nav> <h2>Navigation</h2> <ul> <li><a href="#">Startseite</a></li> <li><a href="#">CS:GO</a> </li> <li><a href="#">CS:GO Ränge</a> </li> <li><a href="#">Kontakt</a> </li> </ul> </nav> </main> <footer> <p>Diese Website wurde erstellt von Nico (Ingamename: MrBlack) </p> </footer> </body> </html> MrMurphy Geändert von MrMurphy (22.04.2015 um 23:22 Uhr) |
Stichwörter |
css, navigation |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript | chrisol_76 | CSS | 2 | 21.07.2008 18:37 |
Css und Steam Problem | justinlenz | Offtopic | 3 | 27.03.2008 22:58 |
CSS Problem | Adriana | CSS | 0 | 09.09.2006 17:51 |
CSS Tips & Tricks | Webnauts | Ressourcen | 0 | 26.08.2006 00:04 |
Dringend: CSS Problem! | zero | CSS | 19 | 31.12.2005 19:34 |