This question already has answers here:
Margin-Top not working for span element?
(6 answers)
Closed 8 years ago.
I can't realize why bottom margin doesn't apply to the menu bar. I tried all types of paddings, margins and everything. I have no clue what to add or change so it can apply to it. I was trying to put position relative to #header and absolute to .menu and then all broke. I dont know what I did wrong?
JsFiddle Link
My HTML:
<body>
<div id="wrapper">
<div id="header">
<div id="header_left"></div>
<div id="header_right">
<div class="menu">Naslovna</div>
<div class="menu">PVC stolarija</div>
<div class="menu">ALU stolarija</div>
<div class="menu">Ostali proizvodi</div>
<div class="menu">Reference</div>
<div class="menu">Kontakt</div>
</div>
</div>
<div id="header_line"></div>
<div id="content">
<p> </p>
<p> </p>
</div>
<div id="footer_line"></div>
<div id="footer"></div>
</div>
</body>
</html>
My CSS:
#charset "utf-8";
/* CSS Document */
body{
background:#FFF;
margin:0;
padding:0;
}
#wrapper{
backgorund:#FFF;
width:100%;
height:100%;
}
#header{
background-image:url(struktura/header_bckg.png);
background-repeat:repeat-x;
height:140px;
width:100%;
}
#header_left{
width:40%;
height:100%;
display:inline;
}
#header_left img{
margin: 10px 0 0 20px;
}
#header_right{
width:55%;
display:inline;
}
.menu{
width: 100%;
display: inline;
font-family: "Myriad Pro";
font-size: 20px;
color: #333333;
margin: 0 0 0 40px;
bottom:20px;
}
#header_line{
background-image:url(struktura/header_line.png);
background-repeat:repeat-x;
height:5px;
width:100%;
}
#content{
background: #FFF;
width: 100%;
height: 600px;
}
#footer_line{
background-image:url(struktura/footer_line.png);
background-repeat:repeat-x;
height:5px;
width:100%;
}
#footer{
background-image:url(struktura/footer_bck.png);
background-repeat:repeat-x;
height:250px;
width:100%;
}
Top and bottom padding/margin has no effect on inline elements.
Here is a good article that explain this.
So, the solution for you might looks like:
.menu{
display: inline-block;
font-family: "Myriad Pro";
font-size: 20px;
color: #333333;
margin: 40px;
bottom: 20px;
}
Related
This is the jsfiddle link to my HTML page, and its clear that there is space between the header and content divs and in between content and footer divs. What is causing this, how to remove this. What changes should I do in my CSS?
If I do margin-top:-50px in the content div then it touches the bottom of the header div? But this seems more of a hack and this does n't works with the footer? Moreover I don't like this approach.
CSS
html{
font-size:100%;
margin:0;
padding:0;
min-height: 100%;
position: relative;
}
body{
margin:0;
padding:0;
}
#header{
background-color:#007FFF;
width : 100%;
height:130px;
}
#content{
background-color:#B0E2FF;
margin-bottom:0px;
margin-top:0px;
}
#footer{
background-color:#B0E2FF;
position: absolute;
left:0;
bottom: 0;
height: 90px;
width: 100%;
overflow:hidden;
}
h1 {
font: bold italic 3em/1em "Times New Roman", "MS Serif", "New York", serif;
padding: 0.5em 0 0 0;
text-align: center;
margin: 0;
color: #e7ce00;
}
h2 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
padding: 0.5em 0 0 0;
text-align: center;
margin: 0;
color: #e7ce00;
}
#wrapper{
width:60%;
margin:0 auto;
background-color: red;
}
.scrollabletextbox{
width:900px;
height:120px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border:3px solid #00008B;
background-color:#E6E8FA;
}
#querytextarea{
float: left;
}
button{
float: right;
}
form:{
width:90%;
margin:0 auto;
}
HTML
<body>
<div id="header">
<h2>Console</h2>
<h1>Query</h1>
</div>
<div id="content">
<div id="wrapper">
<form>
<h3 style="margin-bottom:1px;margin-top:50px; color:##22316C">Mongo Query</h3>
<textarea id = "querytextarea" class="scrollabletextbox" name="MongoQuery" rows="20" cols="30"></textarea><br>
<button type="submit" form="form1" value="Submit">Submit</button>
<br>
<h3 style="margin-bottom:1px;margin-top:10px; color:##22316C">Result</h3>
<textarea class="scrollabletextbox" name="Result" rows="20" cols="30"></textarea>
</form>
</div>
</div>
<div id="footer">
</div>
</body>
You could exchange the margin-topof the h3 inside the #content with padding-top
#content {
h3 {
margin: 0;
padding-top: 50px;
}
}
Consider using classes for styling instead of an id.
I think your problem is that you have set a margin-top (on HTML file) on your h3 element.
Juste change it like this :
<h3 style="margin-bottom:1px;margin-top:50px; color:##22316C">Mongo Query</h3>
But this should be better, on HTML :
<h3 id="myFirstH3">Mongo Query</h3>
And on CSS add this:
#myFirstH3{
margin-bottom:1px;
margin-top:0px; /*set to 0 because h3 have a margin top by default*/
color:#22316C;
}
It's better to place css on CSS file.
Hope it helps.
EDIT
Response too late ;)
Give a padding of atleast 1px
#content{
padding: 1px;
}
Here is the updated Demo
html{
font-size:100%;
margin:0;
padding:0;
min-height: 100%;
position: relative;
}
body{
margin:0;
padding:0;
}
#header{
background-color:#007FFF;
width : 100%;
height:130px;
}
#content{
background-color:#B0E2FF;
margin-bottom:0px;
margin-top:0px;
}
#footer{
background-color:green;
position: fixed;
left:0;
bottom: 0;
height: 90px;
width: 100%;
overflow:hidden;
}
h1 {
font: bold italic 3em/1em "Times New Roman", "MS Serif", "New York", serif;
padding: 0.5em 0 0 0;
text-align: center;
margin: 0;
color: #e7ce00;
}
h2 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
padding: 0.5em 0 0 0;
text-align: center;
margin: 0;
color: #e7ce00;
}
#wrapper{
width:60%;
margin:0 auto;
background-color: red;
}
.scrollabletextbox{
width:900px;
height:120px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border:3px solid #00008B;
background-color:#E6E8FA;
}
#querytextarea{
float: left;
}
button{
float: right;
}
form:{
width:90%;
margin:0 auto;
}
#content{
padding: 1em;
padding-bottom: 100px; // since footer is having 90px height
}
<body>
<div id="header">
<h2>Console</h2>
<h1>Query</h1>
</div>
<div id="content">
<div id="wrapper">
<form>
<h3 style="margin-bottom:1px;margin-top:50px; color:##22316C">Mongo Query</h3>
<textarea id = "querytextarea" class="scrollabletextbox" name="MongoQuery" rows="20" cols="30"></textarea><br>
<button type="submit" form="form1" value="Submit">Submit</button>
<br>
<h3 style="margin-bottom:1px;margin-top:10px; color:##22316C">Result</h3>
<textarea class="scrollabletextbox" name="Result" rows="20" cols="30"></textarea>
</form>
</div>
</div>
<div id="footer">
</div>
</body>
EDIT
To arrange footer
#content{
padding: 1em;
padding-bottom: 100px; // since footer is having 90px height
}
Here is the updated Demo
Remove top margin from h3
<h3 style="margin-bottom:1px;margin-top:0px; color:#22316C">Mongo Query</h3>
AND
If you also wants to footer comes after content then remove bottom:0 from below css.
#footer{
background-color:#B0E2FF;
position: absolute;
left:0;
bottom: 0;
height: 90px;
width: 100%;
overflow:hidden;
}
I have a design that requires a responsive width, and I have some images that line up next to each other than need vertical alignment so I did the whole display:table;, display:table-cell; thing.
Unfortunately in Firefox, the images don't scale when the browser is scaled.
Fiddle:
http://jsfiddle.net/35Js5/
HTML:
<main>
<article class="companylist relative SectionStyle1">
<section class="col col4">
<img src="http://upload.wikimedia.org/wikipedia/en/9/99/MarioSMBW.png" alt="Mario" />
</section>
<section class="col col4">
<img src="http://upload.wikimedia.org/wikipedia/en/f/f1/LuigiNSMBW.png" alt="Luigi" />
</section>
<section class="col col4">
<img src="http://upload.wikimedia.org/wikipedia/en/f/f5/Toad_3D_Land.jpg" alt="Toad" />
</section>
<section class="col col4">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/d/d5/Peach_%28Super_Mario_3D_World%29.png/200px-Peach_%28Super_Mario_3D_World%29.png" alt="Peach" />
</section>
</article>
</main>
CSS:
#import url(http://fonts.googleapis.com/css?family=Fjord+One|Imprima|Reenie+Beanie);
body {
background: #fff;
font-size: 62.5%;
font-family:"Imprima", "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
padding: 0px;
color: #000;
width:100%;
text-align:center;
margin:0;
}
p, ul, ol {
margin: 1em 0;
line-height: 1.2em;
font-size:1.2em
}
li {
list-style-position:inside;
}
.col {
box-sizing:border-box;
display:inline-block;
float:left;
padding:10px 10px;
}
.col1 {
width:100%;
}
.col2 {
width:50%;
}
.col4 {
width:25%;
}
.col8 {
width:12.5%;
}
header, footer, main > article {
padding: 10px 10%;
width:80%;
float:left;
clear:left;
}
.SectionStyle1 {
background-color:WhiteSmoke;
color:Black;
}
.companylist {
display:table;
}
.companylist .col {
display:table-cell;
height:200px;
vertical-align:middle;
float:none;
}
.companylist .col img {
max-height:100%;
max-width:100%;
}
If you pull the fiddle up in Chrome, you can see the behaviour I want and expect in Firefox too.
If I put the float:left; on, the cells do shrink, but the vertical alignment is lost :(
I also tried adding a display:table-row; element to no avail.
Any help appreciated, thanks in advance.
Does adding table-layout:fixed to .company-list get what you want? See http://jsfiddle.net/35Js5/5/
Try Addidng moz specific styling using :
#-moz-document url-prefix() {
// Your styling
}
Here is the fix for your code
Fiddle:
http://jsfiddle.net/35Js5/6/
Only addition to your CSS is:
#-moz-document url-prefix() {
.col.col4 img {
max-height:100%;
max-width:100%;
}
.companylist .col {
width:12.5%;
float:left !important;
vertical-align:middle;
display:inline;
}
}
Hope this helps
I am using Bootstrap 3 for my website and have created divs for each section to be 100% no matter how you manipulate the browser window etc. I wish to have my content sat in the middle of that at all given times heights and widths.
I am really struggling to get it right.
Here is my code:
<div id='imgDiv'>
<div class="container" style="padding-top: 300px;">
Smoothscroll
<center>
<h1 style="font-size: 32px; font-weight: 300;">Header</h1></center>
<center>
<h2 style="font-size: 20px;font-weight: 300; padding-top: 30px;">My name</h2>
</center>
</div>
</div>
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
position:relative;
font-family: 'Ubuntu', sans-serif;
}
#imgDiv {
position:relative;
height:100%;
background-color: #1ABC9C;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
color: #FFF;
}
If I understand what you want...
Demo Fiddle
HTML
<div id='imgDiv'>
<div> Smoothscroll
<h1>Header</h1>
<h2>My name</h2>
</div>
</div>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
position:relative;
font-family:'Ubuntu', sans-serif;
}
#imgDiv {
position:relative;
height:100%;
width:100%;
background-color: #1ABC9C;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
color: #FFF;
display:table;
text-align:center;
}
#imgDiv > div:first-child {
display:table-cell;
vertical-align:middle;
width:100%;
}
you should also remove the center element and move your styles into your stylesheet instead of being inline.
You need to set margin auto for left and right side
#imgDiv {
margin: 0 auto;
width:100px;
....
}
I need is to show the content of a web page in the center of the browser, no matter what screen size it is, big or small, resolution high or low, it always gets automatically adjusted to the center of the browser.
Thanks in advance
My Html and css code is below
HTML code
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="basic1.css"/>
</head>
<body>
<div id="menu">
<img class="imgc" src="img.png" alt="icon"/>
<img class="imgd" src="do.png" alt="do"/>
</div>
<div id="smenu"></div>
<div id="mainbox">
<div class="ibox"></div>
</div>
<div id="menutext">
<ul>
<li><b>???????</b></li>
<li><b>?????</b></li>
<li><b>?????</b></li>
</ul>
</div>
<div id="py">
<pre class="p">??<span style="color:black;font-size:25px">??????</span></pre>
<pre class="s">?? ???? ??? ??? <span style="color:#980000;
letter-spacing :+1mm"><b>:3</b></span></pre>
</div>
</body>
</html>
CSS
#menu img.imgc {
position:absolute;
right:77%;
top:10px;
margin:0px auto;
}
#menu img.imgd {
position:absolute;
left:75%;
top:10px;
margin:0px auto;
}
#menu {
position:absolute;
left:0%;
top:0%;
right:0%;
right:0%;
width:100%;
height:125px;
border-bottom:1px solid #C8C8C8;
margin:0px auto;
background-color:#E8E8E8;
}
#mainbox div.ibox{
position:absolute;
left:31%;
top:20px;
border-left:3px solid gray;
height:105px;
margin:0px auto;
}
#menutext ul{
position:absolute;
right:72%;
top:15px;
list-style: none;
line-height:30px;
margin:0px auto;
}
#menutext a{
font-size:12px;
font-variant:small-caps;
font-family:Lucida,Helvetica,sans-serif;
font-weight:500;
color:black;
text-decoration: none;
text-align: left;
}
#py pre.p{
position:absolute;
top:15px;
left:33%;
font-family:Tahoma, Geneva, sans-serif;
letter-spacing : +2mm;
font-size:50px;
color:#009933;
text-decoration: none;
text-align: center;
margin:0px auto;
}
#py pre.s{
position:absolute;
top:67px;
left:33%;
font-family:Tahoma, Geneva, sans-serif;
letter-spacing : +3mm;
font-size:12px;
color:gray;
text-decoration: none;
text-align: center;
margin:0px auto;
}
Put all the content inside a div, set its class to container:
<div class="container">
...
</div>
Then using css set its margins to auto:
.container{
margin:0px auto;
width: 600px;
}
have a look at this jsfiddle
EDIT
check this new fiddle , the menu css doesn't neet all of what you wrote, should be something like:
#menu {
height:125px;
border-bottom:1px solid #C8C8C8;
margin:0px auto;
background-color:#E8E8E8;
}
Put all your page content inside a wrapper div, then give it some relative width (e.g. 50%) and auto horizontal margins.
<div id="wrapper">
<!-- CONTENT GOES HERE -->
</div>
CSS (50% page width, zero top/bottom margin):
#wrapper {
width: 50%;
margin: 0 auto;
}
Put another div around all of your content (so from right after your body start tag and just before body end tag). Call it <div class="container">
Set the following style to that div:
width: 1000px;
margin: auto;
This should center your content.
You can change the width as needed.
You could use fundation3's grid: http://foundation.zurb.com/docs/grid.php
Working solution.
<html>
<head>
<style type="text/css">
html
{
width: 100%;
height: 100%;
}
body
{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
This is text!
</body>
</html>
I want to put 3 div like columns. The one on the left and the one the right have a content and variable length. The one in the middle is a divider.
My CSS is:
html
{
background:url(../img/texture.png) 50% 0 repeat #fff;
}
body
{
font:13px/20px "Trebuchet MS", Helvetica, sans-serif;
position:relative;
min-width:960px;
}
html, body
{
height:100%;
}
.main
{
background-color:#f8f8f8;
padding:2px;
border:1.5px solid #000000;
border-radius:1em;
-webkit-border-radius:1em;
-moz-border-radius:1em;
-o-border-radius:1em;
margin:auto;
width:950px;
box-shadow:0 0 20px #585858;
word-wrap:break-word;
}
section#content
{
padding:10px 0px;
overflow:hidden;
}
section#content #text
{
margin:10px 20px 0px;
text-align:center;
}
#text #login
{
width:40%;
margin-left:5%;
margin-right:5%;
float:left;
text-align:left;
}
#text #registration
{
width:40%;
margin-left:5%;
margin-right:5%;
float:right;
text-align:left;
}
#text #divider_ver
{
float:left;
height:100%;
width:1px;
background:#000000;
}
And my JSP:
<body>
<div class="main">
<section id="content">
<div id="testo">
<div id="text">
<div id="login">
...
</div>
<div id="divider_ver"></div>
<div id="registration">
...
</div>
</div>
</div>
<div class="clear"></div>
</section>
</div>
</body>
The problem is that the divider won't show up. If I set its height like: min-height:100px; it will, but will have fixed height (100px). I want it to have the height of the taller between the other 2 div, but I can't do it.
http://jsfiddle.net/2mjet/1/
Here:
CSS changes
section#content #text
{
margin:10px 20px 0px;
text-align:center;
overflow: hidden;
}
#text #divider_ver
{
float:left;
padding-bottom: 10000px;
margin-bottom: -10000px;
width:1px;
background:#000000;
}
Simple +padding -margin with overflow:hidden container, but it's nice trick to remember.