Ok, so I have now managed to reduce the width of the navigation bar and have removed the search bar for the sake of simplicity. I am still unsure of how to align the navigation bar with the content box and remove the space inbetween. Here is the code for my child theme:
/*
Theme Name: Twentyeleven Child
Description: Child theme for the twentyeleven theme
Author:
Template: twentyeleven
*/
@import url("../twentyeleven/style.css");
/* = My added code to give wrapper for nav and content
-----------------------------------------------*/
#wrapper {
margin: 0 auto;
}
/* =Structure
----------------------------------------------- */
body {
padding: 0 1em;
}
#page {
margin: 1em auto;
max-width: 1000px;
}
#branding hgroup {
margin: 0 7.6%;
}
#access div {
margin: 0 7.6%;
}
#primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
#content {
/*MY CODE*/
background: #fff;
padding: 20px;
-moz-border-radius: 0px 0px 20px 20px;
border-radius: 0px 0px 20px 20px;
/*END MY CODE*/
margin: 0 34% 0 7.6%;
width: 58.4%;
}
/* I EDITED WIDTH BELOW */
/* One column */
.one-column #page {
min-width: 900px;
}
/*end edit width*/
/* =Global
----------------------------------------------- */
body, input, textarea {
color: #333;
font: 15px "Century Gothic", Calibri, Verdana, sans-serif;
font-weight: 300;
line-height: 1.625;
}
body {
/*MY CODE*/
background: #e2e2e2 url('images/bg.jpg') center top repeat-y;
/*END MY CODE*/
}
#page {
background-color: transparent;
}
/* Headings */
h1,h2,h3,h4,h5,h6 {
color: #5d5d5d;
clear: both;
text-align: center;
}
/* Text elements */
ul {
list-style: circle;
}
/* Links */
a {
color: #333;
text-decoration: none;
}
a:focus,
a:active,
a:hover {
text-decoration: underline;
}
/* =Menu
-------------------------------------------------------------- */
#access {
/*MY CODE to curve top corners of nav*/
-moz-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;
/*end curved corners of nav*/
background: #d7d7d7; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f7f7f7, #d7d7d7);
background: -o-linear-gradient(#f7f7f7, #d7d7d7);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f7f7f7), to(#d7d7d7)); /* older webkit syntax */
background: -webkit-linear-gradient(#f7f7f7, #d7d7d7);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
clear:both;
display: block;
margin: auto ;
width: 750px;
}
#access a {
color: #666;
display: block;
line-height: 3.333em;
padding: 0 1.2125em;
text-decoration: none;
}
/* =Footer
----------------------------------------------- */
/* Site Generator Line */
#site-generator {
background: transparent;
border-top: none;
color: #333;
font-size: 12px;
line-height: 2.2em;
padding: 2.5em 0.5em;
text-align: center;
}
#site-generator a {
color: #333;
font-weight: bold;
}
I also had a go at adding a wrapper around the content, hoping this would pull things together with css but I’m not sure if I’ve gone about it correctly.
I added a div called wrapper in the header.php file:
….
<body <?php body_class(); ?>>
<div id="wrapper">
<div id="page" class="hfeed">
….
and ended it in the footer.php file:
….
</div><!-- #main -->
</div><!-- end my code, closes wrapper div -->
<footer id="colophon" role="contentinfo">
….
I’m not entirely sure if this is correct as I’m not great with php so any help will be appreciated. Cheers!
