For the life of me I cannot get why this logo is not centering. Please help!
<div id="header" style="width:100%;" >
<img id="logo" src="images/logo384x80.png"/></div>
and the CSS
#header {
background-color:#222222;
height:50px;
margin-left:auto;
margin-right:auto;
}
You can try using text-align: center style on the div. I prefer using classes and use classes in CSS to add styles to elements. So I will do something like this, adding a class to div something like: "logo" and set following CSS:
.logo {
background-color:#222222;
height:50px;
margin:auto;
text-align: center;
}
or for your case:
#header {
background-color:#222222;
height:50px;
margin: auto
text-align: center;
}
It works if you give the width as a "value" rather than a percentage of a non existing object, i.e. there is nothing surrounding the so its width of 100% means nothing.
Change it to lets say, 20em, and you will see the difference:
<div id="header" >
<img id="logo" src="http://www.beyondsecurity.com/assets/img/beyond-security-logo.png"/></div>
#header {
background-color:#222222;
width: 20em;
height: 50px;
margin-left:auto;
margin-right:auto;
}
Related
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
This question have been asked a lot on the web. But each try don't suceed
For a Website I need to make a header, I'm using django + boilerplate (I think that's boilerplate should be the cause, as copy paste of my code in js fiddle works, while it doesn't on local).
Here is the HTML I use:
<div id="topbar">
<div id="networking">
<div id="title">
EasyMusik
</div>
<div id="logo">
<img src="{% static "img/icons/myzik.svg" %}" />
</div>
</div>
</div>
And here is the CSS:
#topbar{
display:block;
background-color : #29A329;
position: relative;
float: top;
}
#tobbar div{
height: 100%;
display:inline-block;
}
#networking{
padding-left:25%;
}
#networking div{
display:inline-block;
}
#title{
position: relative;
height:100%;
font-size: 24px;
}
#logo img{
width:100%;
display:block;
float:left;
}
#logo{
position: relative;
height: 100%;
padding-left:15px;
background-color : #FF0000;
}
And I got this result
I want the Red area to fullfill the green one. Wich property should i add/remove to achieve that?
EDIT: Finally managed to get a fiddle:
Fiddle here
This did the worked for me. Though its not your CSS.
CSS:
.parent
{
width:100%;
background-color:Green;
height:50px;
text-align:center;
font-size:24px;
}
.sub
{
width:50px;
background-color:Red;
height:50px;
display: inline-block;
}
.img
{
vertical-align:middle;
padding-top:15px;
}
HTML:
<div class="parent">
Easy Muzik
<div class="sub">
<img alt="" class="img" src="style/img.png" />
</div>
</div>
Give #topbar a height. If you want your child container to be 100% height or width, your parent container has to have a height or width specified. Good luck!
#topbar{
display:block;
background-color : #29A329;
position: relative;
float: top;
height: 200px
}
I would like to create a page on my website where there are 5 inline images which are automatically resized with the browser so they would be in the same position but just resized when viewed on any screen size.
Currently i have it working in such a way that there are 5 images all inline with each other and they do squeeze and keep their aspect ratio when i change the browsers size, but my question is how do i make this line of 5 images be central on the page at all times without them changing their position to go below eachother?
I have tried to add margin:0 auto; to both my container which is #images and to my img {} but neither seem to work,
Here is my current CSS;
#images {
margin-top:400px;
}
img {
width:18%;
padding-left:2px;
position:relative;
}
Here is HTML;
<div id="images">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
</div>
Thanks for any help
To help you understand more here is a JSfiddle showing what i currently have, all i would like is the row of images to be centered at all times, http://jsfiddle.net/c26NJ/
See this FIDDLE
#images {
margin-top:400px;
width:100%;
text-align:center;
}
img {
width:18%;
padding-left:2px;
position:relative;
box-sizing:border-box;
}
Set either width or height css property in % and set the other one as auto, for example
.imageGallery
{
width:20%;
height:auto;
display:inline; // or try float:left
}
This might work (assuming the #images is inside a full-width section):
#images {
max-width: 100%;
width: 400px;
margin: 400px auto;
}
img {
width:18%;
padding-left:2px;
}
HTML:
<div id="images">
<img src="images/imagepage/200x2001.jpg" class="first">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
</div>
and
CSS:
#images {
width: 100%;
}
#images img {
width: 19.6%;
float: left;
display: block;
margin-left: 0.5%;
}
#images img.first {
margin-left: 0;
}
Check this fiddle
In the above fiddle the images will remain in the same line no matter to how much extent the user resizes the window.
CSS
html,body{
width:100%;
height:100%;
margin:0px auto;
padding:0px;
text-align:center;
}
#images {
display:inline-block;
width:100%;
}
img {
width:18%;
padding-left:2px;
position:relative;
display:table-cell;
}
Hi to all,
I'm trying to make 3 divs equidistant from each other. The DIV width is determined by the IMG file in it.
I have succeeded in making a container div 80% width of the page and is centered.
However, the DIVs inside this are equidistant to each other (for as far I can see) but do not center themselves according to the div they are in.
HTML:
<div class="slide" id="slide5" data-slide="5" data-stellar-background-ratio="0">
<div class="slide5_wrapper">
<div class="slide5_recd2011">
<img src="images/RECD2011_thumbnail.png">
</div>
<div class="slide5_recd2012">
<img src="images/RECD2011_thumbnail.png">
</div>
<div class="slide5_recd2013">
<img src="images/RECD2011_thumbnail.png">
</div>
</div>
And the CSS:
.slide5_wrapper{
margin: 0 auto;
width:80%;
position: relative;
max-height:80%;
top:10%;
text-align:justify;
}
.slide5_recd2011, .slide5_recd2012, .slide5_recd2013 {
margin: 10px;
height:auto;
border-radius:15px;
vertical-align: top;
display:inline-block;
}
#slide5_wrapper:after {
content: '';
width:100%;
display:inline-block;
}
Excuse me for my horrible use of terminology (wrappers /containters w/e) just want this to work.
I'm not a real website coder, just trying to learn and I have this project I have taken on while not being too qualified for it (it's a temporary non-corporate website and not going to be my business so I'm not destroying the work field or anything).
Thanks in advance
Here is the link with explanation, here is the working sample.
#slide5_wrapper{
text-align: justify;
}
#slide5_wrapper:after{
content:'';
width:100%;
display:inline-block;
}
#slide5_wrapper div{
display: inline-block;
}
Hope it helps.
What's just about this:
.slide5_recd2012{
width: 33%;
float:left;
box-sizing: border-box;
padding: /*some padding you need */ 0;
}
?
I am trying to do a dynamic grid layout with links to other pages, consisting of a picture and a text.
The problem is that I don't seem to find any way of introducing a whitespace (padding/margin) after the grid layout. In other words, The page ends exactly where the main div ends.
Here is the code. Any help is greatly appreciated, as I have tried a lot of methods, and neither one of them worked. Thanks a lot.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="resources/index.css" />
</head>
<body>
<div class="header"></div>
<div class="body">
<!-- this is the standard link to each category, which will be inserted n times .. the problem is visible after inserting it a min of 12 times-->
<a href="" class="categorie">
<img src="imgs/asd.png" class="imagine"/>
<div class="nume"> </div>
</a>
</div>
</body>
</html>
CSS :
html
{
background-color:Grey;
height:auto;
}
body
{
display: table;
padding:20px;
margin: 0 auto;
height:100%;
}
.header
{
background-color:white;
width:700px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
height:75px;
}
.body, .body>html
{
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
position:absolute;
display:block;
height:auto;
}
.categorie
{
background-color:white;
margin-left:20px;
float:left;
margin-top:20px;
height:180px;
width:150px;
}
.imagine
{
width:150px;
height:150px;
}
.nume
{
background-color:green;
width:150px;
height:30px;
margin-top:-5px;
}
I'm not sure exactly why there was a display: table on the body element, you said:
"Because I use position:absolute in the .body class.. otherwise, the .body will not extend to encapsulate all of the links."
So I was able to remedy both problems by removing both the display: table from the body element and position: absolute from the body class, then added overflow: auto to the body class.
The CSS:
body{
padding:20px;
margin: 0 auto;
height:100%;
}
.body, .body>html {
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
display:block;
height:auto;
overflow: auto;
}
The JSFiddle:
http://jsfiddle.net/Artsen/VhSdg/
Here is a working fix, in case for some reason, you'd want to keep the body table display.
http://jsbin.com/agucar/2/edit
First change
.body, .body>html
{
position:absolute;
}
to
.body /* removing .body>html didn't change a thing, meaning it was useless */
{
float: left;
}
That way you will be able to clear the floats with a clearfix div (as if correctly relatively positioned) and if you keep your clearfix div transparent, the height you give it will serve as "margin".
Add <div id="clearfix"></div> after <div class="body"></div>, and give the clearfix this CSS:
#clearfix {
height: 20px;
width: 100%;
position: relative;
clear: both;
}
EDIT: Artsen's answer works too, and if you don't need to keep the .body {display: table}, his answer is more suited.