100% width, aber nicht für content des DIVs

CrAzYLuKe

Hi Leute,

ich habe ein Menü, welches ich aus einem Theme übernommen habe, aber da war alles eher in einem Rahmen auf 1000px + margin fixiert und ich konnte drumherum eine andere Hintergrundfarbe wählen, wodurch alles schön mittig ausgerichtet war. Das will ich aber nicht.

Wenn ich aber nun den width-Wert der einzelnen DIVs (header, top/menü, footer) auf 100% setze, wird alles links positioniert, egal ob float drin ist oder nicht. align="center" beim div in der header.php hat leider auch nicht geholfen um das Menü dann wieder in Position zu bringen. Der gewünschte Effekt, dass sich das Menü über den kompletten Bildschirmrand zieht ist nun vorhanden, aber ich bekomme das Menü dann nicht wieder in die Mitte auf die gewünsche px Breite ausgerichtet. Also vorher war die Hintergrundfarbe des Menüs nach der px Breite abgeschnitten, soll aber über den kompletten Bildschirmrand gehen (was mit 100% width auch klappt), aber dennoch die Position behalten, wie hier zu sehen: http://www.wrapworks.de
Habe da schon viel mit den CSS Einstellungen gespielt, aber ich werde daraus leider nicht schlau. Habe mir auch via Firebug das Style von Wrapworks angeschaut, aber ein richtig brauchbares Ergebnis habe ich nicht zustande bekommen.

Ich danke euch vielmals für Eure Unterstützung sowie Tipps. Habe das CSS jetzt wieder in die Ausgangssituation gebracht.

Hier meine relevanten CSS Auszüge zum Nachvollziehen, im #masthead soll #botmenu Hintergrund die volle Breite bekommen, aber trotzdem eine eine feste px Breite haben und mittig ausgerichtet sein:

style.css

CSS

/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
    outline: 0;
}


ol, ul {
    list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}
a img {
    border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}


/* BASIC */
body {
font-family:Verdana;
color:#333;
font-size:12px;
/* background:url(images/pixel_bg.png) repeat; */
background-color:#ffffff;
margin:0 auto;
padding:0px 0px;
}


img {
border:0;
margin:0;
}


a {
color:#ff0000;
text-decoration:none;
outline:none;
}


a:hover {
color:#000000;
text-decoration:underline;
}


blockquote {
color:#59666f;
font-style:italic;
font-family:Georgia;
padding:10px;
}


.clear {
clear:both;
}


table {
border-collapse:collapse;
border-spacing:0;
border:1px solid #fff;
margin:10px 0;
}


table td,table th {
text-align:left;
border:1px solid #fff;
padding:.4em .8em;
}


table th {
background:#ddd;
color:#999;
text-transform:uppercase;
font-weight:400;
border:1px solid #fff;
}


table td {
border:1px solid #fff;
background:#eee;
color:#555;
}


table tr.even td {
background:#eee;
border:none;
}


table tr:hover td {
background:#FFF9DF;
}


img.centered {
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
padding:0;
}


img.alignnone {
display:inline;
background:#eee;
margin:0 0 10px;
padding:5px;
}


img.alignright {
display:inline;
background:#eee;
margin:5px 0 10px 10px;
padding:5px;
}


img.alignleft {
display:inline;
background:#eee;
margin:10px 15px 10px 0;
padding:5px;
}


.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}


.alignright {
float:right;
margin:0 0 10px 10px;
}


.alignleft {
float:left;
margin:10px 15px 10px 0;
}


.wp-caption {
text-align:center;
background:#eee;
margin:10px;
padding:4px 0 5px;
}


.wp-caption img {
border:0;
margin:0 0 5px;
padding:0;
}


.wp-caption p.wp-caption-text {
font-size:11px;
font-weight:400;
line-height:12px;
color:#444;
margin:0;
padding:0;
}


.clearfix:after {
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}


.clearfix {
display:inline-block;
}


html[xmlns] .clearfix {
display:block;
}


* html .clearfix {
height:1%;
}


.rounded {
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}


.boxshadow {
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
box-shadow:0 0 5px #000;
}




/* OUTER  */
#topbar{
height:50px;
width:1000px;
margin:0px auto;
}


#topbar ul{
    list-style:none;
    float:right;
    line-height:50px;
    
}


#topbar ul li{
    list-style:none;
    float:left;
    line-height:50px;
    margin:0px 15px;
    
}


#topbar ul li a:link, #topbar ul li a:visited{
    color:#eee;
}


#topbar ul li a:hover{
    color:#00a8ff;
}


#wrapper{
width:1000px;
margin:0 auto;
background:#fff;


}


/* HEADER */


