Can I get some help on making my header and top menus the same width as my main wrapper?
Here's my site: soccer-mate.com
Here's what I have as custom CSS so far:
/* Structure */
#wrapper { min-height: 100%; position: relative; padding: 0.5px 0 20px; }
#main { padding: 10px 10px 0; }
/* Header */
#header { min-width: 990px; padding: 0; }
#branding { width: 980px; margin: 0 auto; padding: 0; }
.logo { max-width: 590px; float: left; padding: 30px 0 34px 10px; }
.blog-name { margin: 0 0 3px; line-height: 1em; display: block; }
.blog-description { line-height: 1em; display: block; margin: 0; padding: 3px 0 0; }
#top-menu, #nav { min-width: 990px; }
#top-menu-content, #nav-content { margin: 0 auto; width: 978px; }
Thanks.
Related
I'm making a fake news article for a site and I floated the news sections, but I noticed that the bottom borders on the left and the right aren't aligned. I tried to fix this by placing the <h1> and the <p> elements in sections and making the section { height: 45%; } but it didn't work.
Why isn't it working and how can I align the borders? I have the HTML here.
html{
margin: auto;
font-size: 1em;
padding: 0;
max-width: 100%;
text-align: center;
}
figure{
margin: auto;
max-width: 50%;
}
img{
display: block;
}
img, body, ul{
max-width: 100%;
margin: auto;
padding: 0;
}
.caption-clr{
background-color: rgba(0,0,0,.1);
}
*{box-sizing: border-box;}
.main-wrapper{
padding: 2.5% 10%;
max-width: 100%;
margin: 0 10%;
}
body,.main-wrapper{
background-color: lightgreen;
}
header {
color: white;
text-shadow: 1px 0px 5px rgb(0,0,1);
max-width: 100%;
margin: auto;
background-image: url(../img/cannabis.jpg);
padding: 10%;
background-size: cover;
background-position: top;
}
p{
border-bottom: 1px solid rgba(0,0,0,.1);
padding: 0 0 5px 0;
}
.opening-list li{
font-weight: bold;
list-style: none;
}
.opening-list{
margin: 0 0 5px 0;
}
.opening-list li,.opening-list h3{
color: white;
}
/responsive/
#media screen and (min-width: 550px){
section {
height: 45%;
}
body{
background-color: lightgrey;
}
.first-right-section{
float: right;
margin: 2.5%;
width: 45%;
}
.first-left-section{
width: 45%;
margin: 2.5%;
float: left;
}
.clear{
clear: both;
}
}
What part of the script make the pictures align to the left. www.edmazeka.co.za.
Here is the css. Or what css can I add to make only the pic align to the center
/* BASIC */
* {
margin: 0;
padding: 0;
}
html {
background: #27282C url(images/bg2.jpg);
}
body {
font-size: 12pt;
font-family: Abel;
width:100%;
min-width: 1255px;
color: #d0d1d4;
text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
}
p {
line-height: 1.75em;
text-align: justify;
font-family: "Open Sans", sans-serif;
font-size: 0.9em;
margin: 0 0 2em 0;
}
strong {
color: #ffffff;
}
h1,h2,h3,h4 {
font-weight: normal;
}
a {
color: #6BA8E7;
}
/* MISC */
br.clear {
clear: both;
}
img.align-left
{
float: left;
margin: 0 50px 30px 0;
}
/* LAYOUT */
#bg0 {
position: relative;
width: 100%;
height: 30px;
background: url(images/bg0.jpg);
z-index: 2;
border-bottom: solid 1px #4B4C50;
}
#bg1 {
min-width: 1255px;
width: 100%;
height: 1090px;
background: url(images/bg1.jpg) top center no-repeat;
position: absolute;
top: 0;
z-index: 1;
}
#wrapper {
position: relative;
z-index: 3;
padding: 80px 0 100px 0;
width: 100%;
min-height: 100px;
margin: 0 auto;
overflow: hidden;
}
/* CONTENT */
#content {
margin-left: 235px;
width: 1020px;
overflow: hidden;
}
Your rule:
.thumbnail img {
display: block;
width: 221px;
border: 0;
}
is doing it. Remove the display: block;
How about this ?
img.align-left
{
float: left;
margin: 0 50px 30px 0;
}
hey guys i am using bourbon neat framework to create a responsive thumbnail gallery. Now it generated the css and somehow when i resize the thumbs seem to be out of position.
here the code i used
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
body {
margin: 0;
padding: 0;
background-color: #f4f4f4; }
.galleryContainer {
*zoom: 1;
max-width: 77.0625em;
margin-left: auto;
margin-right: auto;
max-width: 1200px !important; }
.galleryContainer:before, .galleryContainer:after {
content: " ";
display: table; }
.galleryContainer:after {
clear: both; }
.galleryContainer .galleryList {
float: left;
display: block;
margin-right: 2.35765%;
width: 100%;
border: 2px solid red; }
.galleryContainer .galleryList:last-child {
margin-right: 0; }
.galleryContainer .galleryList ul {
list-style: none;
margin: 0;
padding: 0; }
.galleryContainer .galleryList li {
float: left;
padding: 0;
margin: 0;
width: 20%;
padding: 0px; }
#media screen and (min-width: 1338px) {
.galleryContainer .galleryList li {
width: 10%; } }
.galleryContainer .galleryList img {
width: 100%;
height: 100%; }
you can check out the problem here in my demo page here DEMO
Please tell me where i am doing it wrong.
thanks.
It would appear that the float: left that you have set is causing the issue when resizing. Using li elements in this instance I would adopt a display-inline block approach. You will need to add three declarations to the parent in order to remove the margin associated with inline-block elements.
You CSS
.galleryContainer .galleryList li {
float: left; <-- remove this
display: inline-block;
padding: 0;
margin: 0;
width: 20%;
padding: 0px;
font-size: 0px;
}
.galleryContainer .galleryList ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 0px; <-- add this
letter-spacing: 0px; <-- add this
word-spacing: 0px; <-- add this
}
I have a menu and I can't center an ul inside second_nav. What's wrong with this menu?
This is my normal second nav
/*second_nav*/
#second_nav{
background: url("images/second_nav.png");
height: 255px;
width: 100%;
}
#second_nav ul{
display: block;
margin: 0 0 0 170px;
width: 654px;
position: absolute;
padding: 25px 0 0 0;
}
#second_nav ul li{
display: block;
float: left;
margin: 0 0 0 60px;
height: 220px;
}
#second_nav ul li p{
font-size: 20px;
font-weight: 300;
color: #000000;
text-align: center;
width: 80px;
margin: 0 auto;
}
and this is my second_nav when screen is max- 820px i want to center this.
#second_nav{
height: 255px;
width:100%;.
margin: 0 auto;
}
#second_nav ul{
height: 215px;
margin: 0 auto;
text-align: center;
}
#second_nav ul li{
margin: 0 auto;
display: inline-block;
}
#second_nav ul li img{
width: 80%;
}
Give #second_nav ul an explicit width. Without one, it's 100% of its parent (#second_nav), so there's no room either side to center it using margin: auto.
Try this:
#second_nav ul {
height: 215px;
width: 500px; /* or whatever you need... */
margin: 0 auto;
}
you only need to add the following rules
#second_nav ul {
width: 250px;
margin: 0 auto;
}
look at this example
You can check this:
#second_nav{
height: 255px;
width:100%;
text-align:center;
}
use text-align: center;
but ul need to be inline element "display:inline"
1 thing that I didn't tell. This is my normal second nav
/*second_nav*/
#second_nav{
background: url("images/second_nav.png");
height: 255px;
width: 100%;
}
#second_nav ul{
display: block;
margin: 0 0 0 170px;
width: 654px;
position: absolute;
padding: 25px 0 0 0;
}
#second_nav ul li{
display: block;
float: left;
margin: 0 0 0 60px;
height: 220px;
}
#second_nav ul li p{
font-size: 20px;
font-weight: 300;
color: #000000;
text-align: center;
width: 80px;
margin: 0 auto;
}
and this is my second_nav when screen is max- 820px i want to center this.
#second_nav{
height: 255px;
width:100%;.
margin: 0 auto;
}
#second_nav ul{
height: 215px;
margin: 0 auto;
text-align: center;
}
#second_nav ul li{
margin: 0 auto;
display: inline-block;
}
#second_nav ul li img{
width: 80%;
}
Hello I'm having a problem with my layout, when I'm resizing it, it's not filling the whole space. Please check it out here
My sample code:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
p, a, h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.container {
width: 100%;
min-height: 100%;
position: relative;
}
.content {
width: 96%;
max-width: 720px;
min-width: 600px;
margin: 0 auto;
padding: 10px;
padding-bottom: 245px; /* Height of the footer element */
}
.headerWrapper {
position: absolute;
height: 85px;
background: #19A347;
z-index: 9000;
width: 100%;
}
#header {
width: 960px;
margin: 0 auto;
position: relative;
}
.logo {
position: absolute;
}
.logoimg {
display: block;
width: 155px;
height: 85px;
text-indent: -9999px;
}
.globalnav {
float: right;
clear: right;
padding: 8px 8px 0 0;
display: block;
}
.nav-menu {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.nav-menu li {
display: inline;
}
.nav-menu a {
display: inline-block;
padding: 15px;
margin: 5px;
color: #fff;
font-size: 20px;
text-decoration: none;
}
.nav-menu a:hover {
color: #66C285;
}
#footer {
height: 245px;
background: #1c1c1c;
position: absolute;
bottom:0;
left:0;
width: 100%;
}
.cols-container {
margin: 0 auto;
max-width: 960px;
min-width: 900px;
overflow: hidden;
}
.cols-container div {
width: 20%;
float: left;
padding: 5px;
margin: 15px;
}
.heading {
font-size: 20px;
color: #fff;
background: #009933;
padding: 5px 0 5px 10px;
}
#footer li, a {
color: #fff;
text-decoration: none;
}
#footer a:hover {
color: #999;
};
I don't know what's making it act like this way. Help is truly appreciated.
You should change the width between header and headerWrapper:
.headerWrapper {
position: absolute;
height: 85px;
background: #19A347;
z-index: 9000;
width: 960px;
}
#header {
width: 100%;
margin: 0 auto;
position: relative;
}
You also should change these rules:
.cols-container {
margin: 0 auto;
max-width: 960px;
min-width: 900px;
overflow: hidden;
}
.content {
width: 96%;
max-width: 720px;
min-width: 600px;
margin: 0 auto;
padding: 10px;
padding-bottom: 245px; /* Height of the footer element */
}
to the min-width you want:
.cols-container {
margin: 0 auto;
max-width: 960px;
min-width: 400px;
overflow: hidden;
}
.content {
width: 96%;
max-width: 720px;
min-width: 400px;
margin: 0 auto;
padding: 10px;
padding-bottom: 245px; /* Height of the footer element */
}
JSFIDDLE