|
|||
Habe ein Problem mit einer Breitenangabe
Hallo und schönen Vormittag zusammen!
Ich will gar nicht lange drum rum quatschen - ich habe ein Problem mit folgendem CSS Layout: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Unbenanntes Dokument</title> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <div id="logo">Logo</div> <div id="extranav"> <div id="contact">Kontakt</div> <div id="language"> <ul> <li><a href="#">Deutsch</a></li> <li><a href="#">English</a></li> </ul> </div> <div id="login">Login</div> </div> <div id="mainnav"> <ul> <li><a href="#">Main01</a></li> <li><a href="#">Main02</a></li> </ul> </div> </div> </div> </body> </html> Code:
* { margin: 0px; padding: 0px; } html { font-size: 100%; } body { font: 0.689em Verdana, Arial, Helvetica, sans-serif; background: #CCCCCC; background-image: url(site-bg.gif); color: #000000; } h1 { font-size: 1.8em; } h2 { font-size: 1.2em; } /* ID's */ #container { position: relative; width: 900px; /* -- centers the container element */ margin-left: auto; margin-right: auto; color: #000000; } #blackborder { background: transparent; color: #000000; border: 1px #666666 solid; } #header { position: relative; height: 116px; background: #FFFFFF; color: #000000; } #logo { float: left; width: 210px; height: 116px; background: #0000FF; background-image: url(logo.gif); color: #FFFFFF; } /* ------------------------------------------------------------------------------------------------------- */ /* --- main navigation on top */ #mainnav { font-weight: bold; position: absolute; left: 229px; bottom: 29px; margin: 0px; padding: 0px; } #mainnav ul { list-style-type: none; } #mainnav li { display: inline; } #mainnav a { padding: 0 4px; } #mainnav a:link, #mainnav a:visited { color: #69696b; text-decoration: none; } #mainnav a:hover { color: #00763b; } #mainnav li.pressed { color: #00763b; padding: 0 5px; } /* ------------------------------------------------------------------------------------------------------- */ /* --- extra navigation on top */ #extranav { display: block; overflow: hidden; color: #000000; } #extranav ul { list-style-type: none; } #extranav li { display: inline; } #extranav a { padding: 0 4px; } #extranav a:link, #extranav a:visited { color: #69696b; text-decoration: none; } #extranav a:hover { color: #00763b; } #extranav li.pressed { color: #00763b; padding: 0 5px; } #contact { float: left; padding: 10px; background: #FF6600; } #language { float: right; padding: 10px; background: #00FFFF; color: #FFFFFF; } #login { padding: 10px; color: #000000; } Irgend welche Ideen? Wäre euch sehr dankbar! atmosfear Geändert von atmosfear (08.10.2008 um 10:13 Uhr) |
Sponsored Links |
Sponsored Links |
|
|||
Hallo!
Danke für die schnelle Antwort! Also wenn ich die Seite im Firefox 3.0.3 betrachte, dann habe ich das Problem, dass der Language Bereich schön rechtsbündig ist, Kontakt aber links plaziert ist, und die Login-Spalte extrem breit wird (also den Rest einnimmt) Alle 3 Spalten sollten aber rechtsbündig ausgerichtet sein, und nur so breit sein, wie auch der Inhalt ist... Ich glaube du hast mich falsch verstanden!? Warum ist die Aufteilung seltsam, das würd mich interessieren - man kann immer was dazu lernen! EDIT: Die Breite kommt vom Container, nicht vom Header, sorry... DANKE atmosfear |
|
||||
Bitte stell lauffähigen Code ein, oder besser noch einen Link zu deinem Problemfall (siehe Hinweise für Fragende).
Warum positionierst du die Navigation absolut? Wozu brauchst du so viele Divs? Sie haben keine semantische Bedeutung und sollten nur eingesetzt werden wo es wirklich Sinn macht. |
|
|||
Hallo!
Erstens: Warum sollte der Code nicht lauffähig sein? Ok ich habe die html und body Tags nicht reinkopiert, aber jetzt auch gleich geändert. Zweitens: Kannst du mir einen Tip geben, wie ich mit weniger divs auskomme? Ich brauche verschiedene Bereiche auf meiner Seite, die ich dann später mittels eines CMS ansprechen kann. Darum die divs, denke ich... Drittens: Die Navigation muss an einer bestimmten Stelle stehen um dann später in die Headergrafik reinzupassen. Ich wüsste nicht, wie ich es ohne absolute Positionierung hinbringen sollte!? DANKE! atmosfear |
|
||||
Zitat:
Also eine richtige Skizze - nicht Text Beschreibungen. Dann können wir Dir auch eher sagen wie Du es aufbauen kannst. Wenn Du beim #login ein float:left reinmachst dann bekommt er die Grösse des Inhalts. Geändert von In4matiker (08.10.2008 um 10:28 Uhr) |
|
||||
Zitat:
Ich persönlich halte es immer noch für einen zu hohen Aufwand und schau mir deshalb nur Links an, aber evtl. reicht der Code anderen Helfern schon. Zitat:
Da reichen entsprechend Abstände aus. Geändert von inta (08.10.2008 um 11:16 Uhr) |
|
|||
Hallo nochmal,
also gut, soweit bin ich, ich weiss allerdings immer noch nicht, wie ich die Breite der 3 Spalten oben einschränken kann!? Also die Breite der einzelnen Spalten passt schon, aber bekomme ich "Login" und "Kontakt" nach rechts? @inta Habe die absolute Positionierung nun rausgenommen und durch margins ersetzt. Klappt perfekt - hattest Recht... Hier noch der aktuelle Code HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Unbenanntes Dokument</title> <link href="uploads/tf/styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <div id="logo">Logo</div> <div id="extranav"> <div id="contact"> <ul> <li><a href="#">Kontakt</a></li> </ul> </div> <div id="language"> <ul> <li><a href="#">Deutsch</a></li> <li><a href="#">English</a></li> </ul> </div> <div id="login"> <ul> <li><a href="#">Login</a></li> </ul> </div> </div> <div id="mainnav"> <ul> <li><a href="#">Main01</a></li> <li><a href="#">Main02</a></li> </ul> </div> </div> </body> </html> Code:
/* * { margin: 0px; padding: 0px; } html { font-size: 100%; } body { font: 0.689em Verdana, Arial, Helvetica, sans-serif; background: #CCCCCC; background-image: url(site-bg.gif); color: #000000; } h1 { font-size: 1.8em; } h2 { font-size: 1.2em; } /* ID's */ #container { position: relative; width: 900px; /* -- centers the container element */ margin-left: auto; margin-right: auto; color: #000000; } #header { position: relative; height: 116px; background: #FFFFFF; color: #000000; } #logo { float: left; width: 210px; height: 116px; background: #0000FF; background-image: url(logo.gif); color: #FFFFFF; } /* ------------------------------------------------------------------------------------------------------- */ /* --- main navigation on top */ #mainnav { font-weight: bold; margin-top: 39px; margin-right: 0px; margin-bottom: 0px; margin-left: 229px; padding: 0px; } /* ------------------------------------------------------------------------------------------------------- */ /* --- extra navigation on top */ #extranav { display: block; overflow: hidden; color: #000000; background-color: #9999FF; } #contact { float: left; padding: 10px; background: #FF6600; } #language { float: right; padding: 10px; background: #00FFFF; color: #FFFFFF; } #login { float: left; padding: 10px; color: #000000; background: #FFFF00; } /* ------------------------------------------------------------------------------------------------------- */ #imagepic_start { width: 900px; height: 294px; background-image: url(image_start.jpg); } /* ------------------------------------------------------------------------------------------------------- */ /* --- main container (main navigation, content & news block) */ #main { clear: both; display: block; overflow: hidden; margin-top: 6px; border-top: 2px #D5D5D5 solid; background-color: #FFFFFF; color: #000000; } #left { float: left; width: 161px; /* actually 209 (149 + 2 * padding) */ margin-top: 20px; padding: 10px 24px; border-right: 1px #D5D5D5 solid; color: #69696b; font-weight: bold; } #content { margin: 0 0 0 209px; padding: 30px 24px; color: #69696b; } /* ------------------------------------------------------------------------------------------------------- */ /* --- footer */ #footer { clear: both; margin-top: 6px; border-top: 2px #D5D5D5 solid; margin-bottom: 10px; padding: 10px; text-align: right; background-color: #FFFFFF; } /* ------------------------------------------------------------------------------------------------------- */ /* --- lists and links */ #mainnav ul, #left ul { list-style-type: none; } #mainnav li { display: inline; } #left li { display: block; } #mainnav a, #left a { padding: 0 4px; } #mainnav a:link, #mainnav a:visited, #left a:link, #left a:visited { color: #69696b; text-decoration: none; } #mainnav a:hover, #left a:hover { color: #00763b; } #mainnav li.pressed, #left li.pressed { color: #00763b; padding: 0 5px; } /* ------------------------------------------------------*/ #footer ul, #extranav ul, { list-style-type: none; } #footer li, #extranav li { display: inline; } #footer a, #extranav a { padding: 0 4px; } #footer a:link, #mainnav a:visited, #extranav a:link, #extranav a:visited { color: #69696b; text-decoration: underline; } #footer a:hover, #extranav a:hover { color: #00763b; } #footer li.pressed, #extranav li.pressed { color: #00763b; padding: 0 5px; } atmosfear Geändert von atmosfear (08.10.2008 um 11:26 Uhr) |
Sponsored Links |
|
||||
Wiso machst Du immer noch ein DIV um das contact, language, login und mainnav?
Das geht auch ohne - direkt in das ul die ID reinmachen. Und wenn Du sowiso nur 1 Link hast (z.B. Kontakt) dann kannst Du auch direkt das a nehmen und brauchst die Liste nicht (Liste = nur bei mehreren Links). Die Liste ist z.B. sinnvoll bei den Sprachen (da kannst ja u.U. auch noch mehr geben als nur die 2 jetzt). Geändert von In4matiker (08.10.2008 um 11:44 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Navi problem unter ie6 | .kewin | CSS | 3 | 20.11.2007 15:47 |
Design zu CSS/HTML verarbeiten - Problem häufen sich. | Grafikamateur | CSS | 2 | 06.08.2007 09:57 |
Problem mit WordPress und dem Bilder Upload | Maxefix | Serveradministration und serverseitige Scripte | 0 | 19.12.2006 14:58 |
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 |