#masthead{
}


#top{
height:180px;
width:1000px;
margin:0px auto;
}


#blogname{
width:400px;
float:left;    
font-family: 'BebasNeueRegular';
}


#blogname h1{
font-size:42px;
margin:35px 0px 0px 30px;
font-weight:normal;
}


#blogname h1 a:link, #blogname h1 a:visited{
color:#111;
}


#blogname h3{
font-size:16px;
margin:5px 0px 0px 0px;
font-weight:normal;
}




/* TOP-MENU */
#botmenu{
    height:40px;
    margin:0px auto;
    font-size: 12px;
    font-weight:bold;
    overflow:hidden;
    background:#00a8ff;
    width:940px;
    }
    
#submenu {
    margin: 0px 0px;
    width:920px;
    padding:0px 10px;
    font-weight:bold;
    }
    
#submenu ul {
    width: 100%;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0 0px;
    }
    
#submenu li {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    color: #00a8ff;
    text-shadow:1px 1px 0px #00869E;
    }
    
#submenu li a {
    color: #fff;
    display: block;
    margin: 0;
    padding: 14px 10px 14px 10px;
    text-decoration: none;
    position: relative;
    text-shadow:1px 1px 0px #00869E;
    }


#submenu li a:hover, #submenu li a:active, #submenu li a .current_page_item a  {
    color: #ff0000;
    text-shadow:1px 1px 0px #00869E;
    background:#00a8ff;
    }
    
#submenu li a.sf-with-ul {
    padding-right: 10px;
    }
    
#submenu li li a, #submenu li li a:link, #submenu li li a:visited {
    color: #ddd;
    text-shadow:1px 1px 0px #00869E;
    font-size:11px;
    text-shadow:none;
    width: 148px; 
    font-family: Arial, Tahoma, Verdana;
    margin: 0;
    padding: 0px 10px;
    line-height:35px;
    border-bottom:1px solid #333;
    border-top:1px solid #111;
    text-transform: none;
    position: relative;
    }
    
#submenu ul ul li:first-child a{
    border-top:none;
}


#submenu ul ul li:last-child a{
    border-bottom:none;
}    
    
#submenu li li:last-child{
    border-bottom:none;
}
        
#submenu li li a:hover, #submenu li li a:active {
    background:transparent;
    color: #ff0000; 
    }


#submenu li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 5px 0px 0px 0px;
    padding: 5px;
    background:#00a8ff;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    }


#submenu li ul a { 
    width: 150px;
    }


#submenu li ul a:hover, #submenu li ul a:active { 
    }


#submenu li ul ul {
    margin: -40px 0 0 176px;
    }


#submenu li:hover ul ul, #submenu li:hover ul ul ul, #submenu li.sfHover ul ul, #submenu li.sfHover ul ul ul {
    left: -999em;
    }


#submenu li:hover ul, #submenu li li:hover ul, #submenu li li li:hover ul, #submenu li.sfHover ul, #submenu li li.sfHover ul, #submenu li li li.sfHover ul {
    left: auto;
    }


#submenu li:hover, #submenu li.sfHover { 
    position: static;
    }


/* Pagenavi */
#navigation{
    padding:10px 0px 20px 18px;
}
.wp-pagenavi{
    font-size:12px;
    text-align: center !important;
}


.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited {
    text-decoration: none;
    background:#493D3D!important;
    border: 1px solid #191313 !important;
    color:#fff !important;
    padding:3px 7px !important;
    display: block;
    text-align: center;
    float: left;
    margin-right: 4px;
}


.wp-pagenavi a:hover {
    color: #ffffff;
}


.wp-pagenavi span.pages {
    display:none;
}


.wp-pagenavi span.current {
    text-decoration: none;
    background:#333 !important;
    border: 1px solid #111!important;
    color:#fff !important;
    padding:3px 7px !important;
    display: block;
    text-align: center;
    float: left;
    margin-right: 4px;
}


.wp-pagenavi span.extend {
    text-decoration: none;
    background:#333 !important;
    border: 1px solid #111 !important;
    color:#fff !important;
    padding:3px 7px !important;
    display: block;
    text-align: center;
    float: left;
    margin-right: 4px;
}    


/* Breadcrumbs */
ul.breadcrumbs{
    list-style:none;
    background:#fff;
    padding:15px 20px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;    
}


ul.breadcrumbs li{
    float:left;
    margin-right:5px;
}

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

illufan

Kann man die Seite online ansehen?

CrAzYLuKe

Hallo illufan,

hier der Link: http://www.wp1102270.server-he.de/www/xfx-performance.de/

Danke!
Luke

