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.
Related
So I'm trying to get divs to fit perfectly in a wrapper using fixed pixels for width and height. Although I'm confused as to how the pixels don't add up properly.
HTML
<div class="div1">
<img src="image.png" alt="image" class="image">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</div>
CSS
#wrapper {
height: 455px;
width: 690px;
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;
white-space:nowrap;
}
.div1 {
display: inline-block;
margin-bottom: 10px;
vertical-align:top;
}
.image {
max-width: 172px;
max-height: 172px;
border-radius: 2%;
border: 4px solid blue;
}
.div2 {
height: 172px;
width: 277px;
border: 4px solid blue;
display: inline-block;
margin-left: 30px;
background-color: purple;
}
.div3 {
width: 159px;
height: 188px;
display: inline-block;
margin-left: 30px;
border-left: 4px solid blue;
border-right: 2px solid blue;
border-top: 2px solid blue;
vertical-align: top;
background-color: purple;
}
.div4 {
background: url(image.png) no-repeat center;
background-size: cover;
width: 690px;
height: 265px;
}
If the parent div is 690px wide why can't the child divs add up to 690 with calculated widths, margin and boarders.
(div1)180 + 30 + (div2)285 + 30 + (div3)165 = 690px
If you look at div 3 it's right border can't be seen. You have to reduce the width by 7px to see it.
This is also happening vertically with a 190px div3 height meant to touch div4 exactly but is off by 4px.
Is this a browser issue? Default Alignment issues I'm not aware of? I'm really curious to know why this happens!
Any feedback would be appreciated. : )
If you put comments like this in your HTML you can fix the top but for the image in the 2nd line I dont know yet I continue trying
OK SO I did put the 1st line in a div "test" and gaved him display:block and overflow hidden to take away the the space under and then I did give the div1 fixed heigth and width 180px (image+border)
#wrapper {
height: 455px;
width: 690px;
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;
}
.test{
display:block;
overflow: hidden;
}
.div1 {
height:180px;
width:180px;
display: inline-block;
margin-bottom: 10px;
vertical-align:top;
}
.image {
max-width: 172px;
max-height: 172px;
border-radius: 2%;
border: 4px solid blue;
}
.div2 {
height: 172px;
width: 277px;
border: 4px solid blue;
display: inline-block;
margin-left: 30px;
background-color: purple;
}
.div3 {
width: 159px;
height: 188px;
display: inline-block;
margin-left: 30px;
border-left: 4px solid blue;
border-right: 2px solid blue;
border-top: 2px solid blue;
vertical-align: top;
background-color: purple;
}
.div4 {
background: url('http://lorempixel.com/690/265/cats') no-repeat center;
background-size: contain;
width: 690px;
height: 265px;
display:block;
overflow: hidden;
}
<div id="wrapper">
<div class="test">
<div class="div1">
<img src="http://lorempixel.com/172/172/cats" alt="image" class="image">
</div><!--
--><div class="div2">
</div><!--
--><div class="div3">
</div><!--
--> </div><div class="div4">
</div>
</div>
have you checked out box-sizing feature?
Here is some links that might be helpful.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I would like to split my div tag up in two. But I am not quite sure how to do it. It looks like this now:
And I would like that there is a header in the div tag with a color for a headline. It should look like this:
But how can I split up like that?
Best Regards Julie
HTML and CSS:
#container {
width: 100%;
}
body {
background-color:rgb(48,48,48);
}
.topbar {
width: 100%;
height: 50px;
background-color: red;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.latestnumbers {
float: left;
height: 600px;
width: 50px;
padding: 25px;
border: 2px solid #FFECB3;
margin: 20px;
background-color:rgba(116,116,116,0.3);
}
.hotnumbers {
float: left;
height: 600px;
width: 50px;
padding: 25px;
border: 2px solid #FFECB3;
margin: 20px;
background-color:rgba(116,116,116,0.3);
}
.coldnumbers {
float: left;
height: 600px;
width: 50px;
padding: 25px;
border: 2px solid #FFECB3;
margin: 20px;
background-color:rgba(116,116,116,0.3);
}
.numberheader {
height 100px;
background-color: red;
position: absolute;
top: 80px;
left: 30px;
right: 0;
width: 100px;
height: 50px;
}
.content {
float: left;
height:50px;
width:700px;
padding: 25px;
border: 2px solid navy;
margin: 20px;
background-color: red;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/my_script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css\placing.css">
<title>Numbers</title>
</head>
<body>
<div id="container">
<div class="topbar">
<p>Topbar</p>
</div>
<div class="latestnumbers" id="show">
<div class="numberheader">
<p>Tal</p>
</div>
</div>
<div class="content">
<p>Enter The Number</p>
<form id="myForm" action="select.php" method="post">
<input type="number" name="numbervalue">
<button id="sub">Save</button>
</form>
<span id="result"></span>
</div>
<div class="hotnumbers">
<p>test</p>
</div>
<div class="coldnumbers">
<p>test</p>
</div>
</div>
</body>
</html>
EDITED:
I have just tried to position the div tag now, and it is position in the middle now. But the code for the position is pretty messy, isn't it?
Try this, I think this was what you meant right?
https://jsfiddle.net/54d4tbtc/
It didn't look that good because of the width's
.content {
float: left;
height: 50px;
width: 300px;
padding: 25px;
border: 2px solid navy;
margin: 20px;
background-color: red;
}
I would make two divs, and wrap one inside the other like this:
<div class="topbar"></div>
<div class="outer">
<div class="inner">
<p>words</p>
</div>
</div>
when combined with this type of CSS:
.inner{
width:100%;
height: 150px;
background-color: #FFECB3;
word-wrap: break-word;
text-align: center;
}
.inner p{
padding-top: 10px;
}
it should work fine. Not sure what .talraekkeheader does in your CSS, but if it was planned for this .inner div then you may not need it after doing this.
NB. I added the word-wrap styling to .inner to avoid the overflow of text that you put in the div. I added padding to the paragraph text within the element for aesthetics mainly, as you don't want text to close to the top of the div.
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.
So I have a header and I'm not really sure how I should code the three element boxes that should be slightly below it, but still on the end of it, like the picture below:
One way, is perhaps position absolute and margin-top, or should I perhaps slice the images, so the top of the boxes is a picture with the header background...
.box {
position: absolute;
margin-top: -30px;
}
Or how should I do it?
Next time you should post some code of what you've tried. Against my better judgement, I made exactly what you drew.
http://jsfiddle.net/xD69h/
HTML:
<div id="a">
<span id="a-text">A</span>
<div id="b">
<span id="b-text">B</span>
</div>
<div id="c">
<span id="c-text">C</span>
</div>
</div>
CSS:
#a {
width: 100%;
height: 150px;
background-color: #EFE4B0;
border: 3px solid #FFABCA;
color: #B97A57;
}
#a-text {
float: left;
}
#b {
width: 200px;
height: 150px;
background-color: #7092BE;
border: 4px solid black;
border-radius: 5px;
color: #B97A57;
float: left;
margin-top: 50px;
margin-left: 50px;
}
#c {
width: 200px;
height: 150px;
background-color: #B97A57;
border: 4px solid #B97A57;
color: white;
float: left;
margin-top: 50px;
}
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>