 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
festplatte
Threadersteller
Dabei seit: 05.02.2007
Ort: -
Alter: 45
Geschlecht: 
|
Verfasst Mi 26.09.2007 11:28
Titel [CSS] Haeder-/Listenproblem |
  |
|
Hallo Leute.
Ich stehe vor einem CSS-Problem. Bin noch relativ neu in Sachen CSS und soll jetzt eine Testseite mit folgendem Aufbau erstellen:
Der Content und die rechte und linke Navi ist kein Problem. Ich hänge am Header.
Ich schaffe es zwar, dass das Logo links ist und der obere Leiste rechts. Aber ich schaffe es nicht, dem ganzem eine Hinterrgrundfarbe zu vergeben. (Also rechts oben das mit den roten Kästen).
Wie man sieht hat das links eine Einkerbung und der Rest hat eine Hintergrundfarbe. Immer dort wo Text steht sollen Links rein. Aber irgendwie schaffe ich es nicht, eine Hintergrundfarbe zu vergeben. Wenn ich eine feste Höhe vergebe (was vonnöten ist) und dem ganzen eine Background-color vergebe, steht der Text unter dem farbigen Balken.
Und ich weiß auch nicht, wie ich es schaffen könnte links die Einbuchtung anzugeben. Das ganze soll nämlich mit em gemacht werden.
Wäre für jede Hilfe dankbar. Bin hier grad am verzweifeln.
CSS:
| Code: | body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 59em;
background: #FFFFFF;
margin: 0 auto;
text-align: left;
}
#header {
background: #DDDDDD;
padding: 0;
}
#header h1 {
margin: 0;
padding: 0;
}
#logo {
float:left;
width:337px;
height:143px;
}
.zielgruppen-navi {
font-size:14px;
float:right;
height:43px;
margin-top:42px;
text-align: right;
padding-right: 38px;
background-color: #808080;
}
#zielgruppen-navi li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
#zielgruppen-navi a:link, #zielgruppen-navi a:visited {
color: #333;
background-color: transparent;
text-decoration: none;
}
#zielgruppen-navi a:hover, #zielgruppen-navi a:active {
color: #FF0000;
}
.suche {
float:right;
text-align: right;
padding-right: 15px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
} |
HTML:
| Code: | <body>
<div id="container">
<div id="header"><img src="img/logo-head.jpg" id="logo" alt="Logo" width="337" height="143" />
<span class="zielgruppen-navi">
<ul id="zielgruppen-navi">
<li><img src="img/event-inaktiv.jpg" alt="Testlink1" border="0" /><a href="#">Testlink1</a></li>
<li><a href="#">Testlink2</a></li>
<li><a href="#">Testlink3</a></li>
</ul>
</span>
<span class="suche"><input name="Suchen" type="text" size="15" /><input type="submit" name="Suchen2" id="Suchen" value="Senden" /></span>
<!-- end #header -->
</div>
<br class="clearfloat" />
<div id="sidebar1">
<h3>sidebar1-Inhalt</h3>
<p>Die Hintergrundfarbe für dieses div wird nur für die Länge des Inhalts angezeigt. Sollten Sie eine Trennlinie bevorzugen, fügen Sie der CSS-Regel des entsprechenden Divs (#sidebar oder #mainContent) eine Rahmen-Eigenschaft hinzu. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3>sidebar2-Inhalt</h3>
<p>Die Hintergrundfarbe für dieses div wird nur für die Länge des Inhalts angezeigt. Sollten Sie eine Trennlinie bevorzugen, fügen Sie der CSS-Regel des entsprechenden Divs (#sidebar oder #mainContent) eine Rahmen-Eigenschaft hinzu. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<h1> Hauptinhalt </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. </p>
<p>Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. </p>
<h2>H2-Überschrift </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<div id="mainContent">
<h1> Hauptinhalt </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. </p>
<p>Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. </p>
<h2>H2-Überschrift </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div> |
|
|
| |
  |
 |
razzcazz
Dabei seit: 01.12.2006
Ort: Mannheim
Alter: 41
Geschlecht: 
|
Verfasst Mi 26.09.2007 14:33
Titel
|
|
|
|
also mir is jetzt nicht ganz klar wo du eine BG-Color haben willst... hinter dem Text?
|
|
| |
 |
|
|
Anzeige
|
|
|
festplatte
Threadersteller
Dabei seit: 05.02.2007
Ort: -
Alter: 45
Geschlecht:
|
Verfasst Mi 26.09.2007 15:04
Titel
|
|
|
Ist so schwer zu erklären.
Ich hoffe, mit dem Bild wirds klarer.
|
|
| |
|
|
razzcazz
Dabei seit: 01.12.2006
Ort: Mannheim
Alter: 41
Geschlecht:
|
Verfasst Mi 26.09.2007 15:19
Titel
|
|
|
diese kleine Einbuchtung kannst du doch als Grafik machen...
und wenn die Grafiken (sind das Icons? Pfeile?) zu den Links gehören...
dann kannst du die entweder davorsetzen, oder auch als BG des Linkes angeben. Also dem a-Tag (bzw. dem li-Tag wenn's jeweils dieselben Grafiken sind) noch ne Klasse geben und als Background das Bild positionieren, den Linktext nach rechts schieben.
|
|
| |
|
|
festplatte
Threadersteller
Dabei seit: 05.02.2007
Ort: -
Alter: 45
Geschlecht:
|
Verfasst Mi 26.09.2007 15:24
Titel
|
|
|
[quote="razzcazz"]diese kleine Einbuchtung kannst du doch als Grafik machen...
Das ist klar. Habe ich auch schon gemacht.
| Zitat: | | und wenn die Grafiken (sind das Icons? Pfeile?) |
Icons
| Zitat: | zu den Links gehören...
dann kannst du die entweder davorsetzen, oder auch als BG des Linkes angeben. Also dem a-Tag (bzw. dem li-Tag wenn's jeweils dieselben Grafiken sind) noch ne Klasse geben und als Background das Bild positionieren, den Linktext nach rechts schieben. |
Sind jeweils unterschiedliche. Das Problem bei dem ganzen ist aber, dass ich es nicht schaffe, so einen Balken zu erzeugen in dem dann die Texte und Inhalte drin sind. Wie gesagt, die Farbfläche ist dann immer über dem Text, wenn ich es mit bg-color probiere.
Und ausserdem soll der Balken ganz rechts an den Rand gehen.
Und das Suchen-Feld bekomme ich auch nicht mit 5px Abstand darunter.
|
|
| |
|
|
razzcazz
Dabei seit: 01.12.2006
Ort: Mannheim
Alter: 41
Geschlecht:
|
Verfasst Mi 26.09.2007 15:29
Titel
|
|
|
Also vom Prinzip her dürfte das eigentlich ohne Probleme gehen.
Hab aber keine Zeit das jetzt zu machen bzw. zu probieren.
Hab gerade was auf den Tisch bekommen. 
Kann später nochmal reinschauen... kannst mich ja per ICQ kontaktieren wenn du willst.
|
|
| |
|
|
festplatte
Threadersteller
Dabei seit: 05.02.2007
Ort: -
Alter: 45
Geschlecht:
|
Verfasst Mi 26.09.2007 15:36
Titel
|
|
|
| razzcazz hat geschrieben: | Also vom Prinzip her dürfte das eigentlich ohne Probleme gehen.
Hab aber keine Zeit das jetzt zu machen bzw. zu probieren.
Hab gerade was auf den Tisch bekommen.
Kann später nochmal reinschauen... kannst mich ja per ICQ kontaktieren wenn du willst. |
Danke für das Angebot. 
Aber das muss vor Feierabend fertig werden. Und ich darf hier im Geschäft auch kein ICQ aufspielen.
|
|
| |
|
|
razzcazz
Dabei seit: 01.12.2006
Ort: Mannheim
Alter: 41
Geschlecht:
|
Verfasst Mi 26.09.2007 16:06
Titel
|
|
|
damit das rechts bleibt und das "Suchen" auch, sowie die 5px drunter:
| Code: | <style type="text/css">
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 59em;
background: #FFFFFF;
margin: 0 auto;
text-align: left;
}
#header h1 {
margin: 0;
padding: 0;
}
#logo {
float:left;
width:337px;
height:143px;
}
#header {
background: #FFFFFF;
padding: 0;
}
#left {
float:left;
background: #808080;
padding:0;
}
#right {
padding:0;
background-color: #FFFFFF;
}
#navi {
float:right;
margin-top:42px;
width:400px;
padding-right:38px;
padding-top:7px;
padding-bottom:7px;
background-color: #CCCCCC;
}
.zielgruppen-navi li {
float:right;
list-style-type: none;
padding-right: 20px;
font-size:14px;
}
.zielgruppen-navi a:link, .zielgruppen-navi a:visited {
color: #333;
background-color: transparent;
text-decoration: none;
}
.zielgruppen-navi a:hover, .zielgruppen-navi a:active {
color: #FF0000;
}
#suche {
background:#FFFFFF;
margin-top:5px;
margin-right: 5px;
float:right;
width:400px;
text-align: right;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
</style>
|
| Code: |
<div id="container">
<div id="header">
<div id="left">
<img src="img/logo-head.jpg" id="logo" alt="Logo" width="337" height="143" />
</div>
<div id="right">
<div id="navi">
<ul class="zielgruppen-navi">
<li><a href="#">Testlink1</a></li>
<li><a href="#">Testlink2</a></li>
<li><a href="#">Testlink3</a></li>
</ul>
</div>
<div id="suche">
<input name="Suchen" type="text" size="15" /><input type="submit" name="Suchen2" id="Suchen" value="Senden" />
</div>
</div>
</div>
.....
|
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[CSS] - Listenproblem IE6
CSS -> listenproblem
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