P.S.: Probiere es gerade an der Topbar wie man sehen kann, die ist außerhalb des Wrappers...

illufan

Also du möchtest den Hintergrund des Botmenüs über die ganze Bildschirmseite (100%) haben?

Dann musst du #masthead aus dem #wrapper nehmen, denn der Wrapper hat nunmal 1000px und 100% davon sind auch 1000px.

#masthead bekommt dann 100% width

Code

#masthead {
    margin: 0 auto;
    width: 100%;


}

Das #botmenu würde ich in ein eigenes div z.b.#box packen und diesem die gewünschte HG Farbe geben.

Code

#box {
    background: none repeat scroll 0 0 #00A8FF;
}

CrAzYLuKe

Hallo illufan,

habe #masthead aus dem wrapper genommen und nun 100% vergeben. Wie bekomme ich aber nun trotzdem den 1000px Rahmen hin und die Eigenschaft, dass sich dieser trotzdem mittig zentriert und align in diesem Rahmen z.B. via float:left; ist? Das funktioniert nämlich nicht. Deshalb habe ich auch erst mal nur mit

Code

#topbar{
height:50px;
width:100%;
margin:0px auto;
background:#00a8ff;
}

versucht, wo man auch die Suche oben findet und es bereits über 100% geht. Aber die Suche ist entweder ganz links oder ganz rechts, aber nicht innerhalb eines 1000px Rahmens, der mittig ausgerichtet ist und darin dann rechts oder links und ggf. mit padding...

So wie es auf deinem Screenshot aussieht hätte ich es sehr gerne :-)

Musste aber, um den Effekt zustande zu bringen noch folgendes hier ändern:

Code

/* TOP-MENU */	
#botmenu{
	height:40px;
	margin:0px auto;
	font-size: 12px;
	font-weight:bold;
	overflow:hidden;
	background: none repeat scroll 0 0 #00A8FF;
	width:100%;
	}
	
#submenu {
	margin: 0px 0px;
	width:920px;
	padding:0px 10px;
	font-weight:bold;
	}
	
#submenu ul {
	width: 100%;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0 0px;
	}
	
#submenu li {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	color: #00a8ff;
	text-shadow:1px 1px 0px #00869E;
	}
	
#submenu li a {
	color: #fff;
	display: block;
        margin: 0;
	padding: 14px 10px 14px 10px;
	text-decoration: none;
	position: relative;
	text-shadow:1px 1px 0px #00869E;
	}




#submenu li a:hover, #submenu li a:active, #submenu li a .current_page_item a  {
	color: #ff0000;
	text-shadow:1px 1px 0px #00869E;
	background:#00a8ff;




	}
	
#submenu li a.sf-with-ul {
	padding-right: 10px;
	}	
	




	
#submenu li li a, #submenu li li a:link, #submenu li li a:visited {
	color: #ddd;
	text-shadow:1px 1px 0px #00869E;
	font-size:11px;
	text-shadow:none;
	width: 148px; 
	font-family: Arial, Tahoma, Verdana;
	margin: 0;
	padding: 0px 10px;
	line-height:35px;
	border-bottom:1px solid #333;
	border-top:1px solid #111;
	text-transform: none;
	position: relative;




	}
	
#submenu ul ul li:first-child a{
	border-top:none;




}




#submenu ul ul li:last-child a{
	border-bottom:none;




}	
	
#submenu li li:last-child{
	border-bottom:none;
}
		
#submenu li li a:hover, #submenu li li a:active {
	background:transparent;
	color: #ff0000; 
	}








#submenu li ul {




	z-index: 9999;
	position: absolute;
	left: -999em;
	height: auto;
	width: 170px;
	margin: 5px 0px 0px 0px;
	padding: 5px;
	background:#00a8ff;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	}




#submenu li ul a { 
	width: 150px;
	}




#submenu li ul a:hover, #submenu li ul a:active { 
	}




#submenu li ul ul {
	margin: -40px 0 0 176px;




	}




#submenu li:hover ul ul, #submenu li:hover ul ul ul, #submenu li.sfHover ul ul, #submenu li.sfHover ul ul ul {
	left: -999em;
	}




#submenu li:hover ul, #submenu li li:hover ul, #submenu li li li:hover ul, #submenu li.sfHover ul, #submenu li li.sfHover ul, #submenu li li li.sfHover ul {
	left: auto;
	}




#submenu li:hover, #submenu li.sfHover { 
	position: static;
	}

Alles anzeigen

sonst wäre das Menü nicht weit gekommen mit deinem Tipp...
Ist jetzt auch so online...

CrAzYLuKe

Topbar ist zum Beispiel folgendermaßen aufgebaut:

Code

