Not sure what the problem is: http://watercookies.topfloorstudio.com/
If you scroll down to "Latest News", I'm trying to get the div with the class .newscontentright to be inline with the image on the left. I've wasted too much time trying to figure it out on my own. Any help?
You need to set the width of newscontentright
.newscontentright {
width: 300px;
}
And remove the following from between newscontentleft and newscontentright
<div style="clear:both;"></div>
As a side note, learn to lay out pages without using clear. Use clear only when absolutely necessary, otherwise things get messy. 'Overflow: auto' is often a better solution.
In this particular case the clear is completely unnecessary so just remove it.
maybe try your clear before your first float?
<div style="clear:both;"></div>
<div class="newscontentleft">
<img class="imageshadow" width="178" height="122" alt="news1" src="images/news1.jpg">
</div>
<div class="newscontentright">
<h3>Fall Blue Ridge Parkway “Bike for the French Broad”</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum, turpis ut hendrerit porttitor, lectus ipsumegestas sapien, ac tristique metus quam id est. </p>
<a> href="#">Read the full article »</a>
</div>
Related
I have a problem that I can't find the answer anywhere on the net.
In my project, I want to have a picture and when hovering it, I want a textarea to appear with some text. This part is working very well.
The part that bug me is that I also want it to stay at opacity:1 when the cursor is focused in the textarea.
I want to achieve this using CSS only if possible.
I am able to have the textarea:focus work since I can make it change the background color easily.
Here's the JS Fiddle to show you all:
http://jsfiddle.net/X7Qu6/
HTML:
<div class="charpicture">
<div class="BACKGROUNDdiv"><span class="BACKGROUNDtitle">Background</span>
<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales erat justo, nec fermentum mauris tristique vitae. Sed dignissim dapibus imperdiet. Morbi blandit in mi ac tincidunt. Donec at purus. </textarea>
</div>
</div>
CSS:
.charpicture:hover .BACKGROUNDdiv,
.BACKGROUNDdiv:hover{opacity:1;}
.BACKGROUNDdiv textarea:focus{background:green;opacity:1;}
Your textarea is inside BACKGROUNDdiv, so when it's hidden (opticity:0), there is no option to make any of its content visible. Textarea and your background have to be independent. Overlapping can be achieved with some relative/absolute positioning.
Example: http://jsfiddle.net/X7Qu6/1/
Is that what you was looking for?
I want to prevent the browser from doing the work to parse and pre-render or paint some "hidden" HTML until I'm ready to show it, so that I can quickly display a minimal set of content, having the browser only do the work the render the visible pieces.
I'm looking for maximum render/paint speed of initial page load.
My current HTML:
<div id="stuff">
<div class="item">
<div class="visible">
<h1>Item 1</h1>
<a class="details" href="javascript:void(0)">Show more</a>
</div>
<div class="invisible">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit mi, bibendum a imperdiet sed, imperdiet id leo. Mauris vulputate tellus id metus euismod, eget gravida libero ultricies.</p>
<img src="/img/1.jpg" alt="" />
</div>
</div>
<div class="item">
<div class="visible">
<h1>Item 2</h1>
<a class="details" href="javascript:void(0)">Show more</a>
</div>
<div class="invisible">
<p>Vestibulum tristique fermentum dui, et pretium elit. Ut purus lacus, mattis vitae leo vel, congue mollis mi. Aliquam erat volutpat. Vestibulum luctus, purus ut mattis ullamcorper, justo odio ultrices dolor, nec porta purus turpis sed orci. Aliquam orci sapien, dictum sed facilisis molestie, tempus in orci.</p>
<img src="/img/2.jpg" alt="" />
</div>
</div>
... and so on...
</div>
The actual "invisible" content is MUCH more significant than in this example, and there are 50 "items" per page.
My external CSS:
.invisible {
display: none;
}
Will display: none in an external stylesheet prevent the browser from pre-rendering the hidden content?
Is there a better way to do what I want? Should I put an inline style="display:none" on the div instead?
Thanks!
display: none will not prevent the browser from parsing/loading that markup and associated resources (EDIT by Steven Moseley: tested this and found that display:none will actually prevent the browser from painting the HTML, i.e. applying CSS to the elements inside the hidden div, and will only do the work to parse the HTML to construct the DOM, which will in fact give a performance advantage). It is simply not rendered as part of the page flow until its display value changes. Generally speaking display: none and visibility: hidden have little or no impact on page load time. The main venue for optimization / performance with display: none involves selectively choosing when to display it since that triggers a reflow/rerender of page content, and even that is usually a negligible difference in all but very complex applications.
If you want to wait to load the content until it's needed, don't include it at all (or include empty div placeholders) and then use AJAX to fetch the content from the server once it's needed after page load and add it to the page with JS. jQuery makes this very simple with its built in AJAX functions.
Can you avoid building the invisible HTML in the first place? Are you going to at some point set .invisible { display: block }?.
I've found display: none isn't as wonderful for performance as you'd expect. You're better off only adding the extra elements to the screen when your user needs them, with infinite scrolling or pagination.
Try and avoid putting HTML into the page if it's not going to be viewed, and just add what you need in 1 go to minimize DOM manipulation.
Is it likely a user will look at all 50 items per page?
I'm making myself a website but I'm a little stuck on an issue I am having.
Inside a div I have a block of text with variable height.
At the right side of the text I want to position an image width a variable width & height. It has to be aligned to the bottom
Above the image may not come any text.
It needs to be like this: https://www.dropbox.com/s/pqpttrvefrvci52/example.jpg
Here is the code I'm currently having:
HTML:
<div id="section">
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.
Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.
</p>
</div>
CSS
#section {
position: relative;
}
#image {
float: right;
margin-left: 20px;
position: absolute;
bottom: o;
right: 0;
}
With this code the image is aligned to the bottom right corner of the div, but the height of the div is lower then the height of the image.
Also the text just goes through the image.
you need a couple of things to fix this.
1) add padding-right to the section so it does not overlap with the image.
#section {
position: relative;
padding-right:<at least image width so the text doesn't overlap>
}
2) when you add a div and float in it, the float remove the image from the flow of the document so you need to add another internal div with the same height or make the height of the div the same height as your image or just add a floater div..
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<div style="clear:both"></div>
</div>
Here is a working solution: http://jsfiddle.net/zV3wm/
I can think of a way with variable image widths and text amounts, but it requires some duplication in the markup.
The gist is that you right-float a hidden version of the image, and then use overflow:hidden so that the paragraph against the float doesn't flow under it. Then, we use absolute positioning to place the non-hidden version of the image at the bottom of the container.
I have prepared a mockup at http://jsfiddle.net/UmGNZ/ (I have given the hidden image partial opacity, so you can see where it's being added to the document), but for a pseudo-HTML example:
<container with position:relative>
<right-float>
<hidden img tag with opacity: 0 />
<actual img tag with absolute positioning, bottom: 0, right: 0 />
</right-float>
<p with overflow:hidden (or auto) />
</container>
You could also try a pure CSS solution using CSS tables if you don't have to support IE7, but otherwise this should work down to IE6 if you use visibility:hidden in favour of opacity, and add a zoom:1 to the paragraph style.
This idea which allows a flexible image size: http://jsfiddle.net/David_Knowles/F3zZU/4/
.cell {display:table-cell;}
#section {
position: relative;
width:300px;
}
#image {
vertical-align: bottom;
}
<div id="section">
<div class="cell">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.</p>
</div>
<div id="image" class="cell">
<img src="http://placeimg.com/120/80/any" alt="image"/>
</div>
</div>
I dont thing I am correct but you can achieve that by float right and margin-top.
#img {
float: right;
margin-top: -140px;
}
Check this out: http://jsfiddle.net/wrujx/
I think best solution is to use a little bit of jQuery (JavaScript) and let each part do its job keeping it as simple as possible. Here's what you'd have:
HTML
<div id="wrapper">
<p>yourtexthere</p>
<img src="whatever.jpg"/>
</div>
CSS
#wrapper{
width:600px;
border:1px solid #000000;
}
p{
display:inline-block;
margin-right:20px;
}
img{
vertical-align:bottom;
}
jQuery
var parentWidth = $('#wrapper').width()
var imgWidth = $('img').width()
$('p').width((parentWidth - imgWidth) - 20)
And there you go plain and simple without extra tags and messy positioning.
This renders the same in Chrome and FireFox so maybe this is intended behavior but it seems pretty screwy. Putting a image in the h2 tag at the top of a div with "display:table-cell" causes extra padding to the top of the other table-cell divs roughly the same size as the image.
Here's my test code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chrome Test</title>
<style>
#col3 {
display:table;
border:1px solid black;
}
#col3 div {
width:33%;
display:table-cell;
border:1px solid blue;
}
</style>
</head>
<body>
<h2>Wrong?</h2>
<div id="col3">
<div>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div>
<h2><img src="url" height="80" width="215" alt="heading 2" /></h2>
<p>Suspendisse imperdiet lorem porta est venenatis viverra. </p>
</div>
<div>
<h2>Heading 2</h2>
<p>Aliquam laoreet diam sed ligula varius porta. Morbi volutpat ullamcorper diam, </p>
</div>
</div>
<h2>Right</h2>
<div id="col3">
<div>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, </p>
</div>
<div>
<h2>Heading 2</h2>
<p><img src="url" height="80" width="215" alt="heading 2" />Suspendisse imperdiet lorem porta est venenatis viverra. </p>
</div>
<div>
<h2>Heading 2</h2>
<p>Aliquam laoreet diam sed ligula varius porta. Morbi volutpat ullamcorper diam, </p>
</div>
</div>
</body>
</html>
Is this a bug? Can I avoid this behavior?
An h2 tag is a block element and may have some default padding assigned to it by the browser. Be sure to include a CSS Reset file (for example, this one), to remove that unwanted formatting.
Based on your given code i create the fiddle below -
Fiddle: http://jsfiddle.net/TtYn3/
Demo: http://jsfiddle.net/TtYn3/embedded/result/
As per required image in H2 tag and the padding issue solved in other columns.
Your divs are table cells and you don't set any vertical-align anywhere, so everything ends up baseline-aligned. The baseline of a cell is the bottom of the first line of text (more or less), so the bottoms of the first lines end up vertically aligned with each other. If the lines have very different heights (as in this case, because the image gives its line an 80px ascent), you get white gaps above the shorter lines.
If you don't want the cells to baseline-align, set their vertical-align to whatever value you want (sounds like top in your case).
Because you have display set to table-cell, your divs will behave just like they are in a table, and will stretch to the height of your tallest div (in each case, the div with the image inside an <h2>.
Second, you are using <div id="col3">. Id is only to be used in CSS for when you will call that CSS only once. You should assign col3 to a class instead of id, so that it can be used over and over on your page.
If you remove the display:table and table-cell attributes, your divs should shrink to their correct sizes.
Also, display:table-cell does not work in IE6 or IE7 (not that big of an issue these days, but still).
H tags and P tags always have default top and bottom padding / margins and it depends on the browser. I always set a class for them and set the margin to 0 and the padding to 0 unless I'm looking for some spacing, in which case I will set my own via css.
I have an issue with float and have included the sample code below. I am trying to create a two column layout: I know how to do this a number of other ways so this question is with a view to finding out why FLOAT behaves the way it does here.
The container DIV has two DIVs, both are floated left.
As expected, the size of the browser window determines whether or not the second floated block level element will go alongside or under the first floated element.
The problem arises with the length of the content in the second floated DIV (assume the browser window is maximized, at whatever resolution).
In the code below, I have commented out part of the second paragraph. On my browser this is the cut off mark: including any content after this causes the whole DIV to clear the first DIV, even though there is a lot of space left in the second DIV before it should need to clear the first DIV.
I cannot see anything in the code that should cause this to happen. I am aware of how float behaves in terms of block level and inline content and the consequences of placing non-floated blocks beside floated ones, but I cannot find anything in the documentation to explain why the block should clear when there seems to be sufficient room for its content.
Help much appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS Float Problem</title>
<style>
body {
background:#5c604e;
}
#container {
position:relative;
background:yellow;
}
p {
background-color:#cccccc;
width:50%;
}
.block {
width: 200px;
height: 200px;
}
.float {
float: left;
}
.pink {
background: #ee3e64;
}
.blue {
background: #44accf;
}
</style>
</head>
<body>
<div id="container">
<div class="block pink float">Lorem ipsum dolor sit amet consectetuer Nam fringilla Vestibulum massa nisl. Nulla adipiscing ut urna ipsum Curabitur urna lacinia pretium feugiat Ut.
</div>
<div class="blue float"> <h2>Test Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum erat a neque eleifend vitae ultrices nisi tempor. Praesent facilisis lobortis nisl, <!--sit amet gravida orci mollis vitae. Maecenas porta turpis id urna porta id ornare velit dapibus. <!-- Proin sollicitudin, tortor viverra posuere mattis, nisl est rhoncus urna, nec elementum augue turpis vitae diam. Pellentesque ut quam sit amet elit tempus suscipit nec vel nulla. Proin ullamcorper sollicitudin metus in posuere. Aliquam a vehicula odio. Morbi scelerisque arcu ac nibh cursus ullamcorper. Aliquam pulvinar commodo nunc nec laoreet. -->
</p>
</div>
</div><!--end of container div -->
</body>
</html>
See it at http://cssdesk.com/86cPH
In your example, you have two block-level element floated next to each-other. Because they're block-level, they establish a new containing context in which their contents will live and affect layout.
The standard behaviour when calculating box sizes for floated elements is to base it on the contents of the element. Because your second floated box doesn't have an explicit width, the browser determines that its width should be based on its contents, which in the case of the floated element is going to be as wide as its contents can feasibly be.
Thus, the second box flows underneath the first because the intrinsic width of the paragraph affects the blue box, which is larger than the allotted explicit constraints of its container (i.e., the width of #container minus the width of the first floated element).
If you wanted the text to flow around the floated element, you should omit the "blue" box. Only when the float and the contents are nested in the same container (and the content isn't a block-level element) will the content then flow around the pink box as one might expect.
As far as getting a working two-column layout with equal-height columns, I'd recommend trying display: table if you don't need to support IE7.
What you want to achieve? you haven't fixed the width of second block and so its width is going mad with the content length.
Give it a fixed width.
If you want that rest width is covered by it then try this.
.block1 {
width:20%;
}
.block2 {
width:80%;
}
and in html
<div class="block1 pink float"> ..content.. </div><
div class="block2 blue float"> ..whatever content.. </div>
remember there should be no space between closing div of left block and opening div of right block else whitespace between them will cause them to stacked over one another