I have this annoying little bit of spacing I can't remove.
Here's a fiddle.
It's the white padding(?) between the dog and grey box.
I should probably mention I'm in the process of learning about the box model (relative/absolute) etc.
use display: block; on your img http://jsfiddle.net/QzYcf/1/
#header img { width: 100%; display: block; border: none;}
Move the wrapper div to encase all the divs. Like this: fiddle
You what the header like this fiddle right
HTML:
<div id="wrapper">
<div id="outer">
<div id="inner"></div>
</div></div>
<div id="header">
<img src="http://davesizer.com/blogs/wp-content/uploads/2010/03/eva_jump.jpg" alt="Dog">
</div>
Change this #wrapper and #header to this:
#wrapper{
position: relative; /*or position: absolute; top: 250px;*/
top: 240px;
width:100%;
background-color: lightgrey;
}
#header{
position: fixed;
top: 0;
width: 100%;
height:auto;
background-size: 100%;
}
Related
is there any solution to make the first div with dynamic width?
Trick with overflow:hidden does not work, because i need it (div.first) in the first place:
<div id="wrapper"><div class="first></div><div class="second"></div><div>
What is the best solution that would work in older versions of IE?
Thank you for any help
you can use absolute positioning to do this
html:
<div class="wrapper">
<div class="one"></div>
<div class="two"></div>
</div>
css:
.wrapper {
width: 100%;
position: relative;
}
.one {
position: absolute;
left: 0;
right: 50px;
}
.two {
position: absolute;
right: 0;
width: 50px;
}
there are nicer ways when you don't have to support the old IEs :-)
What do you think about this solution?
body{margin:0px; padding:0px; border:0px;}
#right {
width: 150px;
height: 50px;
background-color: black;
float:right;
}
#right_absolute{
background-color: blue;
float:right;width: 150px;
height: 50px;
position:absolute;
top:0;
right:0;
bottom:0;
}
#left{
height: 50px;
background-color: red;
}
<div>
<div id="right"></div>
<div id="left"></div>
<div id="right_absolute"></div>
</div>
I need it for better SEO. I want div.left (content) as much as possible on top of the code. The right column is not so important for SEO...
I want to line up three DIV's in the center of my page, but I can't seem to figure it out. They line up vertically but they won't center themselves. Can anyone help?
HTML:
<div id="page">
<div id="head">
<h1>Final Project</h1>
</div>
<div id="container">
<div align="center" class="float-left" id="arrow-left">
<img src="arrowleft.jpg">
</div>
<div align="center" class="float-left" id="picture">
<img src="old.jpg">
</div>
<div align="center" class="float-left" id="text">
TEXT
</div>
<div align="center" class="float-left id="arrow-right">
<img src="arrowright.jpg">
</div>
</div>
<div>
CSS: (I'm going to add more to #page and such)
.float-left {
float:left;
border: 1px solid black;
}
#page{
display: inline;
width:1000px;
position: absolute;
height: 100%;
width: 100%;
}
#container{
display: inline;
width:900px;
vertical-align: middle;
top: 50%;
position: relative;
}
#arrow-left{
display: inline;
top: -50%;
position: relative;
}
#picture{
display: inline;
top: -50%;
position: relative;
}
#text{
display: inline;
top: -50%;
position: relative;
}
#arrow-right{
display: inline;
top: -50%;
position: relative;
}
Try setting their margins to margin: 0 auto; each. You'll need to specify their widths as well.
Try this CSS:
<style>
.float-left {
display:table-cell;
border: 1px solid black;
}
#page{
display: inline;
width:1000px;
position: absolute;
height: 100%;
width: 100%;
}
#container{
display: table;
width:900px;
vertical-align: middle;
position: relative;
margin:auto;
}
#arrow-left{
position: relative;
}
#picture{
position: relative;
}
#text{
position: relative;
}
#arrow-right{
position: relative;
}
</style>
Your arrow-right div isn't working because the quotation mark is in the wrong place.
Okay so first of all I can see you have a typo in your HTML as shown in the below snippet of your code:
<div align="center" class="float-left id="arrow-right">
<a href="">
<img src="arrowright.jpg"></a></div>
</div>
On the first line of this snippet it should be:
<div align="center" class="float-left" id="arrow-right">
In other words you forgot the " in your class signature.
Second, here is a jsfiddle with three divs floating to the left and are centered. Note when you have multiple markup elements that require to be set in a menu like fashion do not try to style these in this fashion with respect to the body but enclose them in a container and therefore style only this container. As shown in the jsfiddle I center one container w.r.t the body and not 3 divs, this gives cleaner code and avoids future conflicts.
http://jsfiddle.net/7pvwv5pn/
I can not change HTML that's given below, only CSS can be changed.
Also "mcontainer" has variable height.
HTML IS:
<div id="contentcontainer">
<div id="sidebar" class="sidebar"></div>
<div id="mcontainer" class="container"></div>
</div>
#contentcontainer {
position: absolute;
width: 100%;
}
#mcontainer { /*To make it appear on the top*/
clear: both;
height: auto;
margin-top: 0;
padding-right: 0;
position: fixed;
width: 100% !important;
}
#sidebar {
float: left;
position: relative;
width: 100% !important;
}
mcontainer completely overlaps sidebar
I want that sidebar should be displayed below mcontainer
How is it possible?
You have seriously learnt a lot of positioning I guess. It's a total mess.
Basically here's what you want:
HTML:
<div id="contentcontainer">
<div id="sidebar" class="sidebar">2</div>
<div id="mcontainer" class="container">3</div>
</div>
CSS:
#contentcontainer {
position: relative;
background:#ddd;
}
#mcontainer { /*To make it appear on the top*/
position: absolute;
top:0;
}
#sidebar {
position: absolute;
top:30px;
}
I need help positioning a logo horizontally center. It also needs to be centered vertically to the top of my links div. Can someone help me?
I'd like my logo to look like this:
Below is my HTML and CSS:
HTML - http://codebin.org/view/199faa14
<div id="container">
<div id="logo">
<img src="images/images/logo.gif" />
</div>
<div id="navigation">
navigation
</div>
<div id="header">
</div>
<div id="line">
</div>
<div id="content">
content
</div>
</div>
CSS - http://codebin.org/view/dda88d94
body {
background: url(../images/images/bg_page.gif) center center;
}
#container {
width: 940px;
margin: 0 auto;
}
#header {
height: 281px;
background: url(../images/home/header.gif) top center;
position: relative;
}
#logo {
position: absolute;
z-index: 2;
top: 0px
height: 214px;
margin: 10px auto 0 auto;
}
#navigation {
position: relative;
height: 40px;
background: #fff;
margin-top: 100px
}
#content {
height: 541px;
background: url(../images/home/bg_body.png) top center;
position: relative;
}
#line {
height: 4px;
background: url(../images/home/line.gif) top center;
position: relative;
}
try something like this before using javascript!
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
or this!
.image_container {
width: 300px;
height: 300px;
background: #eee;
text-align: center;
line-height: 300px;
}
.image_container img {
vertical-align: middle;
}
I think I understand your question. Since you are calling out your logo img in the html, try this.
<div id="logo">
<img src="images/images/logo.gif" alt="logo" align="center"/>
</div>
You could achieve this with:
display:inline-block;
line-height;
negative margin
text-align:justify (you have 5 items 4 links & 1 img in middle)
:after
Demo made in a similar context for someone else :
http://dabblet.com/gist/5375725
Some people will facing some problems while using the vertical-align: middle; styling attribute. CSS needs to be written in the prober way. For people looking for a quick fix.
.logo { left:0; top:0; height:100%; width:100px; }
<div class="logo" style="background:url('/assets/images/site-logo.png') center center no-repeat;">
<img src="/site/logo.png" style="display:none;" />
</div>
*make sure the container has the position:relative; css attribute.
It's easy handeling retina and compatible with all kind of CSS markups. hope this simple technique can save some time for people :)
Just a quick question:
I have this html:
<div class="container">
<div id="header">
<div id="navbar">
</div>
</div>
</div>
and CSS:
.container {
position: relative;
text-align: left;
width: 100%;
background-color: yellow;
}
#header {
position: relative;
background-color: red;
height: 120px;
width: 960px;
margin: auto;
}
My header (red container is stretched from left to right 100%) but I want it to be in a middle width given width; Help me please =)
try the css in
#header{ margin:0 auto;}
jsFiddle
You probably want to do
#header {
margin-left:auto;
margin-right:auto;
}
That'll center the div horizontally.
You can either do
#header{margin:0 auto;}
Or
#header{position: absolute; left:50%; margin-left: -480px;}