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>
Related
I would like div#alpha1 and div#alpha2 inside the div#alpha placed side by side.
CODE
#alpha {
position: relative;
padding-top: 4px;
margin-top: 8px;
margin-left: 2%;
margin-right: 2%;
width: 96%;
height: 100px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
}
#alpha1 {
position: relative;
width: 94px;
height: 94px;
border: 1px solid black;
margin-left: 2%;
}
#alpha2 {
position: relative;
margin-top: 0px;
height: 40px;
border-top: 1px;
border-bottom: 1px solid black;
margin-left: 94px;
}
<DIV id="alpha">
<DIV id="alpha1">
<IMG src="img/jenny.jpg" width="94px" height="94px">
</DIV>
<DIV id="alpha2">
<H1 id="patientname">Jenny Thomas</H1>
</DIV>
</DIV>
you can use flexbox for that by using display:flex in parent and then flex:1 in #alpha2 to make it grow according to screen size
Don't use HTML width/height tags, instead use CSS for styling it.
Note I did a few tweaks to your code.
#alpha {
padding-top: 4px;
margin: 8px 2% 0;
width: 96%;
height: 100px;
border: solid black;
border-width: 1px 0;
display: flex
}
#alpha1 {
width: 94px;
height: 94px;
border: 1px solid black;
margin: 0 2%;
}
#alpha2 {
flex: 1
}
#alpha2 h1 {
border-bottom: 1px solid black;
height: 40px
}
<div id="alpha">
<div id="alpha1">
<img src="//lorempixel.com/94/94" />
</div>
<div id="alpha2">
<h1 id="patientname">Jenny Thomas</h1>
</div>
</div>
The easiest/fastest solution is to assign display: flex to the container #alpha
http://codepen.io/anon/pen/mPgaJP
(I also erased some unneccesary settings in there)
You just needed to set the float property of your div. Here you are :-
#alpha{
position:relative;
padding-top:4px;
margin-top:8px;
margin-left:2%;
margin-right:2%;
width:96%;
height:100px;
border-top:1px solid black;
border-bottom:1px solid black;
float: none;
}
#alpha1{
position:relative;
width:94px;
height:94px;
border:1px solid black;
margin-left:2%;
margin-right: 0px;
float: left;
}
#alpha2{
position:relative;
margin-top:0px;
height:40px;
border-top:1px;
border-bottom:1px solid black;
margin-left:9%;
float: next;
}
<DIV id="alpha">
<DIV id="alpha1">
<IMG src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTvU-f_zys67Kv6hdqJcmSN5n_dfe2igiq9lLZYpcXAyVXEBNQ6" width="94" height="94" alt="IMAGE">
</DIV>
<DIV id="alpha2">
<H1 id="patientname">Jenny Thomas</H1>
</DIV>
</DIV>
I edited your margin in alpha2 for correct display of bottom line. It is displayed correct in browser. Here it is not. You can check it here. Mark the problem solved if it helps.
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 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.
This is what I am working on http://www.pathfinderscc.com/index.htm
The divs on the colored boxes are validating strict but Im not sure the coding is as it should be. Nor the CSS.
Its confusing what to do here, so I am wondering if there is a more appropriate way to align these divs. Also, the images are set to background and I know how to make them contained in the divs themselves, but not the css.
I also want to have the text inside the boxes, be underneath the boxes.
I am going to have images of videos, but the videos themselves. I want the page to load fast and then link to the individual videos I will host. I need this page at least to validate strict.
So far it does, but something tome could be better about this coding.
Here is the code.
<div class="container">
<h2>Videos</h2>
<div class="red">Beginer
<div id="container2">
<div id="left1"><p>
Introduction</p>
</div>
<div id="center1">B</div>
<div id="right1">C</div>
</div>
</div>
<div class="blue">Intermediate
<div id="container3">
<div id="left2">A</div>
<div id="center2">B</div>
<div id="right2">C</div>
</div>
</div>
<div class="green">Advanced
<div id="container4">
<div id="left3">A</div>
<div id="center3">B</div>
<div id="right3">C</div>
</div>
</div>
</div>
And the CSS
}
.container {
position: relative;
margin: auto;
width: 500px;
height: 500px;
text-align: center;
}
.red {
background-color: #f00;
width: 500px;
height: 125px;
margin: 15px auto;
padding-top: 5px;
box-shadow: 10px 10px 5px #888888;
}
.blue {
background-color: yellow;
width: 500px;
height: 125px;
margin: 15px auto;
padding-top: 5px;
box-shadow: 10px 10px 5px #888888;
}
.green {
background-color: green;
width: 500px;
height: 125px;
margin: 15px auto;
padding-top: 5px;
box-shadow: 10px 10px 5px #888888;
}
#container2 {
width:350px;
text-align:center;
margin:0 auto;
padding: 8px;
}
#left1 {
float:left;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-3.jpg');
}
#center1 {
display: inline-block;
margin:0 auto;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-3.jpg');
}
#right1 {
float:right;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-3.jpg');
}
#container3 {
width:350px;
text-align:center;
margin:0 auto;
padding: 8px;
}
#left2 {
float:left;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-2.jpg');
}
#center2 {
display: inline-block;
margin:0 auto;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-2.jpg');
}
#right2 {
float:right;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-2.jpg');
}
#container4 {
width:350px;
text-align:center;
margin:0 auto;
padding: 8px;
}
#left3 {
float:left;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-1.jpg');
}
#center3 {
display: inline-block;
margin:0 auto;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-1.jpg');
}
#right3 {
float:right;
width:75px;
height: 75px;
background: #888;
background-image:url('images/temp-1.jpg');
}
At first glance, you should generally be using classes, not IDs. That way elements that share the same CSS (container2, container3, etc, for example) can use the same class and you do not have to duplicate the CSS between different IDs. Similarly, elements can have more than one class. For example, change class="red" to class="color red" and use this:
.color {
width: 500px;
height: 125px;
margin: 15px auto;
padding-top: 5px;
box-shadow: 10px 10px 5px #888888;
}
.red {
background-color: #f00;
}
.blue {
background-color: yellow;
}
.green {
background-color: green;
}
That way, .color can be applied to any element and your code becomes much more maintainable.
Just another tip. You can also use CSS Prettifiers to increase your performance. Check ProCSSor
I'd set up your CSS classes to be more reusable. There would be shared settings for these blocks in say a "image-block" class, and then the other settings for left/right/center in other classes.
I see a nice example of the CSS for such, so here's an example of how your HTML might change (using similar but differently named classes.)
<div class="container container-red">
<div class="image-block block-left">
<img src="...">
<p>A</p>
</div>
<div class="image-block block-center">
<img src="...">
<p>B</p>
</div>
<div class="image-block block-right">
<img src="...">
<p>C</p>
</div>
</div>