I am trying to create a HTML layout and I have created a number of elements and given them a border etc in my CSS. I am trying to have the main 'Wrapper' centered so everything that goes inside this element are also centered.
I have tried everything, margin, align, absolute etc and nothing is working. My stays situated in the top left corner of my page.
This is my index page where the elements are:
<!--#include file ="inc.heads.asp"-->
<html>
<head>
</head>
<body>
<div id ="divWrapper">
<div id ="divHeader">
<img src="Images/title.png">
<br>
<div id ="divNavBar">
<br>
<div id ="divContent">
</div>
</div>
</div>
</div>
</body>
</html>
and this is my CSS:
body {
background-color: #300;
}
#divWrapper {
margin: 0 auto;
width: 800px;
}
#divHeader {
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
}
#divNavBar {
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
}
#divContent {
float: left;
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
}
If someone could possibly shed some light on why none of the things I have tried work and what a possible solution could be.
Thanks!
#divWrapper{
margin-left:auto;
margin-right:auto;
}
Should do the trick.
Just add margin: 0 auto to the contents of #divWrapper:
For example, add to your CSS:
#divWrapper * {
margin: 0 auto;
}
If you only want the div elements to be centered, use:
#divWrapper div {
margin: 0 auto;
}
You can see a working demo here > http://jsfiddle.net/gu7Sr/
Also, as a side note, try to avoid using <br /> for creating your layout. It won't scale well and you'll have a tough time redesigning in the future!
I think this is what you want. Link : http://codepen.io/anon/pen/Ihzxp
<body>
<div id="divWrapper">
<div id="divHeader">
<img src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Small.png">
<div id="divNavBar">
<div id="divContent">
Stuff
</div>
</div>
</div>
</div>
</body>
and
body {
background-color: #300;
}
#divWrapper {
width: 100%;
}
#divHeader {
width: 600px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
margin: 5px auto;
text-align:center;
}
#divNavBar {
width: 550px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 15px;
margin: 5px auto;
}
#divContent {
width: 500px;
border-style: inset;
border-color: #COCOCO;
background-color: #707070;
padding: 5px;
margin: 5px auto;
}
More just a comment to BenM's answer, but I don't have the reputation to comment yet.
Pretty sure just:
margin:auto;
will do the trick by itself.
Seriously what is the point of all those wrappers? Just do this:
body {width: 800px; margin: 0 auto; }
Related
I'm having trouble with the text within the button in particular. Whenever I try to apply padding to the top or bottom of the button so the text is centered, bu all it does is move the whole button. I suspect it has a lot to do with my lack of understanding with positioning and display.
<!DOCTYPE html>
<html>
<head>
<title>WhiteGrid</title>
<link type="text.css" rel="stylesheet" href= "stylesheet.css"/>
</head>
<body>
<div>
<div id="header"><img src="title.png"></div>
<div id="navbar">
<div class="button"><p>Home</p></div>
<div class="button"><p>Gallery</p></div>
<div class="button"><p>About</p></div>
<div class="button"><p>Settings</p></div>
</div>
<div id="body"></div>
<div id="footer"><p>Copyright© 2015 Hayden Shaw. All rights reserved.</p></div>
</div>
</body>
</html>
CSS:
body {
background-color: #C6C1C9;
}
#header {
display: block;
background-color: #856799;
height: 60px;
width: 100%;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#header > img {
display: block;
margin: auto;
}
#navbar {
display: block;
background-color: rgba(73,71,74,0.7);
height: 40px;
width: 100%;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#body {
display: block;
width: 100%;
min-height:500px;
}
#footer {
padding-top:24px;
display: block;
background-color: #7D7285;
width: 100%;
height: 60px;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#footer > p {
position: relative;
text-shadow: 0px -1px rgba(0,0,0,0.2);
color: #A3A3A3;
font-family: Verdana;
font-size: 10px;
text-align: center;
}
.button{
margin:0px;
text-shadow: 0px -1px rgba(0,0,0,0.2);
font-family: Verdana;
text-align: center;
color: white;
display: inline-block;
height: 40px;
width: 80px;
background-color: rgba(73,71,74,0);
}
.button:hover{
background-color: #353336;
color: #856799;
}
Thanks in advance.
Don't apply padding to the button but to the paragraph you have the text in. If you are having trouble laying out the text, I would suggest using an image of the text which would be easier.
It seems like you are trying to create a menu bar. I wouldn't do it using divs. Using a table or list is much easier.
<table>
<tr>
<td>Home</td>
</tr>
</table>
<ul>
<li>Home</li>
</ul>
This will be much easier to style.
There's no need to use positioning for this. And you shouldn't be using div's to create buttons either, for a number of reasons.
The best thing you could do is use the <button /> element, or use an anchor tag instead:
HTML:
Button
CSS:
.paddedButton
{
padding: 10px;
}
.khaki
{
background-color: khaki;
}
.noUnderline
{
text-decoration: none;
}
.noUnderline:hover
{
text-decoration: underline;
}
I'm using Bootstrap 3.3.1 thumbnail classes for images and there is white space at the top of the images. How to remove it?
My code is:
.image-thumbnail2 {
float:left;
margin-bottom: 10px;
margin-right: 10px;
width: 300px;
padding: 0px !important;
border-radius: 4px;
border: 0px;
}
.image-img-thumb2
{
max-width:300px;
max-height: 220px;
margin:0px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
width: 300px;
height: 220px;
}
<div class="thumbnail image-thumbnail2">
<img src="<?php echo URL::base();?>assets/images/<?php echo $val['folder'];?>/tmb/<?php echo $val['image_name'];?>" class="image-img-thumb2"/>
</div>
Its difficult to spot the exact problem without your entire code but it seems your problem might be related to your body:
Add this to your CSS:
body { margin:0; padding:0;}
You should reset your margins and paddings at the top of your css:
*{
margin: 0;
padding: 0;
}
Note: I am a beginner. For some reason, my links that were working don't work at all anymore. What am I doing wrong?
Here's the HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="portfoliostyles.css">
<title>Home</title>
</head>
<body>
<div class="header"><img class="hoofd" src="images/leaugeau.png" alt="logo">
<ul>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<img class="line" src="images/line.jpg" alt="lijn" width='95%' height='2px'>
<div class=content>
<img class="image" src="images/thumbnails/watrgatrthumb.jpg" alt="watrgatr" width=400px height=400px>
<img class="image" src="images/thumbnails/typhlotrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
<img class="image" src="images/thumbnails/anneketrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
</div>
</body>
</html>
And here's my CSS:
#charset "UTF-8";
/* CSS Document */
html,body
{
height: 150%;
width: 100%;
margin: 0px 0px 0px 0px;
}
.hoofd
{
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.header
{
height: 216px;
width: 99%;
position: fixed;
background-color: #FFFFFF;
}
.line
{
margin: 0px 0px 15px 0px;
padding-top: 216px;
position:fixed;
}
ul
{
list-style-type:none;
margin-right:5%;
padding:0;
text-align:center;
}
li
{
display:inline;
float:right;
margin-right:2%;
font-size:45px;
line-height: 280px;
}
.content
{
padding: 230px 0 0 1.5%;
}
a
{
font-family: "HelveticaNeue-light";
text-decoration: none;
color: #000000;
}
a:hover
{
font-family: "HelveticaNeue-light";
color: #E8DA62;
}
h1
{
font-family: "HelveticaNeue-thin";
font-size: 24px;
}
p
{
font-family: "HelveticaNeue-thin";
font-size: 12px;
}
edit: Oh, and to clarify: My pages where, indeed, in the root folder, so no more folder-linking necessary.
But it got solved, thanks! Gotta work something out for the fixed line thing though. But it'll work out.
the problem with the CSS code is you are using fixed position on some classes.
would be better if you remove position: fixed; from below these two classes.
For better understanding check the Demo.
.header
{
height: 216px;
width: 99%;
position: fixed; /*Remove this line; so anchor tag could work*/
background-color: #FFFFFF;
}
.line
{
margin: 0px 0px 15px 0px;
padding-top: 216px;
position:fixed;/*Remove this line; so anchor tag could work*/
}
you are overlapping with position:fixed
remove it from
.line
Demo
It's kinda hard to see without an actual example, but it looks like your .line is on top of them. If I'm correct:
Since it's position:fixed, it is being overlayed at the top, then you have given it a padding-top:216px; which is increasing the area it is consuming from the top, likely overlaying itself ontop of your header and navigation menu.
To fix it, you should figure out another way to position .line wherever you are trying to. You likely want top:216:
.line {
margin: 0px 0px 15px 0px;
top: 216px;
position:fixed;
}
When my app-container div expands, it will overflow my footer. My footer should move down away from the app-container (or the entire wrapper respectively), but it does not, and I don't manage to find what's wrong.
HTML Code:
<div class="wrapper">
<div class="wrapperbackground">
<div class="app-container">
</div>
</div>
</div>
<footer>
<div class="footerwrapper">
</div>
</footer>
CSS code:
.wrapper { text-align:center; min-height: 900px; }
.wrapperbackground { background-color: #C63D0F; height:375px; padding: 25px 0px; }
.app-container {
border: 1px dotted;
padding: 30px;
margin: 0 auto;
min-height:300px;
width:775px;
background-color:#FDF3E7;
overflow:hidden;
}
footer {
height:100%;
border-top: 1px dashed #FDF3E7;
background-color:#250800;
text-align:left;
}
.footerwrapper { border-bottom: 1px dotted #3B3738;padding:50px;min-height:200px; background-color:#220a03; margin: 0 auto; }
Would be nice if someone could help me. I agree that the CSS code is a little bit messy, and that's perhaps the problem.
You needed to move .wrapperbackground to be before .app-container so it is no longer wrapping it. Then on '.wrapperbackground' apply:
position: absolute; top: 0; right: 0; left: 0; height: 200px;
Then on .wrapper apply position: relative; for good measure and more portability.
See this updated fiddle - http://jsfiddle.net/p57rK/1/
I want my 'header' div to sit within the 'container' div. At the moment the 'header' div is sitting above the 'container' div and I cannot seem to put it in it. Below is the coding. Thanks for the help.
HTML:
<body>
<div id="container">
<div id="header">
<h1>Title Goes Here</h1>
</div>
</div>
</body>
CSS:
#body {
background-color: #CCC;
}
#container {
width: 960px;
height: 800px;
background-color: #666;
margin: 0 auto 0 auto;
}
#header {
position: relative;
width: 956px;
height: 100px;
background-color:#FFF;
border-style: solid;
border-color: #F00;
border-width: 2px;
text-align: center;
line-height: 3em;
}
It is inside it. Remove the background color on your header and you'll see the container's background behind.
It is inside the container, just the looks like it's on top because of the colors. Open up w/e browser tools you prefer and take a look at the container div.
It is inside your container. Adding padding or remove the background will make it more visable
jsfiddle
#body {
background-color: #CCC;
}
#container {
width: 960px;
height: 800px;
background-color: #666;
margin: 0 auto 0 auto;
padding:20px;
}
#header {
position: relative;
width: 956px;
height: 100px;
background-color:#FFF;
border-style: solid;
border-color: #F00;
border-width: 2px;
text-align: center;
line-height: 3em;
}
set background color to transparent or just remove it temporarily, you'll see that the header is inside there