Im working on a website right now but i have some problems with putting a image on top of 2 divs, and there is a other problem the bottom div is the footer, wich i want to keep stick to the bottom ofcourse (this part works but the image on top of the divs not)
Here is a image to show you my idea better :
I'd like to know a few ideas of how i can implement this, if you need to see my code ask me.
For the people who commented already under my post,
first of all thank you for your time but sadly it didnt work (so far i keep trying your suggestions)
but to help you a bit more to understand what i try to do, i give you a bit of my code.
<html>
<head>
<style type="text/css">
/* general */
body { background: #fdfdfd; font: 12px Verdana, Geneva, sans-serif; color:#444; margin: 0 0 300px; /* bottom = footer height */}
html { position: relative; min-height: 100%;}
.fix_width { width: 940px; margin: 0 auto; }
.fix_width:after, .left_foot_cont ul li:after { content: " " ; display:block; height:0; clear:both; visibility:hidden; }
#header { background:#6FF; height:100px; z-index: 3; position: relative; border-top: color: #555555 thick; border-width:5px; }
#container { position:relative; top:0px; margin-top:100px; overflow: auto;}
.cont {width:250px; padding-left:20px; margin-left:10px; display:inline-block; float:left; }
#footer { background: #A9CF38; position: absolute;
left: 0;
bottom: 0;
height: 200px;
width: 100%;
overflow: auto;}
img {width:940px; }
</style>
</head>
<body>
<div id="header">
<div class="fix_width">
<h2>
Just the header nothing important
</h2>
</div>
</div>
<div id = "container">
<div class="fix_width">
<div class="cont">
<h2>
Lorem ipsum
</h2>
<p class="last">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</p> <!-- End p.last -->
</div><!-- End .cont -->
</div> <!-- End .fix_width -->
</div><!-- End .container -->
<!-- Where should i put the image ????? --->
<img src="http://www.mormonshare.com/sites/default/files/handouts/cg_banner-blank.gif"> </img>
<div id = "footer">
<div class="fix_width">
<div class="footer_con_left">
<h2>
Lorem ipsum
<br /><br />
</h2>
<h1>
dolor sit amet
<br />
dolor sit amet
<br />
dolor sit amet
<br />
dolor sit amet
</h1>
</div> <!-- End. footer_con_left -->
</div><!-- Einde class fix_width -->
</div> <!-- Einde class footer -->
</body>
</html>
As you can see the image in the code, i want this image to be placed 50% on the white space and 50% on the green space (so in the code between the container div and between the footer div, or maybe better to say on top of these divs)
Thanks for helping!
You should place an image in DIV1, set position:relative to DIV1, position:absolute to IMAGE and set bottom:-50% to IMAGE or bottom:0px;margin-bottom:-50%;
Wrap Image in a div:
targethoweveryouwish {
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-300px;
z-index:10;
}
Ok, heres whats going on in the code above. the 50% attributes are moving the div to the center of the page, but it is moving the top left corner of the div to the center, so you'll need to subtract half the height and width of the div to make it center properly, make those adjustments to the margin-top and margin-left properties. The z-index is basically like a 2D way to add layers to your page. Everything is on layer 0 by default, so if you want to overlap things, just put them on a higher or lower z-index. You can use negative values too.
I think you should check this code I've made on this link
The code on the above link will center your image between your divs
Ignore this one .
<html>
<head>
<style type="text/css">
#container{
width:100%;
height:100%;
position:absolute;
background:black;
margin:0px;
padding:0px;
}
#test1{
width:100%;
height:35%;
position:relative;
background:blue;
margin:0px;
padding:0px;
}
#test2{
width:100%;
height:25%;
position:relative;
background:white;
margin:0px;
padding:0px;
}
#test3{
width:100%;
height:40%;
position:absolute;
background:red;
margin:0px;
padding:0px;
}
.content{
width:200px;
height:200px;
background:white;
float:left;
margin:10px 0px 10px 50px;
left:200px;
position:relative;
}
</style>
</head>
<body>
<div id="container">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</div>
</body>
</html>
Related
I have an issue regarding my html/css composition
I have a fixed menu on the right with a known width : 175px. What i want is to "fill" the space on the left of this div with an other div.
I hope you will understand what i am saying, anyway, thanks in advance !
You can do something like this (it will work with older browsers) :
jsFiddle
HTML:
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae urna eget purus pharetra sodales. Integer in justo quis risus pellentesque fermentum. Donec sit amet pharetra arcu. Fusce imperdiet tempor eleifend.
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae urna eget purus pharetra sodales. Integer in justo quis risus pellentesque fermentum. Donec sit amet pharetra arcu. Fusce imperdiet tempor eleifend.
</div>
CSS:
.left { float:left; height:300px; background:blue; margin-right:175px; }
.right { width:175px; height:300px; background:red; position:fixed; right:0; }
DEMO HERE
CSS
#fixed {
position:fixed;
right:0;
float: right;
width: 100px;
background: rgba(255,0,0,0.7);
height:400px;
text-align: center;
}
#relative {
position:relative;
margin-right: 100px;
background: rgba(0,0,255,0.7);
height:400px;
width:100%;
display: inline-block;
float:right;
text-align: center;
}
HTML
<div id="fixed" >
I am fixed.
</div>
<div id="relative">
I am relative, fluid, width 100%
</div>
Depending on the browsers that you need to support (IE9 >) you can use calc() in your CSS for the "fill":
.fill {
width: calc(100% - 175px);
}
calc() is still labelled as "experimental technology" so be sure to read up on it before using - https://developer.mozilla.org/en-US/docs/Web/CSS/calc
More info regarding calc() support - http://caniuse.com/#search=calc
CSS
.LeftDiv {
width:80%;
display:inline-block;*display:inline;zoom:1; /* The additional code is IE7-fix */
height:500px;
background:#aaa;
}
.rightDiv {
width:175px;
height:500px;
display:inline-block;*display:inline;zoom:1;
background:green;
}
HTML
<leftDiv>a</div><rightDiv>b</div>
most simple version of your request.
I am struggling a bit to get this to work.
If you look at the following JSFiddle:
http://jsfiddle.net/JUDXq/
Is there a way to make the image block sit nicely next to the red block without it moving underneath the red block AND still have other images further down to be 100% width?
The image is on purpose as wide as the parent element. If an image is bigger than its parent, we can use "max-width:100% " to make it resize. But if there is a float inside the parent taking space, is there a way to do this?
<div class="parent">
<div class="left">
</div>
<p>
Lorem ipsum dolor sit amet, non ut, hymenaeos urna mi odio, non ac libero, turpis curabitur ante ultricies proin egestas convallis. In bibendum mauris quis placeat. Fusce interdum id faucibus dictum id adipiscing, non et elit, vel hendrerit libero, nulla donec ornare lacus et lacus lectus. In tristique, mauris mauris adipiscing neque, donec libero nulla sem lacus, nibh arcu nu. <strong> I would like the image to go right below this text.</strong>
</p>
<div class="one">
<img src="http://placekitten.com/500/200">
</div>
</div>
.parent { width: 500px; height:1000px; }
.left {float:left; width:100px; height:200px; background:red; display:block; }
.one { background:blue; }
Image hosted by Placekitten and taken by: Pieter Lanser
Thanks guys
Is this what you're looking for? http://jsfiddle.net/LQxVE/1/
.parent { width: 500px; height:1000px; }
.left {float:left; width:100px; height:200px; background:red; display:block; }
.one { background:blue; }
img {
float: right;
width: 400px;
}
if I'm understanding your comment, this might be more suited: http://jsfiddle.net/LQxVE/2/
.one {
background:blue;
width: 80%;
float: right;
}
img {
max-width: 100%;
}
I'm trying to make a responsive web layout. On the front page there is a div, with two divs in it. One for the caption and one for the image. The caption should stay next to the image at all times, but the image and caption should scale for smaller screens.
Here is my html;
<div class="content">
<div class="caption">
<h1>Blablabla</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ipsum quam, semper volutpat massa. Cras mattis malesuada sagittis. Cras luctus erat quis orci condimentum quis vulputate lectus venenatis. Proin lorem lorem, vehicula in porta id, facilisis id massa. Phasellus venenatis eros et diam dictum faucibus. Donec at rutrum orci. Vivamus quam sapien, mollis sed aliquet blandit, viverra nec enim. In sapien lectus, fringilla pretium sollicitudin eu, eleifend id mi. Phasellus ullamcorper massa vitae mauris</p>
</div>
<div class="image">
<img src="pics02.jpg">
</div>
</div>
And this is my css;
.content {
margin: 0px auto;
width:60%;
background-color:black;
margin-top:4em;
display:block;
}
.caption {
width:30%;
background-color:white;
height: auto;
display:inline;
margin:0px;
color:green;
float:left;
padding:6px;
display:block;
}
.image {
display:inline;
margin:0px;
float:right;
display:block;
}
.image img {
max-width:100% !important;
max-height:100% !important;
display:block;
}
In another topic here on stack I found that I should set the img tag with a max width and height and set the display to block everywhere.
Unfortunately that doesn't work when I'm scaling, the image gets smaller when you scale but it slides underneath the caption.
just add this to your image css class:
.image {
display:inline;
margin:0px;
float:right;
display:block;
width: 60%;
}
Hope this is what you want.
Otherwise, if you can update this example with real picture etc, we can help so much more: http://jsfiddle.net/BJ8gK/30/
Live Demo
Why are you used to multiple value
.caption {
width:30%;
background-color:white;
height: auto;
display:inline; // used to any one value
margin:0px;
color:green;
float:left; // used to any one value
padding:6px;
display:block; // used to any one value
}
Used to one property in your class .caption
do't used to multiple display value in a single class
I think You want to this Live Demo
So I'm trying to set the height of the "content" class but it doesn't seem to be working. I'm quite a noob at nested DIVs and I've tried the fixes that I've found googling but nothing seems to work. Help?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Website Horizontal Scrolling with jQuery" />
<meta name="keywords" content="jquery, horizontal, scrolling, scroll, smooth"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>
<style>
body {
background-mage: url(bg.jpg), url(bgrepeat.jpg);
background-repeat: no-repeat, repeat-x;
background-attachment:fixed;
background-position:left bottom;
background-color: #D3C8B6;
}
#wrapper {
text-align: center;
width: 100%;
position:absolute;
bottom:0;
}
#header,
#main,
#sidebar,
#footer {
display:inline;
position:relative;
float:left;
}
#header,
#footer {
width:100%;
background-color:#eee;
opacity:1.0;
filter:alpha(opacity=100);
}
#header {
margin-bottom:1%;
height:100px;
}
#footer {
margin-top:1%;
height:40px;
}
#main {
width:20%;
height:475px;
margin-right:1%;
text-align: center;
background-color:#eee;
opacity:1.0;
filter:alpha(opacity=100);
}
#sidebar {
width:79%;
height:475px;
overflow: hidden;
}
.viewport{
width:100%;
height:475px;
overflow-x:scroll;
}
.inside{
width:9000px;
height:200px;
}
.inside div{
height:450px;
width:700px;
float:left;
margin-right:4px;
}
.content {
height:100px;
width:300px;
overflow-y: scroll;
position:relative;
top: 10px;
right:10px;
}
.one{
background-image: url(images/frame.png)
}
.two{
background-image: url(images/frame2.png);
text-align:center;
z-index: 1;
}
.three{
background-image: url(images/frame1.png);
}
.four{
background-image: url(images/frame3.png);
}
.five {
background-image: url(images/frame4.png);
}
</style>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="main">
<div class="one-l">Home</div>
<div class="two-l">Portfolio</div>
<div class="three-l">Resume</div>
<div class="four-l">Blog</div>
<div class="five-l">Contact</div>
</div>
<div id="sidebar">
<div class="viewport" >
<div class="inside" >
<div class="one">home</div>
<div class="two">
<div class="content" width="200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum, leo vitae ornare dignissim, lorem urna tempor felis, in fringilla urna justo non velit. Cras imperdiet viverra ligula, vitae auctor neque elementum eget. In nec quam est, quis molestie magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida, elit a iaculis consequat, ligula nisl cursus turpis, in giat eu placerat vel, viverra vel nibh. Ut vitae felis ac nisi euismod porta. Aliquam et gravida mauris. Maecenas id massa ligula, et blandit orci. In hac habitasse platea dictumst. Donec eu tortor libero. Donec eget leo mi. Mauris quis neque vitae massa facilisis placerat ut et felis. Nullam eleifend faucibus diam, sit amet pellentesque leo euismod id. Morbi interdum placerat nibh, in mattis sem eleifend quis. Nunc non nunc sed lorem condimentum molestie mattis blandit dui. Nulla urna ligula, auctor id venenatis eu, placerat ut dui. In fringilla purus gravida sapien cursus imperdiet porta ligula lobortis. Sed pellentesque, nisi quis tristique pulvinar, justo odio sollicitudin risus, non euismod dui ante nec tortor.
</div></div>
<div class="three">resume</div>
<div class="four">blog</div>
<div class="five">contact</div>
</div>
</div>
This is happening because the height property defined in .inside div takes precedence. In this case, to make the height property work inside class .content you must do something like this:
.content
{
height: 200px !important;
}
You can see a Demo at JS Bin: http://jsbin.com/exucek/1/edit
Try changing the height property value to see it being applied in real time. You'll see that when the value is too small, scroll-bars appear.
If you're curious about that !important CSS rule, take a look here:
What does !important mean in CSS?
Your CSS will use whatever the most specific rule is.
You have specified a height on
.inside div
which is more specific than
.content
where you are also setting a height.
In order to have your CSS use the height you have set for .content, you need to make the selector more specific, like so:
.inside div{
height:450px;
width:700px;
}
.inside .content {
height:100px;
width:300px;
}
that should do the trick.
you have a mistake in your code!
replace <div class="content" style=" width:200px;" > with
<div class="content" width=200 >
or change your css code:
.content {
height:200px;
}
I'm using this layout to create a 2 column fluid web page.
What I can't seem to do is make it so that both the columns in the layout have a height of 100% therefore pushing the footer to the bottom of the page!
Whats the best way to achieve this effect?
Thanks in advance!
Last time I read about this the best answer was display: table; for the main container and display: table-cell; for each column. This will make the column the height that you specify.
#wrap {
background: orange;
display: table;
height: 88%;
width: 550px;
padding: 11px;
}
#col1 {
display:table-cell;
background: #808080;
width: 222px;
border: 1px solid #FFF;
padding: 12px;
}
#col2 {
display:table-cell;
background: #808080;
width: 111px;
border: 1px solid #FFF;
padding: 12px;
}
<!-- this container will determine the height of both columns -->
<div id="wrap">
<div id="col1">
<p>Lorem ipsum something or other.</p>
</div>
<div id="col2">
<p>More Lorem than ipsum.</p>
</div>
</div>
<!-- end container -->
hopefully this is what you're looking for:
http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
Try a different layout, why waste your time trying to hack a cross-browser solution?
This seems to be what you need, but I'm sure you can find others: http://www.savio.no/examples/three-column-layout-6.asp
I do the following in my personal site's CSS file:
#footer
{width: 100%;
bottom: 0px;
padding-top: .5em;
padding-bottom: .5em;
background-color: #ffffff;
border-top: 1px #000000 solid;
text-align: center;
margin-top: .25em;
}
Also, I have little in the way of nested div tags. I prefer to have the elements float around each other.
have 2 div tags, each as a column floating next to each other, and another div tag to clear the floats, then lastly another div to be the footer:
<div id="col1"></div>
<div id="col2"></div>
<div clear="c"></div>
<div id="footer"></div>
<style type="text/css"><!--
#col1{
float:left;
width:80%;
}
#col2{
float:right;
width:20%;
}
.c{
clear:both;
}
#footer{}
--></style>
With this, it's also easier to make it a 3 column.
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
<div clear="c"></div>
<div id="footer"></div>
<style type="text/css"><!--
#col1{
float:left;
width:200px;
}
#col2{
float:right;
width:300px;
}
#col3{
width:400px;
margin-left:200px;
margin-right:300px;
}
.c{
clear:both;
}
#footer{}
--></style>
Here's another way...
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
</div>
<div id="footer"></div>
<style type="text/css"><!--
body { height: 100% }
#container { height: 100% }
#col1 { height:100%; float:left; width: 70% }
#col2 { height:100%; float:right; width: 30% }
#footer { height: 50px; clear: both }
--></style>
Just made jsfiddle by Matthew James Taylor post. For me it was very useful. I think this is not a problem to remade for two column.
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1"><p>Column 1</p>
<p>Nunc egestas, vut mus hac diam lacus lacus nisi odio,
turpis dictumst mattis! Turpis ac ut nec nec et augue, in nec turpis
hac quis risus vel risus pid ridiculus purus urna ultrices ac turpis. In,
magna odio mattis! Ultricies? Odio nec odio enim porta urna phasellus
proin in lacus! Dignissim eros, ac duis porttitor dapibus et vel sed est?
Nec placerat egestas, nunc rhoncus scelerisque sit sit, magna elementum
eu ac, montes dolor ultrices eros velit! Urna dignissim. Enim, aliquam ut
porta etiam amet dolor in natoque? Integer nunc? Magnis, auctor sit nunc
in nec, dictumst
pulvinar proin! In nisi pulvinar penatibus lorem nec, tempor porta
ultricies, et monte.a asdfjasdjfklasdfasdfljsdfkj</p>
</div>
<div id="col2">
<p>Column 2 </p>
<p>Nunc egestas, vut mus hac diam lacus lacus nisi odio,
turpis dictumst mattis! Turpis ac ut nec nec et augue, in nec turpis
hac quis risus vel risus pid ridiculus purus urna ultrices ac turpis. In,
magna odio mattis! Ultricies? Odio nec odio enim porta urna phasellus
proin in lacus! Dignissim eros, ac duis porttitor dapibus et vel sed est?
Nec placerat egestas, nunc rhoncus scelerisque sit sit, magna elementum
eu ac, montes dolor ultrices eros velit! Urna dignissim. Enim, aliquam ut
porta etiam amet dolor in natoque? Integer nunc? Magnis, auctor sit nunc
</div>
<div id="col3">Column 3</div>
</div>
</div>
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
Try : overflow:hidden; on the wrap .
Hope That Helps