http://img263.imageshack.us/img263/6803/32007451.jpg http://img263.imageshack.us/img263/6803/32007451.jpg
I have two problems with my friendlisting box.
1. Images are set 100px in width but they vary in height. Problem here is, friendlisting div is not extending along with image's height as it should. As a result image overpositioned on bottom border.
2. Commonfriends div needs to extend in height and fully fill friendlisting box. Not happening.
I spent hours to fix these two issues, just couldn't make it. Any advise appreciated!
My html
<div class="friendlisting">
<img src="http://www.hurriyet.com.tr/_np/3375/8623375.jpg" alt="xxxx" class="profile" />
<div class="userinfo">
<span><strong>George Lexington</strong></span>
<span>Bruges, Belgium</span>
</div>
<div class="commonfriends">13 common friends</div>
<div class="tools">
<span><img src="images/icons/user_add.png" />Add to friend list</span>
<span><img src="images/icons/email_edit.png" />Send Message</span>
</div>
</div>
css
#content .friendlisting { min-height:40px; padding:5px 0 5px; border-bottom:1px solid #DDD; }
#content .friendlisting img.profile { float:left; width:100px; }
#content .friendlisting .userinfo { float:left; width: 200px; padding:10px; }
#content .friendlisting .userinfo span { display:block; }
#content .friendlisting .commonfriends { float:left; width:150px; height:100%; background:#ffe996; }
#content .friendlisting .commonfriends:hover { background:#FEDF62; }
#content .friendlisting .tools { float:left; width:160px; }
#content .friendlisting .tools span { display:block; }
you could try using a clearing div like this:
<div class="friendlisting">
<img src="http://www.hurriyet.com.tr/_np/3375/8623375.jpg" alt="xxxx" class="profile" />
<div class="userinfo">
<span><strong>George Lexington</strong></span>
<span>Bruges, Belgium</span>
</div>
<div class="commonfriends">13 common friends</div>
<div class="tools">
<span><img src="images/icons/user_add.png" />Add to friend list</span>
<span><img src="images/icons/email_edit.png" />Send Message</span>
</div>
<div style="clear:both;"></div>
</div>
or if you dont like the in-line style
.clear
{
clear:both;
}
then <div class="clear"></div>
Related
I'm trying to get some floated elements to appear outside of a container on a drupal page that is using a theme based on Omega. my page is currently structured as such:
<h2>Some header text</h2>
<div class="grid-12 region region-content center" id="region-content">
<div class="container-12">
<div class="pricing-main-background">
<div class="grid-4 plan-box-orange">
</div>
<div class="grid-4 plan-box-green">
</div>
<div class="grid-4 plan-box-orange">
</div>
<div class="pricing-subtext">
some more text down here
</div>
</div>
</div>
</div>
Here's a sketch of what I'd like to accomplish (notice the smaller boxes outside of the container):
Visual Aid
Can anyone help provide a way to make this work (preferrably that doesn't require a mess of CSS when the boxes stack (at 480px)?
Something like this?
h2
{
width:60%;
border:1px solid black;
border-bottom:0;
margin:0 auto;
text-align:center;
}
.grid-12
{
width:60%;
border:1px solid black;
margin:0 auto;
text-align:center;
}
.pricing-main-background {position:relative;}
.plan-box-orange {background:orange;}
.plan-box-green {background:green;}
.grid-4
{
display:inline-block;
width:30%;
height:50px;
margin-top:25px;
}
.grid-4:nth-of-type(1)
{
position:absolute;
left:-10%;
}
.grid-4:nth-of-type(3)
{
position:absolute;
right:-10%;
}
I wanted to change div content between clicking 2 links.
I solved it but upon clicking on the 2nd link, if you click on other spaces it will return to the default div. basically what i want is when you click on the second link, and when you click on the space around it, it would not return to previous link! Can anyone help me solve this?
JSFiddle example
CSS:
#button1 {position:fixed;top:120px;left:150px;}
#button2 {position:fixed;top:120px;left:290px;}
#button1:focus~#content #default,
#button2:focus~#content #default
{display:none;}
#button1:focus~#content div:nth-child(2),
#button2:focus~#content div:nth-child(3) {display:block;}
#content {
border:1px dashed black;
width:800px;
height:auto;
position:fixed;
left:150px;
top:150px;
background-color:#E2E2E2;
color:black;
font-size:10px;
text-align:center;
}
#percent,#dollar {display:none;}
#default,#percent{
width:800px;
height:499px;
background-image:url(images/image2.jpg);
}
#dollar{
width:800px;
height:499px;
background-image:url(images/image1.jpg);
}
.bar1{
width:54px;
height:138px;
margin-left:102px;
padding-top:110px;
}
HTML
<a id="button1" href="#" tabindex="1">View in Percentage</a>
<a id="button2" href="#" tabindex="2">View in Absolute Dollar</a>
<div id="content">
<div id="default">
<div class="bar1">
<img src="images/trypic/bar1.jpg" onmouseover="this.src='images/trypic/bar1_percent.jpg'" onmouseout="this.src='images/trypic/bar1.jpg'" /></div>
</div>
<div id="percent">
<div class="bar1">
<img src="images/trypic/bar1.jpg" onmouseover="this.src='images/trypic/bar1_percent.jpg'" onmouseout="this.src='images/trypic/bar1.jpg'" /></div>
</div>
<div id="dollar">dollar content will go here.</div>
</div>
try this
html
<div id="main">
<a id="button1" href="#" tabindex="1">View in Percentage</a>
<a id="button2" href="#" tabindex="2">View in Absolute Dollar</a>
<div class="content_one">
percentage viewed
</div>
<div class="content_two">
Absolute dollar viewed
</div>
</div>
css
*
{margin:0;
padding:0;
}
#main
{width:1000px;
margin:0 auto;
}
.content_one
{width:500px;
height:300px;
background:#CCC;
position:absolute;
}
.content_two
{width:500px;
height:300px;
background:#333;
position:absolute;
z-index:-1;
}
js
$("#button1").click(function() {
$(".content_two").hide();
$(".content_one").show();
});
$("#button2").click(function() {
$(".content_one").hide();
$(".content_two").show();
});
Try a little bit of javascript and avoid the css~focus. Fiddle Link. You can use plain javascript to achieve this. No need for extra libraries or anything. Once I removed the focus, the issue of changing the div was solved.
refer the following code
View in Percentage
View in Absolute Dollar
<div id="content">
<div id="percent">
<div class="bar1">
<img src="images/trypic/bar1.jpg" onmouseover="this.src='images/trypic/bar1_percent.jpg'" onmouseout="this.src='images/trypic/bar1.jpg'" /></div>
</div>
<div id="dollar">dollar content will go here.</div>
</div>
script
function show1(){
document.getElementById('percent').style.display = 'block';
document.getElementById('dollar').style.display = 'none';
}
function show2(){
document.getElementById('percent').style.display = 'none';
document.getElementById('dollar').style.display = 'block';
}
css
#button1 {position:fixed;top:120px;left:150px;}
#button2 {position:fixed;top:120px;left:290px;}
#content {
border:1px dashed black;
width:800px;
height:auto;
position:fixed;
left:150px;
top:150px;
background-color:#E2E2E2;
color:black;
font-size:10px;
text-align:center;
}
#dollar {display:none;}
#percent{
width:800px;
height:499px;
background-image:url(images/image2.jpg);
}
#dollar{
width:800px;
height:499px;
background-image:url(images/image1.jpg);
}
.bar1{
width:54px;
height:138px;
margin-left:102px;
padding-top:110px;
}
I'm a newbie with html so please be patient.
I'm trying to align 4 divs in parallel where the first,third and fourth div are static,the second div is empty and i need it to occupy the remain place e.g "width:auto".
I don't want to use table to solve the problem.
Is there a way to solve it using divs?
HTML:
<div class="container">
<div class="content" >
first
</div>
<div class="empty">
</div>
<div class="content">
third
</div>
<div class="content">
fourth
</div>
</div>
CSS:
.container{
strong textwidth:1020px;
height:40px;
}
.content{
position:relative;
background-color:#2cc2e7;
height:40px;
width:142px;
float:right;
margin-right:5px;
}
.empty{
background-color:#f1d486;
height:40px;
width:auto;
margin-right:5px;
}
You will need to change the order of the elements:
<div class="container">
<div class="first content">first</div>
<div class="content">third</div>
<div class="content">fourth</div>
<div class="empty"></div>
</div>
And then just float the first one to the left, other two to the right, and the .empty one, don't float it but set an overflow to auto —or hidden.
.content {
float: right;
width: 142px;
}
.first {
float: left;
}
.empty {
overflow: auto;
}
http://jsfiddle.net/GTbnz/
If you are prepared to add below the empty div then you could use the following:
<div class="empty">
</div>
with a style sheet of:
.container {
width:1020px;
height:40px;
display:table;
width:100%;
}
.container div {
height:40px;
display:table-cell;
}
.content {
background-color:#2cc2e7;
width:142px;
max-width:142px;
}
.empty {
background-color:#f1d486;
}
This was whichever of the 4 div's has a class 'empty' will auto-expand to fill the available space and the other div sizes will all be 142 px.
I have a basic layout that is one Div container wrapper and three columns Divs inside. I want the left and right column to be of fixed with, with the middle one being dynamic to fit it's open space.
Here's a picture to demonstrate what it looks like now:
The red border is the container, and the blue border div is the one I want to expand to stretch as wide as it can so the yellow div is always almost touching the right border of the parent.
Thanks!
#body
{
border: 1px solid red;
min-height:800px;
width:auto;
margin-left:50px;
margin-right:50px;
}
#leftnavigation
{
border: 1px solid green;
min-height:500px;
float:left;
width:190px;
}
#contentarea
{
border:1px solid blue;
min-height:500px;
float:left;
width:auto;
margin-left:5px;
margin-right:5px;
}
#advertisingarea
{
border:1px solid orange;
width:150px;
float:left;
min-height:500px;
}
.advert
{
}
<div id="body">
<div id="leftnavigation"></div>
<div id="contentarea">sdfg<h1>asdasd</h1></div>
<div id="advertisingarea">
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
</div>
</div>
</div>
Since display:table-cell is now universally supported in all modern browsers you might as well use that: http://jsfiddle.net/Lbpeh/1/
HTML
<div id="root">
<div id="left">
Left
</div>
<div id="middle">
Middle
</div>
<div id="right">
Right
</div>
</div>
CSS
#root {
display:table;
border-spacing:0;
width:100%;
height:500px;
}
#root > div {
display:table-cell;
}
#left {
background:red;
width:25%;
}
#middle {
background:green;
}
#right {
background:blue;
width:100px;
}
Keep in mind that table-like layout has some issues of its own, but what you're essentially trying to achieve is the behaviour of tables with semantically more correct markup. That's what display:table-cell is for.
There are quite a few:
http://www.codeproject.com/KB/HTML/relatively_simple.aspx
http://www.tjkdesign.com/articles/3cols.asp
http://www.alistapart.com/articles/holygrail
3 columns layout via DIVs (middle-flexible, all flexible height, STRICT mode)
I am trying to create a border around an image on the page, and the border works fine in IE8 Normal mode, but fills to 100% of the outer div in IE8 compatibility mode, my css is the following:
.page-layout .page-header .page-image
{
float:left;
vertical-align:top;
width:170px;
}
.page-layout .page-header .page-image div,
.page-layout .page-header .page-image img
{
float:left;
}
.page-image-imgtop
{
background-image:url('/Style Library/images/pagecontent-image-top-bg.png');
background-repeat:repeat-x;
height:6px;
float:left;
clear:both;
width:100%;
}
.page-image-imgleft
{
background-image:url('/Style Library/images/pagecontent-image-bg-left.png');
background-repeat:repeat-y;
float:left;
text-align:right;
clear:both;
}
.page-image-imgright
{
margin-left:7px;
padding-right:8px;
background-image:url('/Style Library/images/pagecontent-image-bg-right.png');
background-repeat:repeat-y;
background-position:top right;
float:left;
clear:both;
}
.page-image-imgbottom
{
background-image:url('/Style Library/images/pagecontent-image-bottom-bg.png');
background-repeat:repeat-x;
height:6px;
float:left;
clear:both;
width:100%;
}
And the following HTML:
<div class="page-image">
<div class="page-image-imgleft">
<div class="page-image-imgtop">
<img src="/Style Library/images/pagecontent-image-top-left.png" style="float:left;" />
<img src="/Style Library/images/pagecontent-image-top-right.png" style="float:right" />
</div>
<div class="page-image-imgright">
<img src="MAINIMAGE.jpg" style="border-width:0px;text-align:top;" />
</div>
<div class="page-image-imgbottom">
<img src="/Style Library/images/pagecontent-image-bottom-left.png" style="float:left;" />
<img src="/Style Library/images/pagecontent-image-bottom-right.png" style="float:right" />
</div>
</div>
</div>
Not totally sure if I understand what you want to do. But why not trying to add the boarder in the css file?
Remove style="border-width:0px;text-align:top;" from the MAINIMAGE.jpg tag
and add this to .page-image-imgright in the css source
border: 5px solid #000000;
I didn't have any problem with the boarder in IE 8 when I tested this - the border was only around the main image.
Let me know if that solves the problem.