[css]headerContainer, navi_oben, logo

tomtom · 15.01.2010

hallo, brauche mal wieder eure hilfe,

es geht "nur" um den #headerContainer.
ich habe im content-bereich einen #headerContainer. in diesen liegen div's, links die #navigation_oben (dunkelgrau) und rechts das #logo (hellgrau). ich möchte gerne in der #navigation_ oben und im #logo ein hintergrundbild einfügen. mein layout verschiebt sich dadurch. desweiteren möchte ich einen abstand zum #headerContainer von 5px rechts, oben, links und zwischen den beiden elementen (#navigation_oben + #logo) auch einen abstand von 5px.

da muss erstmal kein bild hinein, eine farbe zur erklärung würde mir total reichen.
muss ich denn das hg-bild eines div's genauso groß machen wie der div selbst, wenn ich einen abstand haben möchte zum übergeordneten element? ich hoffe ihr versteht mich. der code kommt.

HTML:

<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
	<div id="content">
    <div id="headerContainer">
    <div id="navigation_oben">
        <div class="menu_oben">
      	<ul>
        	<li><a href="#">HOME</a></li>|
        	<li><a href="#">STUDIO</a></li>|
        	<li><a href="#">LEISTUNGEN</a></li>|
        	<li><a href="#">GÄSTEBUCH</a></li>|
        	<li><a href="#">KONTAKT</a></li>|
            <li><a href="#">ZURÜCK</a></li>
      	</ul>
    	</div>
    </div>
    <div id="logo">
    </div>
    </div>
    </div>
    <div id="footerContainer">
    <p id="address">KOS ? ER ? 3 ? FON 03
    </p>
    <ul id="navigation_unten">
      	<li><a href="#">ANFAHRT</a></li>
      	<li><a href="#">IMPRESSUM</a></li>
  	</ul>
    </div>
</body>
</html>

Code:

* {
	margin:0, padding:0, border:0;
}

html {
	height:100%;
	background:#a6a6a6;
}

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}

#content {
	width:900px;
	height:550px;
	background:url(../bilder/bg_content.jpg);
	margin:55px auto 0px;
}

#footerContainer {
	width:900px;
	height:25px;
	margin:2px auto;
	padding:0;
	background-color:#f6f6f6;
	border:1px solid #ff6633;
	color:#333333;
}

#address {
	color:#666666;
	font-size:10px;
	margin:0px;
	padding:7px;
	width:686px;
	height:10px;
	float:left;
}

#navigation_unten {
	width:186px;
	height:10px;
	float:right;
	margin:0px;
	padding:7px;
}

#navigation_unten ul {
    width:186px;
}

#navigation_unten li {
    list-style-type:none;
    display:inline;	
}

#navigation_unten a {
    text-decoration:none;
    color:#666666;
	font-size:10px;
	padding:10px;
}

#headerContainer {
	height:130px;
	width:900px;
	color:#009900;
}

#navigation_oben {
	height:130px;
	width:650px;
	background:#333333;
	float:left;
}

.menu_oben {
	padding-top:25px;
	padding-left:20px;
}

.menu_oben ul, .menu_oben li {
	list-style-type: none;
	padding:10px;
	display:inline;
	font-size:13px;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	color:#ff6633;
}

.menu_oben a:link, .menu_oben a:visited, .menu_oben a:active {
	background-color:transparent;
	text-decoration: none;
	display:inline;
	color:#ffffff;
	font-size:11px;
}

.menu_oben a:hover {
	color:#ff6633;
	text-decoration:none;
}

#logo {
	height:130px;
	width:250px;
	background-color:#666666;
	float:right;
}

vielen, vielen dank.

fakerer · 15.01.2010

AW: [css]headerContainer, navi_oben, logo

Code:

#headerContainer {
    height:130px;
    width:900px;
    color:#009900;
    padding: 5px 5px 0 5px;
}
#navigation_oben {
    height:130px;
    width:650px;
    background-image: url(deinlogo.png);
    background-color:#333333;
    float:left;
}
#logo {
    height:130px;
    width:245px;
    background-image: url(deinlogo.png);
    background-color:#666666;
    float:right;
}

sollte so klappen

tomtom · 15.01.2010

AW: [css]headerContainer, navi_oben, logo

fakerer schrieb:
sollte so klappen

ja danke probiere es morgen. 1000 dank

tomtom · 16.01.2010

AW: [css]headerContainer, navi_oben, logo

@fakerer: danke hat super geklappt, danke dir.

kleines problem in der entwurfsansicht im dreamweaver ist aufgetreten. sieht mir komisch aus, aber vielleicht muss das so sein.
ich habe den code in der css für #logo (hellgrau) angepasst, da ich auch einen abstand von 5px zum headerrand rechts haben möchte. das habe ich mit margin gemacht. war das richtig? nun habe ich in der entwurfsansicht noch (wie soll ich sagen und beschreiben) eine zusätzliche spalte. bekomme ich die weg oder ist das wegen dem margin-right?

Code:

#headerContainer {
	height:130px;
	width:900px;
	color:#009900;
	padding:5px 5px 0px 5px;
}

#navigation_oben {
	height:130px;
	width:650px;
	background:#333333;
	float:left;
}

#logo {
	height:130px;
	width:235px;
	background-color:#666666;
	float:right;
	margin-right:10px;
}

tomtom · 17.01.2010

AW: [css]headerContainer, navi_oben, logo

kann ich das margin-right entfernen und mit anderem ersetzen. wie gesagt die entwurfansicht im dw sieht komisch aus.

Code:

#logo {
	height:130px;
	width:235px;
	background-color:#666666;
	float:right;
	margin-right:10px;
}

tomtom · 18.01.2010

AW: [css]headerContainer, navi_oben, logo

es hat mit keine ruhe gelassen. diese ansicht (entwurfsansicht im dw) sah wirklich komisch aus. habe etwas im css dazu geändert, ich hoffe, ich habe es richtig gemacht.

Code:

#headerContainer {
	height:130px;
	width:900px;
	color:#009900;
	padding:5px 0px 5px 0px;
}

#navigation_oben {
	height:130px;
	width:650px;
	background-image:;
	background:#333333;
	float:left;
	margin-left:5px;
}

#logo {
	height:130px;
	width:235px;
	background-color:#666666;
	float:right;
	margin-right:5px;
}

oder geht es besser und einfacher? danke für eure hilfe.