I have a header element in a header div but for some reason i can't seem to add any bottom margin or padding to it. Margin/padding top, left, and right work find however. is there a reason for this? here is my code.
html
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
css
#Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
/----------------------------------------/
#Header {
position: absolute;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/
}
I would avoid using position styling like that; it tends to interfere with the way block elements interact with each other. Based on the styles and markup provided, I don't see a reason why padding/margin would not be working; however your example doesn't actually show any padding/margin applied, so it's hard to say what might be going wrong.
I would alter your styling thusly:
#Container {
width: 96%;
margin-left: auto;
margin-right: auto;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
height: 15%; /* This should really be a static number, not a percentage*/
width: 100%;
border-bottom: 2px solid #e8e2e2;
margin-bottom: 20px; /* This will push elements below your header div down by 20 px*/
}
Try to add pading to header tag's self. Because it is relative to other containers.
#Container {
position:relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position:relative;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
position:relative;
padding-top:20px;
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
/*background-color: red;*/
}
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
Firstly, please add #for Container as in #Container in css.
Below is the code where I have added margin bottom for h1. Please let me know if you still have any troubles.
<html>
<head>
<style type="text/css">
#Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position: absolute;
height: 15%;
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
border:1px solid red;
margin-bottom:10px;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
<p>some text here</p>
</div>
</div>
</body>
</html>
Hope this helps.
Thanks
Padding-bottom and margin-bottom does actually work, it's just that it's not visible because you're currently setting the height of #Header to 15% and then giving it that light grey bottom border. This is what gives the illusion that padding-bottom or margin-bottom doesn't work.
See working version here http://codepen.io/sajadtorkamani/pen/zxxzgo
HTML
<div id="Container">
<div id="Header">
<h1>My Webpage</h1>
</div>
</div>
CSS
Container {
position: relative;
width: 96%;
height: 98%;
left:2%;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 15px 5px;
}
#Header {
position: absolute;
/* height: 15%; */
width: 100%;
/*background-color: red;*/
border-bottom: 2px solid #e8e2e2;
}
#Header h1 {
font-size: 2.5em;
text-align: center;
color:#e8e2e2;
padding-bottom: 20px;
/*background-color: red;*/
}
Just commenting out height: 15% for #Header solves the issue.
Related
I am trying to make an online portfolio for myself and I have a bottom container for the bottom half of the screen and I would like to place 3 buttons at the top of the container. I have got it to work except when you resize the page. When you shrink the page's width the buttons will overlap. How can I stop them from overlapping? I want them to go close together side by side but not overlap.
h1 {
margin-left: 33%;
margin-right: 33%;
text-align: center;
}
img {
width: 15%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
#top,
#bottom {
position: fixed;
left: 0;
right: 0;
height: 50%;
}
#bottom {
border-top: 2px solid black;
margin-left: auto;
margin-right: auto;
display: block;
float: center;
position: fixed;
border: 2px solid black;
padding: 15px;
padding-bottom: 17px;
}
#navbuttons {
border-top: 2px solid black;
margin-left: auto;
margin-right: auto;
display: block;
float: center;
position: relative;
border: 2px solid black;
padding: 15px;
padding-bottom: 10px;
}
#resumebutton {
display: inline-block;
position: absolute;
top: 0%;
left: 33%;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid black;
border-radius: 20px;
padding: 5px;
background-color: #7dd7f5;
text-align: center;
}
#coverletterbutton {
display: inline-block;
position: absolute;
top: 0%;
left: 46.5%;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid black;
border-radius: 20px;
padding: 5px;
background-color: #7dd7f5;
text-align: center;
}
#portfoliobutton {
display: inline-block;
position: absolute;
top: 0%;
left: 62.5%;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid black;
border-radius: 20px;
padding: 5px;
background-color: #7dd7f5;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>--Name Here-- Resume and Portfolio</title>
</head>
<body>
<div style="height: 100%"></div>
<div id="top"></div>
<h1>--Name Here--</h1>
<img src="http://science-all.com/images/wallpapers/cat-pictures/cat-pictures-20.jpg"/>
<h1>Resume and Portfolio</h1>
<div id="bottom">
<div id="navbuttons">
<div id="resumebutton">Resume</div>
<div id="coverletterbutton">Cover Letter</div>
<div id="portfoliobutton">Portfolio</div>
</div>
</div>
</body>
</html>
I would provide an example if I knew how.
Thank you
you don't need to absolute position the buttons if you have the container fixed. you can use inline-block and just text-align: center on your container. Also there are errors in your css, like there is no float: center;, you can also skip the # and use class as they share css properties. But I agree that Bootstrap is the way to go for responsive, and especially if you are new.
#bottom {
border-top: 2px solid black;
text-align: center;
margin-left: auto;
margin-right: auto;
display: block;
position: fixed;
border: 2px solid black;
padding: 15px;
padding-bottom: 17px;
}
.nav-button {
display: inline-block;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid black;
border-radius: 20px;
padding: 5px;
background-color: #7dd7f5;
text-align: center;
}
<div id="bottom">
<div class="nav-button">Resume</div>
<div class="nav-button">Cover Letter</div>
<div class="nav-button">Portfolio</div>
</div>
The bootstrap grid system is great at this. I recommend using it in combination with some of your custom styles to produce a bottom section split into equally sized columns.
Grids are split into 12 columns, so columns of 4 (e.g. col-md-4) will split into evenly spaced vertically.
For the bottom, that would look something like:
<div id="bottom">
<div id="navbuttons" class="row">
<div id="resumebutton" class="col-md-4">Resume</div>
<div id="coverletterbutton" class="col-md-4">Cover Letter</div>
<div id="portfoliobutton" class="col-md-4">Portfolio</div>
</div>
</div>
You can make these columns wrapper divs if you want to center smaller buttons inside those columns, but the grid structure is a good place to start.
You can just delete attribute position: absolute; from all buttons ( resumebutton, coverletterbutton and portfoliobutton) and add text-align: center to navbuttons selector.
Consider removing the absolutepositioning to replace the elements in question back into the flow of the document. They'll have relation to each other now, so you won't need to rely on positioning rules like left and right.
The elements are already displayed inline-block so just declare a text-align: center rule to the parent and the nested elements will align accordingly.
In the snippet example below, margins have been added around each button for spacing, repetitive rules have been replaced with one instance using a class selector applied to all button elements, note that float: center; is not a valid rule.
Snippet Example
h1 {
margin-left: 33%;
margin-right: 33%;
text-align: center;
}
img {
width: 15%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
#top,
#bottom {
position: fixed;
left: 0;
right: 0;
height: 50%;
}
#bottom {
border-top: 2px solid black;
margin-left: auto;
margin-right: auto;
display: block;
float: center;
position: fixed;
border: 2px solid black;
padding: 15px;
padding-bottom: 17px;
}
#navbuttons {
border-top: 2px solid black;
margin-left: auto;
margin-right: auto;
display: block;
float: center;
/* invalid rule */
position: relative;
border: 2px solid black;
padding: 15px;
padding-bottom: 10px;
text-align: center;
}
#navbuttons .button {
display: inline-block;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 2px solid black;
border-radius: 20px;
padding: 5px;
background-color: #7dd7f5;
text-align: center;
margin: 0px 20px;
}
<div style="height: 100%"></div>
<div id="top"></div>
<h1>--Name Here--</h1>
<img src="http://science-all.com/images/wallpapers/cat-pictures/cat-pictures-20.jpg" />
<h1>Resume and Portfolio</h1>
<div id="bottom">
<div id="navbuttons">
<div id="resumebutton" class="button">Resume</div>
<div id="coverletterbutton" class="button">Cover Letter</div>
<div id="portfoliobutton" class="button">Portfolio</div>
</div>
</div>
I cant see any output in my left and right divs.I can only see the header and footer but not the rest.I am a beginner so please try to answer in simple terms.
Kindly try to point out the error/bug instead of altering the code.
#header {
height: 50px;
width: 1600px;
border: 2px solid red;
border-radius: 5px;
background-color: Aquamarine;
position: fixed;
z-index: 1;
}
.left {
height: 500px;
width: 700px;
border: 2px solid green;
border-radius: 5px;
background-color: Lavenderblush;
float: left;
}
.right {
height: 500px;
width: 700px;
border: 2px solid blue;
border-radius: 5px;
background-color: lightblue;
float: right;
}
#footer {
height: 50px;
width: 1600px;
border: 2px solid black;
border-radius: 5px;
background-color: Yellow;
clear: both;
}
h1 {
text-align: center;
margin: auto;
color: Blue;
font-family: Verdana;
}
h4 {
text-align: center;
margin: auto;
color: Blue;
font-family: Verdana;
}
<div id="header">
<h1>My Resume</h1>
</div>
<div class="left">
<p>Hello how are u</p>
</div>
<div class="right">
<p>some random data here</p>
</div>
<div id="footer">
<h4>This is the footer</h4>
</div>
The header is position: fixed so it is taken out of normal flow (i.e. it doesn't influence the start position of content outside it) and covers the top of the content that immediately follows it.
I haven't loaded this code but likely, your fixed header with a height of 50 is hiding the text you're expecting to see. You could add a margin-top: 50px to .left and .right so they clear the fixed header.
I'm trying to center a div within a div with equal margins. If possible, the box should be in the center of the page. So far I've got the following code:
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #3D3D3D;
padding: 30px;
}
#box{
background-color: gray;
border: solid black 4px;
}
#header {
height:60px;
width: 800px;
margin: auto;
border: solid black 2px;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
line-height: 60px;
background: -webkit-gradient(linear, 0 0, 100% 0, from(black), to(white));
background: -webkit-linear-gradient(left, #52524E, #AAAAA4);
background: -moz-linear-gradient(left, #52524E, #AAAAA4);
background: -o-linear-gradient(left, #52524E, #AAAAA4);
background: linear-gradient(left,#52524E, #AAAAA4);
}
#header a {
font-size: 22px;
color: black;
margin: 30px;
text-decoration: none;
}
img#code {
display: block;
margin: auto;
margin-bottom: 10px;
margin-top: 30px;
width: 500px;
}
#container{
width: 800px;
border: solid white 2px;
margin: auto;
margin-bottom: 30px;
}
.splitter {
width: 500px;
height: 5px;
background-color:black;
margin: auto;
margin-bottom: 10px;
border-radius: 35px;
}
#text1{
background-color: #999999;
margin: auto;
margin-bottom: 30px;
width: 500px;
text-align: left;
border-radius: 5px;
}
.inside{
margin: 30px;
}
#text1 h3{
border-bottom: solid black 1px;
}
.border{
width: 200px;
margin-top: 20px;
margin: auto;
text-align: center;
}
#box2{
width: 500px;
height: 100px;
background-color: blue;
margin: 70px auto ;
position: relative;
}
.midbox{
width: 100px;
height: 50px;
background-color: red;
margin: 30px auto;
position: absolute;
}
and html
<html>
<head>
</head>
<body>
<div id="box">
<div id="header">
About Me
Hobbies
Pictures
Contact Me
</div>
<div id="container">
<img id="code" src="http://i380.photobucket.com/albums/oo250/willc86/IDreaminCode-Micro-TL-P-2_on_GR_BRAINS_GR_TC_on_LtGR_BACKGROUND_400x720in_for_Slideshow.jpg" border="0" alt=" photo IDreaminCode-Micro-TL-P-2_on_GR_BRAINS_GR_TC_on_LtGR_BACKGROUND_400x720in_for_Slideshow.jpg"/>
<div class="splitter"></div>
<div id="text1">
<div class="border">
<h3> Coding in clouds</h3>
</div /* border */>
<br>
<div class="inside">
<p> From coding, to Scripting. We all share
the same fate. We look, obsereve, figure out,
and analyze everything around us. We have an
eye to solve things, put things together, Fix
things, and show our pride when the work is done;
yet many of its roots gets unoticed.
<br> <br> To other souls,
we are just a body stuck in this world, but we, in fact
are the ones that assebles technology, make things whole,
and make everyone become one in this crazy thing
called the Web. We are Software developers. We code,
we fix, and we make it possible.
</div inside>
</div /*text1*/>
<div id="box2">
<div class="midbox">
hello
</div>
</div>
</div /* container */>
</div /* box */>
</body>
</html>
Something like this perhaps?
http://jsfiddle.net/tezf8/1/
You had two margin values on each box, so the "margin: auto;" was overriding the "margin: 30px;" in .testbox2
Here is the CSS:
#testbox{
border: 3px solid red;
width: 200px;
height: 200px;
margin: 50px auto 0;
}
.testbox2{
border: 3px solid blue;
width:100px;
height:100px;
margin: 48px auto;
}
Try This:
CSS
#testbox{
border: 3px solid red;
width: 200px;
height: 200px;
margin:0 auto;
margin-top:40px;
position:relative;
}
.testbox2{
border: 3px solid blue;
width:100px;
height:100px;
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
HTML
<div id="testbox">
<div class="testbox2">
</div>
</div>
Ok this is my problem:
The left float and right float are somehow not put into my container and the footer only pays attention to the middle content part. What am I doing wrong?
I could show it with a picture but I cannot add one because I don't have 10 rep.
It must be a simple fix, I have read about clear:both etc but that all does not work unfortunately.
#container
{
position: relative;
width: 58.5%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #336600;
text-align: left;
}
#header
{
height: 160px;
background-image:url(images/bannerboven.jpg);
}
#sideleft
{
position: absolute;
top: 160px;
left: 0;
float: left;
width: 22%;
background: #CCFFFF;
padding: 15px 10px 15px 20px;
}
#sideright
{
position: absolute;
top: 160px;
right: 0;
float:right;
width: 23%;
background: #CCFFFF;
font-size: 0.8em;
padding: 15px 10px 15px 20px;
}
#mainContent
{
margin: 0 26% 0 26%;
padding: 0 10px;
background: #0F0;
}
#footer
{
padding: 0 10px 0 20px;
background: #DDDDDD;
text-align: center;
font-weight: bold;
}
I'm not sure what you are trying to achieve without knowing your html structure, but the problem stems from the fact that you have absolute positioning on your left and right containers as well as a floted positioning.
The default positioning for a html element is static, so you either float everything or absolute position everything. Here's something to help you understand positioning better, it's very easy and you'll be on your way in 5 minutes: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Also, you should post a jsfiddle link with the html included so we'll understand better what you are trying to achieve if you need further help. My guess is that Rohit Azad's solution is correct, you just have trouble understanding positioning.
Hi i check to your code i think you want to this
HTML
<div id="container">
<div id="header">Header</div>
<div id="mainContent">
<div id="sideleft">Left</div>
<div id="sideright">Right</div>
</div>
<div id="footer">Footer</div>
</div>
Css
#container
{
width: 58.5%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #336600;
}
#header
{
height: 160px;
background:red;
background-image:url(images/bannerboven.jpg);
}
#sideleft
{
float:left; width: 22%;
background: #CCFFFF;
padding: 15px 10px 15px 20px;
}
#sideright
{
float:right;
width: 23%;
background: #CCFFFF;
font-size: 0.8em;
padding: 15px 10px 15px 20px;
}
#mainContent
{
padding: 20px 10px;
background: green;
overflow:hidden;
}
#footer
{
padding: 0 10px 0 20px;
background: #DDDDDD;
text-align: center;
font-weight: bold;
}
Live demo
I found this image while searching the web and I tried to implement this display on my own. This is what I have so far:
My HTML code is here:
<ul>
<li>
<span style="display:block;"><a href="">
<span><img src="../creation/images/samps/unnamed4.png" width="48" align="absmiddle"/></span>
<span class="price" >Freeep</span>
<span class="appname">Name of the apps that is so long</span>
<span class="developer">by scamexdotexe</span>
</a>
</span>
</li>
</ul>
This is my CSS style:
<style type="text/css">
li{
list-style: none;
width:200px;
border:1px solid #00CCFF;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 0px;
}
li:hover{
border:1px solid red;
}
li a{
margin: 0px;
display: block;
width: 100%;
height: 100%;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
text-decoration:none;
padding:2px;
}
li a span img{
padding: 5px;
}
.price{
position:absolute;
margin-top:4px;
margin-bottom:4px;
color:#0099FF;
font-size:12px;
}
.appname{
}
.developer{
font-size:12px;
color:#666666;
margin:0;
position:inherit;
display:inline;
white-space:nowrap;
}
</style>
I spent hours on cloning the display on the first image but it seems that I have no luck. Can you point what I am doing wrong here? What I really want to do is align the app name and the price horizontally and also align the app name, rating, total downloads vertically.
For starters, I'd change the border radius to 5px, and add a drop shadow:
li {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #333;
-webkit-box-shadow: 0px 0px 5px #333;
box-shadow: 0px 0px 5px #333;
}
Do you want to use the same colors as well?
Here's a start for you: http://jsfiddle.net/k8ejp/4/
Notes:
the "avatar" div could of course be an image
absolute positioning can be used instead of floating if you want a more complex layout (or find it easier to work with position)
my example uses a few newer features of CSS (like text-overflow) but they should degrade without changing the layout.
HTML
<div class="box">
<div class="avatar">foo</div>
<div class="price">Free!</div>
<div class="name">A long app name A long app name A long app name A long app name</div>
<div class="info">Other info about the app goes here.</div>
</div>
CSS
.box{
font: 11px/1.5 sans-serif;
padding: 8px;
background-color: #ccddcc;
width: 400px;
border-radius: 4px;
border: 1px solid silver;
box-shadow: 2px 2px 2px #ddd;
}
.avatar {
width: 32px;
height: 32px;
background-color: #555;
float: left;
margin-right: 12px;
}
.price {
float: right;
color: green;
}
.name {
width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
I have created an example here: http://jsfiddle.net/D26Hj/1/.
It just needs an app logo and star sprite image.
I have drawn up a star sprite image and quickly made a fake logo in Paint.NET.
Info about the sprite:
Each star is 9px wide.
There are 5 stars in a rating, so therefore each rating is 45px wide.
Therefore, to change the rating change the background-position as per below.
Here are the background-positions to use for different star ratings:
-0px 0 Stars
-45px 1 Star
-90px 2 Stars
-135px 3 Stars
-180px 4 Stars
-225px 5 Stars
I have added classes to make it easier, use rating-0 to rating-5 for 0 stars to 5 stars.
HTML:
<div class="app">
<div class="image"></div>
<div class="title">
App title
</div>
<div class="price">$0.00</div>
<div class="rating rating-3">3 stars</div>
<div class="info">1024 downloads</div>
</div>
CSS:
body {
padding: 20px;
}
.app {
position: relative;
width: 225px;
height: 50px;
padding: 5px;
background: #8f8;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
border: 1px solid #484;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 0 2px #484;
-moz-box-shadow: 0 0 3px #888;
-webkit-box-shadow: 0 0 3px #888;
}
.app a {
text-decoration: none
}
.app .image, .app .title, .app .price, .app .rating, .app .info {
position: absolute;
}
.app .image {
left: 5px;
top: 5px;
width: 48px;
height: 48px;
background-image: url('http://i.imgur.com/JAgto.png');
}
.app .title {
left: 60px;
top: 7px;
}
.app .price {
right: 5px;
top: 7px;
color: #262;
}
.app .rating {
left: 65px;
top: 25px;
width: 45px;
height: 10px;
text-indent: -999px;
background-image: url('http://i.imgur.com/giWyQ.png');
background-position: -135px 0;
}
.app .info {
left: 60px;
top: 40px;
font-size: 11px;
color: #666;
}
.rating-0 {
background-position: 0 0;
}
.rating-1 {
background-position: -45px 0;
}
.rating-2 {
background-position: -90px 0;
}
.rating-3 {
background-position: -135px 0;
}
.rating-4 {
background-position: -180px 0;
}
.rating-5 {
background-position: -225px 0;
}
I'm not so sure you should use span, personally I would use div instead since it's default display style is already block, which I see is what you try to achieve on the description block.
And about the Price and AppName, I would suggest that you wrap them inside a Div container on the same level with rating and downloads count and make that container display style inline-block then adjust the width for both Price and AppName.
It would be like this
<div class="main-container">
<div class="image"> Image Goes Here </div>
<div class="description">
<div class="description-top">
<div class"description-top-title"> Title Goes Here</div>
<div class"description-top-price"> Price Goes Here</div>
</div>
<div class="description-middle"> Rating Goes Here</div>
<div class="description-bottom"> Download Count Goes Here</div>
</div>
</div>
.main-container{
display: inline-block;
}
.image{
width: 30%;
}
.description{
display: block;
width: 70%;
}
.description-top{
display: inline-block;
}
.description-top-title{
width: 60%;
}
.description-top-price{
width: 40%;
}