I'm struggling to find a direct answer to my problem due to the many variations in peoples code.
I imagine my code is probably very messy as i'm trying to build a website for my partner, and quickly (i have just a few hours Dreamweaver experience and that's it)!
Anyway, i have a fixed width website where there are around 6 separate divs in a column, all contained within a webpage-sized div for my background colour.
Anyway, when i am trying to add a border to my footer, it does not display in browsers. I just wan 1px to separate the 'main' div from the footer and it won't appear. This is also the same for my navigation div.
body{
color:#00000;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
}
#body{
background-color:#000000;
}
#header{
width:800px; /* The width is fixed by pixels */
height:150px; /* The height is fixed by pixels*/
color:#fff;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
}
#navigation {
width:798px;
height:51px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid; /*Selecting solid made the border appear*/
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:1px;
border-color:#000000;
text-align:center;
background-color:ffffff;
}
#main {
width:798px; /* The width is fixed by pixels */
height:800px; /* The height is fixed by pixels*/
color:#fff;
background-color:#fff;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid; /*Selecting solid made the border appear*/
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:0px;
border-color:#000000;
text-align:center;
}
#footer {
/*Styling for any element with the id="container" */
width:798px; /* The width is fixed by pixels */
height:100px; /* The height is fixed by pixels*/
color:#fff;
background-color:#fff;
margin-left: auto;
margin-right:auto;
border-style:solid;
border-left:1px;
border-right:1px;
border-bottom:1px;
border-top:1px;
border-color:#000000;
}
#Facebook {
float:right;
}
#Twitter {
float:right;
}
#LinkedIn {
float:right;
}
</style>
</head>
<body>
<div id="body">
<div id="header">
<img src="Images/Logo.jpg" alt="Ruth Fifer Jewellery">
</div>
<div id="main">
<div id="navigation">
<br />
</div>
<br />
<br />
<img src="Images/Home Image.jpg" />
</div>
<div id="footer">
<img src="Images/facebook.png" alt="Facebook" id="Facebook"/>
<img src="Images/twitter.png" alt="Twitter" id="Twitter"/>
<img src="Images/linkedin.png" alt="LinkedIn" id="LinkedIn"/></div>
</div>
</body>
If anyone is able to help it would be great, as i get the feeling I'm probably using conflicting codes due to my inexperience but don't have time to learn everything right now and will instead go back at a point where i have more time to adjust things.
Thanks,
Martyn
1) Write <!DOCTYPE><html><head> tag in the beginning of the code.
2) Write </html> tag in the end of the code.
AND USE:
border: 1px 0px solid #000000;
And it will solve your problem. Look at http://jsfiddle.net/p2269/1/ I wrote code as I explained and it shows borders.
Your code is incomplete, I think...
Here you have a working example.
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{
color:#00000;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
}
#body{
background-color:green;
}
#header{
width:800px; /* The width is fixed by pixels */
height:150px; /* The height is fixed by pixels*/
color:#fff;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
}
#navigation {
width:798px;
height:51px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid; /*Selecting solid made the border appear*/
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:1px;
border-color:#000000;
text-align:center;
background-color: yellow;
}
#main {
width:798px; /* The width is fixed by pixels */
height:800px; /* The height is fixed by pixels*/
color:#fff;
background-color:blue;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid; /*Selecting solid made the border appear*/
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:0px;
border-color:#000000;
text-align:center;
}
#footer {
/*Styling for any element with the id="container" */
width:798px; /* The width is fixed by pixels */
height:100px; /* The height is fixed by pixels*/
color:#fff;
background-color:red;
margin: 0 auto;
border-top: 3px solid white;
}
#Facebook {
float:right;
}
#Twitter {
float:right;
}
#LinkedIn {
float:right;
}
</style>
</head>
<body>
<div id="body">
<div id="header"> </div>
<div id="main">
<div id="navigation">
<br />
</div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>
When containing element (div with id=footer in your case) only contains floated elements (facebook, twitter and linkedin icon) some browser will treat it as if it is zero pixels tall. You should add two CSS rule in footer selector: the overflow property with its value auto, the width property with its value 100%, to show that border.
Related
Note:
Before I posted my question I have searched this site to get answers, but I couldn't find any solution which allows me to set equal margin in percentages value.
The following codes are not scaling to full 25% of it wight:
Please see the sample HTML code below:
<style>
#Wrapper {
margin:0 auto;
width:70%;
}
#MainLogo{
width:100%;
height:100px;
border:1px solid #000;
}
#LeftSide{
width:25%;
height: 600px;
background-color:#90F;
margin-top:5px;
float:left;
}
#FloatLeft {
float:left;
}
#One{
width:25%;
height:300px;
background-color:#000;
margin-top:5px;
float:left;
}
#Two{
width:25%;
height:300px;
background-color:#F00;
margin-top:5px;
float:left;
}
#Three{
width:25%;
height:295px;
background-color:#F00;
margin-top:5px;
float:left;
clear:both;
}
#Four{
width:25%;
height:295px;
background-color:#000;
margin-top:5px;
float:left;
}
#RightSide{
width:25%;
height: 600px;
background-color:#00F;
margin-top:5px;
float:right;
margin-bottom:5px;
}
#MainFooter{
width:100%;
height:100px;
border:1px solid #000;
clear:both;
}
</style>
<body>
<div id="Wrapper">
<header id="MainLogo">
Logo Goes here!!
</header>
<aside id="LeftSide">
Left side goes here
</aside>
<div id="FloatLeft">
<aside id="One">
One Goes Here!!
</aside>
<aside id="Two">
Two aside goes here!!
</aside>
<aside id="Three">
Three aside goes here!!
</aside>
<aside id="Four">
Four aside goes here!!
</aside>
</div>
<aside id="RightSide">
Right side goes here
</aside>
<footer id="MainFooter">
Main Footer Goes here!!
</footer>
</div>
The reason it isn't working is because of things such as padding and margin. You are going to need to use the box-sizing property to get the effect you want.
First, you should remove the padding and margin for everything, then set the box-sizing property to border-box. This will ensure that no matter how much padding or margin you have, it will always stay at the height, and width you specify.
Here is a sample usage
* {
padding:0;
margin:0;
box-sizing-border-box;
}
The box-sizing property isn't fully supported yet, so you will need to use vendor specific properties
My code is viewable at http://jsfiddle.net/ATbA5/2/ code will also be at the end of this post
I am trying to make content-wrapper 100% height however for it to be centered. I have looked at other theards on stackoverflow and Can't find a solution. Also A fixed footer at the end of the page not the bottom of the broswer window
HTML
<head>
<link rel="stylesheet" type="text/css" href="primary-resources/css/main-styles.css"/>
</head>
<body>
<div class="content-wrapper">
<!-- Header -->
<div class="header">
<div class="threetwentyleft">
<img src="primary-resources/imgs/header-logo.png" />
</div>
<div class="sixfortyright">
<div class="gameAdBanner">
<img src="game-resources/gameone/imgs/banner.png"/>
</div>
</div>
</div>
<!-- Content -->
<div class="gameLeft"></div>
<div class="gameRight"></div>
</div>
</body>
</html>
CSS
body ,html {
background-color:#000000;
height:100%;
top:0px;
bottom:0px;
clear:both;
padding:0px;
margin:0px;
}
.content-wrapper {
margin:auto;
background-color:#ffffff;
width:960px;
padding:0px;
bottom:0;px;
top:0px;
margin:auto;
box-sizing:border-box;
height:100%;
box-sizing:border-box;
clear:both;
box-sizing:border-box;
}
.header {
width:100%;
}
.threetwentyleft {
width:320px;
float:left;
padding:2px;
}
.threetwentyleft img{
width:320px;
padding:2px;
border:0px;
}
.sixfortyright {
width:630px;
float:right;
height:130px;
}
.gameAdBanner {
width:610px;
margin-top:2px;
margin-left:auto;
margin-right:auto;
}
.center {
margin-left:auto;
margin-right:auto;
}
.gameLeft {
width:700px;
padding:5px;
float:left;
}
.gameRight {
width:260px;
background-color:#CCC;
float:right;
padding:5px;
height:100%;
margin-right:3px;
}
.footer {
width:960px;
background-color:#FC6;
bottom:0px;
height:25px;
position:absolute;
}
Sounds like you want normal html behaviour, no need for any css, just add a div, or any block element after the content.
Hello I am trying to vertical and horizontally align 4 divs inside each other with CSS but nothing is working for me.
Please help me! Thanks in advance
My CSS Please note this is just 1 method ive tried I have been sitting here for about 2 hours messing with this and couldnt figure it out.
* {
margin:0px;
padding:0px;
}
body {
background-color:#454545;
}
.wrapper {
margin:auto;
width:960px;
}
.circle-wrapper {
height:918px;
width:918px;
background-image:url(images/overlay.png);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:absolute;
text-align:center;
margin:auto;
}
.outer-inner-background {
background-image:url(images/center-circle.GIF);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:relative;
height:494px;
width:494px;
margin:auto;
}
.outer-inner-rings {
background-image:url(images/inner-outer-rings.PNG);
background-size:cover;
background-position:center center;
position:relative;
width:494px;
height:494px;
margin:auto;
}
.inner-image {
position:relative;
height:308px;
width:308px;
margin:auto;
}
My HTML: I don't care if the structure changes it just needs to work
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Untitled Document</title>
</head>
<body>
<div class="wrapper">
<div class="circle-wrapper">
<div class="outer-inner-background">
</div>
<div class="outer-inner-rings">
</div>
<div class="inner-image">
<img class="inner-img" src="images/inside-image.PNG" width="308px" height="308px">
</div>
</div>
</div>
</body>
</html>
here my try http://dabblet.com/gist/4013306
code:
css
div {overflow:hidden}
#first {
background:red;
width:400px;
height:400px;
border-radius:300px;}
#second {
background:grey;
height:95%;
width:95%;
border-radius:300px;
margin:2.5%}
#third {
background:green;
height:70%;
width:70%;
border-radius:200px;
margin:15%;}
#forth {
background:black;
height:95%;
width:95%;
border-radius:200px;
margin:2.5%;}
html
<div id="first">
<div id="second">
<div id="third">
<div id="forth"></div>
</div>
</div>
</div>
Try using position: relative; on the container, and position: absolute; on the circles with suitable left and top values to place them in the middle.
Well, you can use absolute positioning in your inner divs where left and top positions are always set to (Parent element width - child element width /2). Here's my code
html
<div id="red">
<div id="grey">
<div id="green">
<div id="black">
</div>
</div>
</div>
</div>
CSS
div
{
border-radius:100%;
}
#red
{
position:relative;
margin-left:auto;
margin-right:auto; /** centers #red on screen **/
background-color: #F00;
width:400px;
height:400px;
}
#grey
{
background-color:#CCC;
position:absolute;
top:20px;
left:20px;
width:360px; /** 400 - 360 = 40/2 = 20px for left and top **/
height:360px;
}
#green
{
background-color:#0E0;
position:absolute;
top:40px;
left:40px;
width:280px;
height:280px;
}
#black
{
background-color:#000;
position:absolute;
left:20px;
top:20px;
width:240px;
height:240px;
}
Here's the fiddle:
http://jsfiddle.net/brunovieira/pmN4z/
Fiddle with #red centered on screen:
http://jsfiddle.net/brunovieira/pmN4z/2/
Does it need to be 4 divs? try this:
http://jsfiddle.net/vSyWZ/2/
HTML
<div class="outer">
<div class="inner"><div>
</div>
CSS
div{position:relative; margin:0 auto;}
.outer{width: 350px; height: 350px; background-color: gray; border-radius: 100%; border:10px solid red; vertical-align: middle;}
.inner{width: 200px; height: 200px; background-color: black; border-radius: 100%; border:10px solid green; top:60px;}
I tested on Chrome and Firefox and works fine, IE doesn't have support for rounded corners but it is centered.
I'm having a heck of a time with this and after trying to implement what I've read in dozens of posts, I'm still not having any luck with one last part of this.
What I have is a parent div that houses two rows of additional divs. The first row is a single div and contains a label with a link. The second row contains multiple divs side-by-side.
The first row (label/link) is centering just fine. What I'm having trouble with is centering the second row of divs. They are all side-by-side, but they are displaying as if I were left-justifying them.
Here is my CSS:
div.parent-container {
position:absolute;
background-color:#fff;
top:32px;
left:-1px;
width:418px;
height:67px;
border-right:solid 1px #000;
border-left:solid 1px #000;
border-bottom:solid 1px gray;
padding-left:2px;
text-align:center;
float:left;
}
div.text-label a {
position:absolute;
background-color:#fff;
font-family:Microsoft Sans Serif,Arial;
font-weight:bold;
width:417px;
height:15px;
font-size:12px;
margin-left:auto;
margin-right:auto;
}
div.sub-container {
position:relative;
width:30px;
height:auto;
top:20px;
float:left;
padding-right:5px;
margin-left:auto;
margin-right:auto;
}
span.span-text {
position:relative;
font-weight:bold;
font-family:Microsoft Sans Serif,Arial;
font-size:11px;
width:30px;
height:auto;
}
div.img1 {
height:26px;
width:18px;
background:url(sprite.png) -72px -144px no-repeat;
margin-left:auto;
margin-right:auto;
}
div.img2 {
height:26px;
width:18px;
background:url(sprite.png) -95px -143px no-repeat;
margin-left:auto;
margin-right:auto;
}
div.img3 {
height:26px;
width:18px;
background:url(sprite.png) -117px -143px no-repeat;
margin-left:auto;
margin-right:auto;
}
div.img4 {
height:26px;
width:18px;
background:url(sprite.png) -141px -143px no-repeat;
margin-left:auto;
margin-right:auto;
}
And my HTML:
<div class="parent-container">
<div class="text-label">link to website</div>
<div id='div1' class='sub-container'><span class='span-text'>text1</span>
<div class='img1'></div>
</div>
<div id='div2' class='sub-container'><span class='span-text'>text2</span>
<div class='img2'></div>
</div>
<div id='div3' class='sub-container'><span class='span-text'>text3</span>
<div class='img3'></div>
</div>
<div id='div4' class='sub-container'><span class='span-text'>text4</span>
<div class='img4'></div>
</div>
</div>
I've tried creating an additional div to house the second row of divs, but that didn't work either.
Any help is greatly appreciated!
jsfiddle example
You want to remove the float:left from the subcontainer divs (div.sub-container) and give them a width (about 23% due to padding, margins, etc.)
Encompass the 2nd row with another container if you want to center the elements/child div's within it.
Here's a Demo
also,if you want to center an element,you need to define its width,in the demo - i've given a width of 200px. which you can change as per your preference.
CSS for the container :
.textContainer{
margin: 0 auto;
width:200px; /* can be in percentage ,say 50% */
position:relative;
overflow:hidden;
}
The html below should essentially be a list of images aligned vertically on the left. I want the pictures to scroll, but I don't want the rest of the page to scroll. I also want the rest of the page to have a hidden overflow. Is there anyway to do this with just html and css and how?
HTML:
<!DOCTYPE html>
<html>
<title>Scrolling Pictures</title>
<head>
<link rel="stylesheet" type="text/css" href="scrollingPictures.css" />
</head>
<body>
<div id="scroll">
<img class="left" id="image1" src="C:\Users\Shikamaru\Documents\Contwined Coding\Ravel\New Briefcase\images\bradBeachHeart.JPG" alt="Brad at the Lake"/>
<img class="left" id="image2" src="C:\Users\Shikamaru\Documents\Contwined Coding\Ravel\New Briefcase\images\mariaNavi.jpg" alt="Making Maria Na'vi"/>
<img class="left" id="image3" src="C:\Users\Shikamaru\Documents\Contwined Coding\Ravel\New Briefcase\images\mattWaterRun.jpg" alt="Photoshopped Matt"/>
</div>
</body>
</html>
CSS:
body{
overflow:auto;
margin-left:0;
margin-top:0;
}
div#scroll{
border-right:1px solid orange;
position:absolute;
z-index:2;
float:left;
width:200px;
overflow:auto;
}
.left{
z-index:inherit;
float:left;
width:200px;
min-height:200px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:200px; /* for IE5.x and IE6 */
opacity:0.4;
filter:alpha(opacity=40);
}
#image1, #image2, #image3{
width:200px;
}
Just give your #scroll a height of 100%, and your body a overflow: hidden:
body{
overflow:hidden;
margin-left:0;
margin-top:0;
}
div#scroll{
border-right:1px solid orange;
position:absolute;
z-index:2;
float:left;
width:200px;
overflow:auto;
height: 100%;
}
.left{
z-index:inherit;
float:left;
width:200px;
min-height:200px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:200px; /* for IE5.x and IE6 */
opacity:0.4;
filter:alpha(opacity=40);
}
#image1, #image2, #image3{
width:200px;
}
http://jsfiddle.net/QcHNu/