I have a to most probably simple problem.
My page has a background color and contains a container, then a contentcontainer to put the page in the middle. Now this content container has a different background color, but a small space where we see the original page background color is visible at the top and bottom.
The CSS file is like this:
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #E0EBED;
}
#container {
width: 100%;
}
#contentcontainer {
background-color: #FFFFFF;
width: 1000px;
margin: 0 auto;
}
The body looks like this:
<div id="container">
<div id="contentcontainer">
<p>Some content</p>
</div>
</div>
What do I have to to to make this small space disappear.
I have already tried to add 0 top padding to the container div and body.
After a few answers I have discovered that margin: 0; the body css takes out the space at the top. I still have the same kind of space at the bottom though.
To show people what I mean:
NOW THIS IS THE FIX:
CSS:
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #E0EBED;
margin: 0;
}
#container {
width: 100%;
}
#contentcontainer {
background-color: #FFFFFF;
width: 1000px;
height: 100%;
margin: 0 auto;
}
I added margin: 0; to body and height: 100%; to content container. If you have the same problem do not forget to add the margin: 0; to the body as it will not work without that.
Thanks to all that answered this question and helped me solve this!
Add this to your CSS:
* {
margin: 0;
padding: 0; }
body has padding by default. Make it 0px by -
body{padding:0px;}
Related
I have this problem when I collapse my webpage, the header shrinks instead of staying stretched across the entire page.
In this situation, I really have no idea what code to post along with it. I've tried various ways to fix it and nothing seems to work. Does anyone know what is going on when this happens? Here is my header HTML and CSS:
#header {
background-color: #C67171;
width: 100%;
}
#headtop {
text-align: right;
width: 1000px;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>
That's pretty much it for the styling though, any help is greatly appreciated!
EDIT
Picture explaining the outcome of the code.
This is what the page looks like right now. This is how I want it to look. But for some reason, I keep getting the problem that I have in the picture above when I collapse the page. I don't want to links to stretch to the outside of my page, that does not fix my problem.
Try this Fiddle
#header {
background-color: #C67171;
display:inline-block;
}
#headtop {
text-align: right;
width: 1000px;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>
The problem is when the window is showing greater than 1000px on screen you're page seems to work. When you make it smaller the header will shrink thanks to width: 100%;.
But as we get smaller the div #headtop will stay the same size width: 1000px;. So the header will get smaller but the child element (#headtop) will still be big causing the scrolling you are seeing.
#header {
background-color: #C67171;
width: 100%;
}
#headtop {
text-align: right;
width: 100%;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
}
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>
Here is how you keep the links away from the sides (look at comments for more on that). Give #headertop a max width and then give it a width of 80% or however much you want the gap to have.
JSFIddle Here
Whenever I add a heading to the second div in my header, it move down. I've seen several answers to this problem, but none have worked so far, so this is either different, or I'm doing it wrong.
This is my header
<div id='header' class='full'>
<div id='headerhead' class='full'></div>
<div id='headertext' class='full'><h1>Protocol Grean</h1></div>
<div id='headerbuttons'></div>
</div>
This is the CSS for the four divs
#header {
height: 200px;
background-color: green;
}
#headerhead {
height: 50px;
background-color: darkgreen;
}
#headertext {
padding-left: 50px;
height: 100px;
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
text-transform: uppercase;
background-color: pink;
}
#headerbuttons {
height: 50px;
background-color: blue;
}
What do I need to add to make the HeaderText not float down? Vertical align doesn't seem to do anything for me, and position absolute just make the HeaderButtons go away.
You need to remove the margin from your h1 element:
#headertext h1 {
margin: 0;
}
I'm sure I'm doing something obvious wrong, but I haven't been able to figure it out. My lightboxes size dynamically (percentage width), and I want the content within the lightboxes to scroll vertically as needed on smaller screens without displacing the border (actually a box-shadow) around the content.
As an added caveat, I need the "container" div to have dynamic height. When I set the container div to height: 100%, the lightbox functions like I want (see code below), but when I remove the height setting, the overflow no longer works right.
This demo of my lightboxes in action should help clarify my question:
http://viewer.zmags.com/publication/a82492b9?viewType=pubPreview
Here's my CSS:
html{
height: 100%;}
body {
font-family: Verdana, sans-serif;
font-weight: 400;
font-size: 12pt;
color: #FFFFFF;
padding: 0px;
margin: 0px;
background: #FF0000;
height: 100%;
overflow: hidden;}
div.container {
background-color: #6d6d6d;
padding: 20px;
height: 100%; <!-- I want to remove this, but can't figure out a way to get the same functionality without it -->
overflow: hidden;}
div.content {
background-color: #6d6d6d;
overflow: auto;
max-height: 100%;
margin: 0px auto;}
div#tab1 {
box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 4px #be854C inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
And my HTML:
<body>
<div class="container" id="tab1">
<div class="content">
<p>Lightbox content here.</p>
</div>
</div>
</body>
</html>
If your browser support requirements allow it, consider absolutely positioning your .container div, and setting its top, left, etc appropriately:
div.container {
background-color: #6d6d6d;
padding: 20px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
That has some downsides if you're trying to position other elements on the page, but for a lightbox, it's a reasonable solution.
I am trying to create a responsive version of my portfolio website and I am nesting my logo image and title inside the header tag. The older version used divs to float the logo and title on the left and right sides of the header.
Here is where I got stuck at when I tried to space the img and h1 without using divs.
The title is placed at the top right corner, but I don't know how to vertically center both img and h1 without using the older methods.
Layout as of Now
HTML
<header>
<img src="images/logo.png" width="203" height="41" alt="logo for Design415.com" class="logo">
<h1 class="pagetitle">PORTFOLIO TITLE</h1>
</header>
CSS
header {
position: relative;
width: auto;
max-width: 900px;
height: 60px;
margin: 0 auto 20px auto;
background-color: #333333;
overflow: hidden;
}
.logo {
position: absolute;
left: 0;
margin: 0;
}
.pagetitle {
position: absolute;
right:0;
font-family: 'Century Gothic', Helvetica, sans-serif;
font-size: 1.40em;
font-weight: bold;
margin: 0;
color: rgb(240, 240, 240);
}
To center the text vertically add line-height: 60px:
.pageTitle {
// Your styles here
line-height: 60px;
}
To center the image vertically, change the margin on top:
.logo {
// Your styles here
margin-top: 9px;
}
Here is a working JSFiddle.
I'm using this code to center/position a fixed width image as my background. I need to add color around the image that fills the margins in the browser window. I've tried background color, border color...
So, the width of the image is 1050px. If the browser window is 1500px I want to make the remaining area black (for instance). How can I do this?
#content {
text-align: left;
width: 1050px;
height: 825px;
margin: 0 auto;
padding: 0px;
background-image: url(file:///X|/CarFingers/tabback1_hor.png);
background-repeat: no-repeat;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333333;
text-align: center;
}
<div id="content">
<body>
</body>
</div>
First: put the div INSIDE your body. Then you can just edit your body background like this:
body{
background-color: black;
}
Your HTML is invalid, you should not have a div tag enclosing the body tag. If you put the div within the body you should be able to simply set the background color of the body.
If you are wanting to know how to color a border in CSS it would be
border: 10x solid #000;
or
border-width: 10px;
border-color: #000;
border-style: solid;
#content {
text-align: left;
width: 1050px;
height: 825px;
margin: 0 auto;
padding: 0px;
background-image: url('file:///X|/CarFingers/tabback1_hor.png');
background-repeat: no-repeat;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333333;
text-align: center;
background-color: #000; /* Add this to your code */
}
In your html you should do something like this:
<body>
<div id="content">
</div>
</body>
You should never enclose the BODY in DIV