content to sit in the middle of div - html

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;
....
}

Related

CSS: display:table; and width:100%; not working with images within cell on Firefox

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

html and css bottom margin doesn't work [duplicate]

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;
}

Header Div Disappears in Large Resolution - Media Query

I am trying to put in a different image for each resolution. It worked for normal screen and smartphones, however I cannot get it to show up for the large resolution screens. Here are the relevant sections of code:
CSS:
/* Large screens ----------- */
#media only screen
and (min-width : 1800px) {
html {
background: #000000 url(images/blackmagic.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background-color:transparent;
font-size: 100%;
color:#000000;
}
h1 {
color:#000000;
text-transform:uppercase;
font-family: 'Sancreek', Impact, sans-serif;
font-size:2.5em;
}
h2 {
font-family: 'Pathway Gothic One', Verdana, sans-serif;
font-size:1.875em;
color:#000000;
}
a:link {
color:#000000;
}
a:hover {
color:#9b0505;
}
p {
color:#000000;
font-family: 'Monda', Verdana, sans-serif;
font-size:0.875em;
text-align:justify;
}
#container {
position:relative;
width: 2200px;
margin: 0 auto;
z-index: 0;
}
#social {
position:relative;
margin-left: 450px;
z-index: 0;
}
#header {
display:none;
position:relative;
}
#headerm {
display:none;
position:relative;
}
#headerl {
position:relative;
z-index:1;
margin-top:-500px;
margin-left:200px;
width: 100%;
}
HTML:
<div id="container" class="outer">
<div id="border" class="outer">
<div id="header" class="inner">
<img src="/images/header.png" id="headerimage" />
</div>
<div id="headerl" class="inner">
<img src="/images/headerlg.png" id="headerimage" />
</div>
<div id="headerm" class="inner">
<img src="/images/headerm.jpg" id="headerimage" />
</div>
There is no HTML ? Also posting a quick fiddle would make this so much easier to debug!
I actually just figured it out!
Because I was hiding the DIV for regular Desktop/Laptop Resolution and not defining the max-width for that value in its Media Query, it was also hiding it in the Large Resolution Media Query.
Simple fix of defining a max-width value for Standard Res.
Thanks! :)

How to set page content to center of the browser?

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>

Variable height for multiple columns of div

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.