/* OUTER  */#topbar{
height:50px;
width:100%;
margin:0px auto;
background: none repeat scroll 0 0 #00A8FF;
}




#topbar ul{
	list-style:none;
	line-height:50px;
	line-width:1000px;
	display:block;
	margin:0 auto;
}




#topbar ul li{
	list-style:none;
	float:right;
	line-height:50px;
	margin:0px 15px;
	overflow:hidden;
	position:absolute;
	text-align:center;
}




#topbar ul li a:link, #topbar ul li a:visited{
	color:#eee;
}




#topbar ul li a:hover{
	color:#00a8ff;
}

Alles anzeigen

und hier in der header.php so eingebunden:

PHP

<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>




<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />








<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />








<?php 
 wp_enqueue_script('jquery');
 wp_enqueue_script('bxslider', get_stylesheet_directory_uri() .'/js/jquery.bxSlider.min.js');
 wp_enqueue_script('effects', get_stylesheet_directory_uri() .'/js/effects.js');
 wp_enqueue_script('superfish', get_stylesheet_directory_uri() .'/js/superfish.js');




?>




<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>




<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); wp_head(); ?>




</head>
<body>
<div id="topbar">
<ul>
<li>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</li>
</ul>	
</div>




<div id="masthead"><!-- masthead begin -->




<div id="top"> 
<div id="logo">	
<img src="http://www.wp1102270.server-he.de/www/xfx-performance.de/wp-includes/images/head-logo.png">
</div>
</div>
	
<div id="botmenu">
	<?php wp_nav_menu( array( 'container_id' => 'submenu', 'theme_location' => 'primary','menu_class'=>'sfmenu','fallback_cb'=> 'fallbackmenu' ) ); ?>




</div>
	
</div><!--end masthead-->
<div id="wrapper">  <!-- wrapper begin -->




<div id="casing">

Alles anzeigen

illufan

Du gibst #top 1000px
#botmenu packst du in ein div z.b. #box
#box bekommt 100%
Suchformular auch in ein Div packen z.b. #search_box bekommt 1000px;
Warum ist das Suchformular innerhalb einer Aufzählung? Das muss raus. :-)
Wenn du das Suchformular an der linken Seite haben möchtest dann ändest du den float bei #search auf links.

HTML:

PHP

<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php 
 wp_enqueue_script('jquery');
 wp_enqueue_script('bxslider', get_stylesheet_directory_uri() .'/js/jquery.bxSlider.min.js');
 wp_enqueue_script('effects', get_stylesheet_directory_uri() .'/js/effects.js');
 wp_enqueue_script('superfish', get_stylesheet_directory_uri() .'/js/superfish.js');
?>
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); wp_head(); ?>
</head>




<body>
<div id="topbar"><!-- topbar begin -->


<div id="search_box"><!-- search_box begin -->
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div><!-- search_box end -->


</div><!-- topbar end -->




<div id="masthead"><!-- masthead begin -->




<div id="top"> 
<div id="logo">    
<img src="http://www.wp1102270.server-he.de/www/xfx-performance.de/wp-includes/images/head-logo.png">
</div>
</div>
 
<div id="box"><!-- box begin -->
<div id="botmenu">
    <?php wp_nav_menu( array( 'container_id' => 'submenu', 'theme_location' => 'primary','menu_class'=>'sfmenu','fallback_cb'=> 'fallbackmenu' ) ); ?>
</div>
</div><!-- box end -->
    
</div><!--end masthead-->
<div id="wrapper">  <!-- wrapper begin -->




<div id="casing">

Alles anzeigen

CSS:

CSS

#masthead {
    margin: 0 auto;
    width: 100%;
}


#top {
    height: 180px;
    margin: 0 auto;
    width: 1000px;
}


#box {
    background: none repeat scroll 0 0 #00A8FF;
    margin: 0 auto;
    width: 100%;
}


#botmenu {
    background: none repeat scroll 0 0 transparent;
    font-size: 12px;
    font-weight: bold;
    height: 40px;
    margin: 0 auto;
    overflow: hidden;
    width: 1000px;
}


#search_box {
    height: auto;
    margin: 0 auto;
    width: 1000px !important;
}

Alles anzeigen

Viel Spaß. :-)

CrAzYLuKe

Super-illufan, du bist meine Rettung. Ich danke dir vielmals :-) Habe jetzt noch unter das Menü einen kleinen Schatten hinzugefügt ;)
Wenn ihr/du noch Tipps habt, nehme ich die gerne entgegen.

LG
Luke

Willkommen! Melden Sie sich an oder registrieren Sie sich.

100% width, aber nicht für content des DIVs

Jetzt mitmachen!