Beiträge von CrAzYLuKe

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

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Beiträge von CrAzYLuKe

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