My site has a 100% width header & footer, and 3 columns. The columns need to all be fixed width, but in the center of the page.
HTML
<div id="Table_01">
<div id="Header"></div>
<span id="LeftCol">Left Col </span>
<span id="MidCol">Middle </span>
<span id="RightCol">Right Col </span>
<div id="Footer">Footer</div>
</div>
CSS
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:100%;
}
#Header {
position:absolute;
left:0px;
top:0px;
width:100%;
height:42px;
background-image: url("images/Header.gif");
}
#LeftCol {
position:absolute;
left:0px;
top:42px;
width:300px;
height:422px;
text-align:center;
border:2px solid;
}
#MidCol {
position:absolute;
left:300px;
top:42px;
width:550px;
height:422px;
text-align:center;
border:2px solid;
}
#RightCol {
position:absolute;
left:850px;
top:42px;
width:300px;
height:422px;
text-align:center;
border:2px solid;
}
#Footer {
position:absolute;
left:0px;
top:464px;
width:1000px;
height:1536px;
}
JSFIDDLE
What you need is a mix of position:relative and margin:0 auto applied to a container.
Add a container div:
.container {
width:1150px;
margin:0 auto;
position:relative;
}
See updated JSFIDDLE
Related
I have a Div with a 10% width and within its content there is an image I want to be able to center vertically/Horizontally and resize to fit in its container.
It resize well when the windows resize but do not know how can i center the image within the container.
<div class="proyecto_holder">
<div class="tipo_proyecto_image">
<img src="http://i57.tinypic.com/vgo9k5.png" border="0" />
</div>
<div class="proyecto_datos_holder">
<div class="proyecto_titulo">This id the title of the project</div>
<div class="proyecto_tipo">Type of Project</div>
</div>
.proyecto_holder {
width:100%;
float:left;
height:75px;
overflow:hidden;
background-color:#F2F2F2;
margin-top:1px;
}
.tipo_proyecto_image {
width:10%;
height:75px;
float:left;
}
.tipo_proyecto_image img {
width:80%;
}
.proyecto_datos_holder {
width:90%;
height:75px;
float:left;
}
.proyecto_titulo {
width:100%;
float:left;
font-family: Titillium Web;
font-size:18px;
font-weight:bold;
line-height:20px;
margin-top:10px;
color:#666666;
}
.proyecto_tipo {
float:left;
font-family: Titillium Web;
font-size:16px;
line-height:20px;
color:#11BB00;
padding: 10px 15px;
}
Here is the demo: https://jsfiddle.net/3t2shesb/
Thanks in advance.
If I understand what you want to do, try using transform and position:relative on the img to give you something like this:
.tipo_proyecto_image img {
width: 80%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
As shown here:
.proyecto_holder {
width:100%;
float:left;
height:75px;
overflow:hidden;
background-color:#F2F2F2;
margin-top:1px;
}
.tipo_proyecto_image {
width:10%;
height:75px;
float:left;
}
.tipo_proyecto_image img {
width: 80%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.proyecto_datos_holder {
width:90%;
height:75px;
float:left;
}
.proyecto_titulo {
width:100%;
float:left;
font-family: Titillium Web;
font-size:18px;
font-weight:bold;
line-height:20px;
margin-top:10px;
color:#666666;
}
.proyecto_tipo {
float:left;
font-family: Titillium Web;
font-size:16px;
line-height:20px;
color:#11BB00;
padding: 10px 15px;
}
<div class="proyecto_holder">
<div class="tipo_proyecto_image">
<img src="http://i57.tinypic.com/vgo9k5.png" border="0" />
</div>
<div class="proyecto_datos_holder">
<div class="proyecto_titulo">This id the title of the project</div>
<div class="proyecto_tipo">Type of Project</div>
</div>
The following works ...
HTML:
<div class='Container'>
<img src='test.png'>
</div>
CSS:
div.Container {
position:absolute;
top:25%;left:25%;
width:50%;height:50%;
background:#FF0;
}
div.Container > img {
display:block;
position:absolute;
left:10%; width:auto;
top:35%; height:30%;
}
Here I assign all 100% of the parents height in the img’s css-declaration (2*)35% + 30%, and use that for scaling ... Maybe not what you want, but it works ... try it out :)
I can't figure out how to set up the box model for my layout.
The "[container|x]" elements you see are placeholders, which are later replaced by php.
Here is a sketch of how it should look like:
I tried to google it and search here on stack overflow and of course I did find a lot about box models and problems with it, but nothing helped me here.
This is what I already have:
html:
<div class='headerimage'>
[container|1]
</div>
<div class='mainwrapper'>
<div class='femininHead'>
[container|2]
</div>
<div class='lineH1'> </div>
<div class='feminin'>
<div class='femininSub1'>
[container|3]
</div>
<div class='lineV1'> </div>
<div class='femininSub2'>
[container|4]
</div>
<div class='lineV2'> </div>
<div class='femininSub3'>
[container|5]
</div>
</div>
<div style='clear:both;'></div>
<div class='maskulinHead'>
[container|6]
</div>
<div class='lineH2'> </div>
<div='maskulin'>
<div class='maskulinSub1'>
[container|7]
</div>
<div class='lineV3'> </div>
<div class='shopButton'>
[container|8]
</div>
</div>
<div style='clear:both;'></div>
<div class='unisexHead'>
[container|9]
</div>
<div class='lineH3'> </div>
<div class='unisex'>
<div class='unisexSub1'>
[container|10]
</div>
<div class='lineV4'> </div>
<div class='unisexSub2'>
[container|11]
</div>
<div class='lineV5'> </div>
<div class='unisexSub3'>
[container|12]
</div>
</div>
</div>
css:
.headerimage {
position:absolute;
left:0px;right:0px;
background-color:#000000;
height:367px;
}
.mainwrapper{
position:relative;
top:367px;
}
.femininHead {
position:relative;
width:800px;
height:87px;
top:50px;
}
.femininHead .image1_headline{
line-height:30px;
font-size:24px;
position:relative;
}
.feminin {
position:relative;
}
.lineH1{
background-image:url(/img/tempdyn/streifenlinie_horizontal.png);
width:800px;
height:1px;
background-color:#000000;
position:relative;
bottom:2px;
}
.femininSub1 {
position:relative;
width:266px;
height:125px;
float:left;
}
.lineV1{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
height:128px;
width:1px;
background-color:#000000;
position:relative;
}
.femininSub2 {
position:relative;
width:266px;
height:125px;
float:left;
}
.lineV2{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
height:128px;
width:1px;
background-color:#000000;
position:relative;
}
.femininSub3{
width:266px;
height:125px;
position:relative;
float:left;
position:relative;
}
.maskulinHead {
position:relative;
width:800px;
height:87px;
top:127px;
}
.maskulinHead .image2_headline{
line-height:36px;
font-size:36px;
right:300px;
}
.lineH2{
background-image:url(/img/tempdyn/streifenlinie_horizontal.png);
width:800px;
height:1px;
background-color:#000000;
position:relative;
top:133px;
}
.maskulin {
position:relative;
}
.maskulinSub1 {
position:relative;
width:266px;
height:125px;
float:left;
position:relative;
}
.lineV3{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
position:relative;
height:128px;
width:1px;
}
.shopButton {
width:536px;
height:218px;
float:left;
position:relative;
}
.unisexHead{
width:259px;
height:125px;
position:relative;
line-height:36px;
font-size:36px;
}
.unisexHead .image3_headline{
line-height:36px;
font-size:36px;
}
.lineH3{
background-image:url(/img/tempdyn/streifenlinie_horizontal.png);
width:800px;
height:1px;
background-color:#000000;
position:relative;
top:594px;
}
.unisex {
position:relative;
}
.unisexSub1
position:relative;
width:266px;
height:125px;
float:left;
}
.lineV4{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
background-color:#000000;
position:relative;
height:128px;
width:1px;
}
.unisexSub2 {
position:relative;
width:266px;
height:125px;
float:left;
}
.lineV5{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
background-color:#000000;
position:relative;
height:128px;
width:1px;
}
.unisexSub3{
width:266px;
height:125px;
position:relative;
float:left;
}
Thanks in advance :)
can't see why box-model can help you with this. maybe you are looking for FlexBox! Or go classic and use display:inline-block for the nested boxes(3,4,5,7,8,10,11,12) and all others just row divs.
But don't use floats any more!
Check out this simplified solution on JSBin.
The basic idea is to wrap all the items except the 1st box in a containing wrapper .wrap. A horizontal margin of auto along with a fixed width will center it in the page. Within that, you have your side-by-side boxes float left and give them fixed widths. The div below them needs to clear the float.
Hope the example is helpful.
I am trying to achieve bar graph for a simple html page using my own css. I am in the initial stage of creating html and css. Below is my html and css.
fiddle: http://jsfiddle.net/ismailvtl/GJUmq/
I want my "bar" to stay on "line" even if I change the height of "bar".
HTML:
<div class="bar-holder">
<div class="bar car"></div>
<div class="bar fat"></div>
<div class="bar iron"></div>
</div>
<div class="line"></div>
CSS:
.bar-holder
{
height:auto;
width:100%;
float:left;
}
.line {
width:100%;
height:3px;
background:#000;
float:left;
position:relative;
}
.bar {
height:350px;
width:40px;
float:left;
margin-left:20px;
border:1px solid #dedede;
bottom:0;
}
.car {
background:blue;
height:240px;
}
.fat {
background:red;
height:300px;
}
.iron {
background:black;
height:330px
}
http://codepen.io/anon/pen/kiwqE
All your bars need to be absolute and have a bottom 0
I have a minor issue here. I'd like to center the red div and have the two green divs float to the right. The two right divs appear to drop down?
http://jsbin.com/ewihuh/1/edit
HTML
<div class="headertop">
<div class="centerblock">Centered</div>
<div class="right1">right 1</div>
<div class="right2">right 2</div>
</div>
CSS
.headertop {
width:100%;
height:30px;
background:black;
}
.centerblock {
color:white;
text-align:center;
background:red;
width: 200px;
margin: 0px auto;
}
.right1, .right2 {
color:white;
float:right;
width:100px;
background:green;
}
Live Demo
Hi now change to your html code and some change to css
Css
.headertop {
width:100%;
background:black;
text-align:center;
}
.centerblock {
color:white;
text-align:center;
background:red;
width: 200px;
margin:0 auto;
}
.right1, .right2{
color:white;
float:right;
width:100px;
background:green;
}
HTML
<div class="headertop">
<div class="right1">right 1</div>
<div class="right2">right 2</div>
<div class="centerblock">Centered</div>
</div>
HTML
<div class="headertop">
<div class="centerblock">Centered</div>
<div class="rights">
<div class="right1">right 1</div>
<div class="right2">right 2</div>
</div>
</div>
CSS
.headertop {
width:100%;
height:30px;
background:black;
text-align:center;
position:relative;
}
.centerblock {
color:white;
text-align:center;
background:red;
width: 200px;
margin: 0 auto;
}
.rights {
position:absolute;
right:0;
top:0;
width:100px;
}
.right1, .right2 {
color:white;
width:50px;
background:green;
float:left;
}
DEMO: http://jsbin.com/ewihuh/7/edit
I'd like to make something that looks like the below image using CSS:
I'm at a total loss on how to do that. Might someone help?
This can be done using two elements or one element and a pseudo-element:
HTML:
<div></div>
CSS:
div { position:relative; background-color:#333; padding:20px;
margin:20px; float:left; }
div:before { content:""; display:block; padding:5px; background-color:#f60;
border:2px solid white; position: absolute; top:-2px;
right:-2px;}
http://jsfiddle.net/Vv6Eb/
Update:
With border-top-right-radius:
http://jsfiddle.net/Vv6Eb/1/
Or, border-bottom-left-radius:
http://jsfiddle.net/Vv6Eb/4/
<div id="page">
<div id="up">
</div>
<div id="logo">
<div id="logobody"></div>
</div>
<div id="down">
</div>
</div>
#page{
margin:30px auto;
width:500px;
height:auto;
border-radius:10px;
border:2px red thin;
background:white;
overflow:hidden;
}
#logo{
float:right;
width:100px;
height:70px;
border-radius:10px;
background:white;
margin-top:-70px;
margin-right:10px;
}
#up{
width:80%;
height:60px;
border-radius-top:10px;
background:gray;
}
#down{
margin-top:-0px;
margin-right:-10px;
width:100%;
height:60px;
border-radius: 0px 10px 10px 10px;
background:gray;
}
#logobody{
border:2px blue solid;
margin :auto;
width:85px;
height:50px;
margin-top:10px;
margin-right:0px;
border-radius:7px;
}
jsFiddle
Use float..http://www.w3schools.com/css/css_float.asp
<div style="background-color:#000; height:500px; width:500px; margin-bottom:10px;">
<div style="background-color:#FFF; float:right; height:100px; width:100px; margin-right:10px; margin-top:10px;"></div>
</div>
<div style="background-color:#000; height:500px; width:500px; position:relative;">
<div style="background-color:#FFF; position:absolute; right:0px; height:100px; width:100px; margin-right:10px; margin-top:10px;"></div>
</div>
Inline styles is not advisable so might wanna write the styles in your stylesheet file. Using float makes the texts wraps the div tag. The seconds code stacks