How do I give margin to an box respective to a floated box? Here's my source code:
<!DOCTYPE html>
<html>
<head>
<title>Boxes</title>
<link rel="stylesheet" type="text/css" href="intro.css">
</head>
<body>
<div id="page">
<div id="header">
<h3 class="welcome">Welcome</h3>
<h5 class="welcome">to</h5>
<h1 class="welcome" style="color:green;font-family:cursive">Tamim's</h1>
<h5 class="welcome">page</h5>
</div>
</div>
<div class="navigation">
<ul>
<li>home</li>
<li>photos</li>
<li>important-links</li>
<li>facebook</li>
</ul>
</div>
<div id="left">
<img src="408528_10200574301423959_1609852992_n.jpg">
</div>
<div id="right"></div>
<div id="test"></div>
</div>
</body>
</html>
and
#page{
min-width:360px;
margin: 10px auto 10px auto;
background-color: rgb(32,127,224);
padding: 20px;
border: 2px solid black;
box-shadow: inset 0px 0px 10px #777777;
border-radius: 5px;
}
#header{
width: 360px;
margin: 0px auto 0px auto;
text-align: center;
}
.welcome{
margin: auto;
text-align: center;
display: inline;
}
#left{
width: auto;
margin-top: 10px;
float: left;
border: 2px inset red;
padding: 10px;
border-radius: 5px;
background-color: rgb(157,160,146);
height: 425px;
}
#right{
float: right;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
border: 2px solid green;
border-radius: 5px;
height: 425px;
width: 67%;
background-color: rgb(121,241,240);
}
.navigation{
padding: 1px 3px 3px 3px;
margin: 20px auto 20px auto;
width: 500px;
height: 40px;
background-color: red;
border-radius: 5px;
text-align: center;
}
.navigation li{
margin: 3px 6px 3px 6px;
display: inline;
border: 2px solid black;
padding: 2px;
zoom:1;
width:auto;
}
#test{
margin: 5px 5px 5px 5px;
height: 100px;
background-color: black;
clear: both;
border-radius: 5px;
}
Here's the code on Fiddle
Now when I give top a margin, it is not getting below the left or right? How do I give margin with respect to left? and also why my #lefts height is greater than right? But I have given them the same height 425px.?
Now when I give top a margin, it is not getting below the left or right?
Because you clear:both in the test - footer div. You have to set margin-bottom to the left and right see demo.
DEMO: http://jsfiddle.net/goodfriend/69QKz/14/
Why my #lefts height is greater than right?
It looks like it was caused by the padding in the left box.
DEMO with padding in left: http://jsfiddle.net/goodfriend/69QKz/6/
DEMO without padding in left: http://jsfiddle.net/goodfriend/69QKz/5/
Note: I also deleted one </div> end tag because it was closing the page div after the header..
Related
When my window is full, the text and image are in the right place, but whenever I change the size of my window, the image and the text overlap.
Here is an example of what it looks like:
What it looks like full-screened (what I want)
What it looks like minimized (what I don't want)
Here is what my code is for this:
.about-me {
margin-top: 20px;
border-top: 2px solid;
border-bottom: 2px solid;
padding-left: 20px;
width: 100%;
background-color: #E9E5F5;
font-family: 'Trebuchet MS', sans-serif;
padding-bottom: 500px;
padding-top: 20px;
box-shadow: 10px 5px 20px rgb(0 0 0 / 50%);
}
.abtme {
padding-top: -10px;
}
#abtme-par {
margin-top: 40px;
border: 2px solid;
width: 830px;
padding-top: -100px;
text-align: left;
}
#aboutme-title {
border: 2px solid;
padding: 20px;
background-color: #F0B4FF;
width: 150px;
margin-bottom: 20px;
box-shadow: 5px 5px 20px rgb(0 0 0 / 40%);
}
#abbypic {
width: 440px;
float: right;
border: 2px solid;
margin-left: 100px;
margin-right: 35px;
}
<section class="about-me">
<div class="abtme">
<span class="abtme-pic">
<h2 id="aboutme-title">About Me</h2>
<img id ="abbypic" src="media/rainbowpic.jpg">
</span>
<p id="abtme-par">HEYYYYYYYYY mueghurhogeji rhurehugjguarejuaguhurhgirgjsugjruigj irgjuerhurHGIRUHGUIRGHUIREHGIRJGORJHIORRE HGUgrurhgiuREJGIJrehrijgREIGUEWHGIUHGIuhguirghiURHGIRwhgiruhguoewphgoHGOPURHGURHGPOWG IHGurhgireuhguiRHGIUrhguhrguhruhwgrihguhiuerhrauhgiotjhioj
</p>
</div>
</section>
If you want to keep the text on the right and the image on the left when resizing. Try to add position: absolute to the abtme-pic and abtme, then set their widths to 50% and height to 100%. And add display: flex and justify-content: center to the abtme div
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>
What I already have:
.modal-m1
{
background-image: url(../images/bg-greyout.png);
background-repeat: repeat;
display: table;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
margin: 0;
padding: 0;
z-index: 1;
}
.modal-m1 .modal-m2
{
display: table-cell;
vertical-align: middle;
}
.dialogbox
{
margin: 0 auto;
background-color: #F6F6F6;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: #666 3px 3px 5px;
-moz-box-shadow: #666 3px 3px 5px;
box-shadow: #666 3px 3px 20px;
padding: 20px;
}
.mydialogbox
{
width: 400px;
}
<div class="modal-m1">
<div class="modal-m2">
<div class="dialogbox mydialogbox">
... CONTENT IS HERE ......
</div>
</div>
</div>
Everything is okay on that stage. You may test it on snippet.
Now I want to put several dialog boxes to different pages. I'm trying to reuse the code and for that reason I'm trying to extract modal-m1, modal-m2 and dialogbox to ASP.NET user control. mydialogbox must become a nested div inside of dialogbox. But dialogbox ignores width: 400px in this case. Is there any workaround?
In other words, I want my markup to be:
<div class="modal-m1">
<div class="modal-m2">
<div class="dialogbox">
<div class="mydialogbox">
... CONTENT IS HERE ......
</div>
</div>
</div>
</div>
Is it possible?
if I undestood..
your html can be like this:
<div class="modal-m1">
<div class="modal-m2">
<div class="dialogbox ">
<div class="mydialogbox">
<div>CONTENT IS HERE ......</div>
</div>
</div>
</div>
</div>
and you want put width only for .mydialogbox
.modal-m1 .modal-m2
{
display: table-cell;
vertical-align: middle;
text-align:center; /*add*/
}
.dialogbox
{
margin: 0 auto;
background-color: #F6F6F6;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: #666 3px 3px 5px;
-moz-box-shadow: #666 3px 3px 5px;
box-shadow: #666 3px 3px 20px;
padding: 20px;
display:inline-block; /*change*/
}
.mydialogbox
{
width: 400px;
text-align:left
}
is this?
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.
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>