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
Related
I want the red box at the arrow ending position. jsbin
<div id="wrapper">
<div id="blue"></div>
<div id="yellow1">y</div>
<div id="yellow2">y</div>
<div id="red"></div>
</div>
body{width:800px;}
#wrapper{position:relative;}
#blue{
float:left;
height:225px;
width:520px;
background:blue;
}
#yellow1,#yellow2{
position:relative;
width:250px;
height:200px;
margin:10px 0 20px 540px;
background:yellow;}
/*Not working*/
#red{
background:red;
position:absolute;
height:200px;
width:520px;
top:200;
}
top:520 for #red is wrong. You have to write top:230px as top value I think..
You are missing a unit of measurement at the end of top:520; of your #red rule
It should be like top:520px;
Remove top and write margin-top:-195px to #red.
Demo here.
use this code
http://jsbin.com/IxAtOFA/10/edit
#blue{
float:left;
height:225px;
width:520px;
background:blue;
margin:5px;
}
#yellow1,#yellow2{
position:relative;
width:250px;
height:200px;
background:yellow;
float:right;
margin:5px;
}
#red{
background:red;
height:200px;
width:520px;
float:left;
margin:5px;
}
it is solved now, I placed the <div id="red"></div> before the yellow divs, http://jsbin.com/IxAtOFA/12/edit
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
and here is the css:
.divPhoto {
border:1px solid #999;
width:140px;
height:140px;
border-radius:3px;
background-color:#EEE;
display:inline-block;
margin:10px;
transition:0.5s;
overflow:hidden;
}
.divPhoto:hover {
border:1px solid #0000FF;
background-color:#CCC;
cursor:pointer;
height:175px;
}
foreach($photos as $photo) { ?>
<div class="divPhoto" >
<a class="fancybox" data-fancybox-group="gallery" href="upload/<?=$photo->filename?>"><img class="img-polaroid" src="upload/thumb/<?=$photo->filename?>"></a>
<input type="button" class="btn btnEffacer" value="effacer" style="margin-left:30px;" data="<?=$photo->id?>" />
</div>
<? } ?>
ANy idea on align the hover on bottom and not on top ?
Because now all pictures are moving when hovering an imahe
A vertical-align:top to the .divPhoto rule should be enough.
Since you change the height on hover from 140px to 175px, you need some extra margin-bottom on the unhovered state to pad it out to 175px height.
you should use display:inline-table; for .divPhoto div
Fiddle
.divPhoto {
border:1px solid #999;
width:140px;
height:140px;
border-radius:3px;
background-color:#EEE;
display:inline-table; /* <= this line */
margin:10px;
transition:0.5s;
overflow:hidden;
}
Since the elements are inline-blocks, you can simply use vertical-align: top:
.divPhoto {
border:1px solid #999;
width:140px;
height:140px;
border-radius:3px;
background-color:#EEE;
display:inline-block;
margin:10px;
transition:0.5s;
overflow:hidden;
vertical-align: top;
}
http://jsfiddle.net/Dtejn/
I am trying to achieve this layout:
So far, here is the HTML I have:
<body>
<div id="content">
<div id="header">
</div>
<div id="nav">
</div>
<div id="footer">
</div>
</div>
</body>
and the CSS:
#content{
margin:0 auto;
height:1200px;
width:1000px;
border:2px solid black;
}
#header{
margin:0 auto;
width:inherit;
height:200px;
border-bottom:2px black solid;
}
#nav{
margin:0 auto;
width:inherit;
height:50px;
border-bottom:2px solid black;
}
#footer{
width:inherit;
border-top:2px solid black;
margin-top:-1200px;
height:200px;
clear:both;
}
The problem is with the footer - it is not behaving as in diagram.
Can you tell me what is wrong with my code? Please don't give me some other codes because I am new to CSS.
Your footer is moved up because you have margin-top: -1200px
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.