I'm trying to follow this tutorial, but I'm hitting a strange css issue. I am getting a text overflow issue, and I don't know why. Also the last span element is not being shown. I am not a web designer, so any information why this is happening and how to fix it would be awesome.
Thanks!
Image of the Problem
HTML
<div id="suggestions" style="display: block; ">
<p id="searchresults">
<a href="/benefits/1" id="1">
<img src="/system/images/benefits/images/1/thumb_download.png?1309194040">
<span class="searchheading">Eric's Awesome Gym</span>
<span>
At this great gym we strive to make friends. Located in the middle of the grenage village, we are a great location woth tons of resutarnts near by.
</span>
</a>
<span class="seperator">Load More Results</span>
</p>
</div>
CSS
#suggestions{ position: absolute; right:73px; width:320px; display:none; }
#searchresults { border-width:1px; border-color:#919191; border-style:solid; width:320px; background-color:#a0a0a0; font-size:10px; line-height:14px; margin: 0;}
#searchresults a { display:block; background-color:#e4e4e4; clear:left; height:56px; text-decoration:none; }
#searchresults a:hover { background-color:#b7b7b7; color:#ffffff; }
#searchresults a img { float:left; padding:5px 10px; }
#searchresults a span.searchheading { display:block; font-weight:bold; padding-top:5px; color:#191919; }
#searchresults a:hover span.searchheading { color:#ffffff; }
#searchresults a span { color:#555555; }
#searchresults a:hover span { color:#f1f1f1; }
#searchresults span.seperator { float:right; padding-right:15px; margin-right:5px; }
#searchresults span.seperator a { background-color:transparent; display:block; margin:5px; height:auto; color:#ffffff; }
Remove height from your a element and clear your floats:
http://jsfiddle.net/CQzMF/4/
All code in sample.
#suggestions{ position: absolute; right:73px; width:320px; display:none; }
#searchresults { border-width:1px; border-color:#919191; border-style:solid; width:320px; background-color:#a0a0a0; font-size:10px; line-height:14px; margin: 0;}
#searchresults a { display:block; background-color:#e4e4e4; clear:left;text-decoration:none; }
#searchresults a:hover { background-color:#b7b7b7; color:#ffffff; }
#searchresults a img { float:left; padding:5px 10px; }
#searchresults a span.searchheading { display:block; font-weight:bold; padding-top:5px; color:#191919; }
#searchresults a:hover span.searchheading { color:#ffffff; }
#searchresults a span { color:#555555; }
#searchresults a:hover span { color:#f1f1f1; }
#searchresults span.seperator { float:right; padding-right:15px; margin-right:5px; }
#searchresults span.seperator a { background-color:transparent; display:block; margin:5px; height:auto; color:#ffffff; }
.clear {clear:both;height:1px;font-size:1px;line-height:1px;}
<div id="suggestions" style="display: block; ">
<p id="searchresults">
<a href="/benefits/1" id="1" class="clearme">
<img src="/system/images/benefits/images/1/thumb_download.png?1309194040" width="50" height="100">
<span class="searchheading">Eric's Awesome Gym</span>
<span>
At this great gym we strive to make friends. Located in the middle of the grenage village, we are a great location woth tons of resutarnts near by.
</span>
<div class="clear"></div>
</a>
<span class="seperator">Load More Results</span>
</p>
</div>
Alternatively you can also use overflow:hidden on a - just remove height from it and you don't need a anymore in the code.
I fixed you a little more solid solution using overflow:hidden and a little bit more validator friendly.: http://jsfiddle.net/CQzMF/19/ check it out also.
#searchresults a img { float:left; padding:5px 10px; }
its because of that. the element is floating. add a clear:both div underneath the span.seperator to expand the containing div container:
<div style="clear:both">&nspb;</div>
or remove the float right from the text. Or better wrap it into a span which you style with display:block and float:right.
your image link is too long try shortening it and I would have to agree with the guy above try a step by step code refactoring
Related
I am trying to put a title in a div toolbar next to some pictures. The problem is that my text is not well placed, it should be at least on top of the toolbar but instead it is at bottom and doesn't move.
I would like it to be in the vertical middle at left near the pictures.
Here is a codepen : http://codepen.io/anon/pen/fDojK
And a picture :
Here is the html part of the title bar:
<div id="bar" >
<div id="picturesmenu">
<img src='images/back.jpg' alt='back' />
<img src='images/home.jpg' alt='home' />
<img src='images/reload.jpg' alt='reload' />
</div>
<div id="titlemenu">Main</div>
</div>
<div id="body">
...
And style :
#bar
{
width:100%;
height:50px;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
vertical-align:top;
}
#picturesmenu
{
margin:0;
padding:0;
display:inline;
}
#bar img
{
border:3px solid white;
width:40px;
margin:2px;
}
#titlemenu
{
margin:0;
padding-left:20px;
height:100%;
display:inline;
font-size:20pt;
font-weight:bold;
color:white;
}
#bar span
{
margin-left:20px;
margin-top:200px;
font-size:20pt;
font-weight:bold;
color:white;
}
I tried vertical align and margin but the "Main" text doesn't move...
Thanks in advance before I change anything into tables ;)
[EDIT]
Thank you all for your answers ! I didn't thought about handling the alignment of the content (#titlemenu) instead of the container (#bar), it's not very logical...
You need to work the vertical align for both #picturesmenu and #titlemenu and remove the padding left for that title if you want it to the left. Then work with inline-block elements. Like this:
EDITED WITH CROSS-BROWSER CODE
html, body {
height:100%;
width:auto;
padding:0;
margin:0;
background-color:black;
}
#bar {
width:100%;
height:auto;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
display:block;
}
#picturesmenu {
margin:0;
padding:0;
}
#bar img {
border:3px solid white;
width:40px;
margin:2px;
display:inline-block;
vertical-align:middle;
width:40px;
height:50px;
}
#titlemenu {
margin:0;
padding-left:0px;
display:inline-block;
vertical-align:middle;
font-size:20pt;
font-weight:bold;
color:white;
}
.item {
float:left;
width:120px;
height:120px;
border:2px solid white;
text-align:center;
margin:20px;
padding:20px;
}
.picitem {
height:70%;
margin-bottom:25px;
border:2px solid white;
}
.textitem {
underline:none;
color:black;
font-size:16pt;
color:white;
}
I have forked your CodePen
However, a way better approach would be to give #bar a display:block property and then add inline-block to everything inside, but if you want it to work as in your description, there you go
Add these lines to the #titlemenu in CSS
padding:10px;
display:inline-block;
vertical-align:top;
By vertical-align:top, the block gets aligned to the top of the parentdiv and you set padding to fit the height of the block to the height of the parent div
Demo
so i have a situation where i want text to appear over an image using visibility:hidden/visible and also playing with opacity. i cannot do it for some reason. Note that this is in a list because i have other images displayed in the same list but here i am only showing one. below is the html:
<ul>
<li>
<a class="pic" href="#">
<img alt="" src="/servlet/servlet.FileDownload?file=00PU00000096kH2MAI" style="width: 300px; height: 160px;" />
</a>
<div class="hovertext"> my hover text</div>
</li>
</ul>
and the css is here:
#gallery ul{
margin:0;
padding:0;
list-style:none;
}
#gallery li{
display:block;
float:left;
width:310px;
height:170px;
margin:0 15px 15px 0;
}
#gallery li a{
display:block;
float:left;
width:300px;
height:160px;
margin:0;
padding:4px;
}
#gallery li a:hover {
color:#FFFFFF;
opacity:0.6;
background-color:#666666;
}
#gallery li a:hover .hovertext{
visibility:visible;
}
.hovertext{ width:300px; height:85px;
background-color:#666666;
opacity:0;
visibility:hidden;
display:block;
text-align:justify;
color:#000000; font-size:20px;
}
all this does is allow me to see that the image is opaque and i can see that the div is in the background but i just cannot bring it forward to display in front of the opaque text. Any help would be greatly appreciated.
Look at the following code.
#gallery li a:hover .hovertext{
visibility:visible;
}
The above code will look the child element of hovertext when you hover the link. In your case, it is siblings element. So update your CSS like below.
#gallery li a:hover + .hovertext{
visibility:visible;
}
Also you have added opacity:0 for hovertext class. I think there is no need for that one. Because already you have visibility:hidden for the same class. So update your CSS like below.
.hovertext{ width:300px; height:85px;
background-color:#666666;
visibility:hidden;
display:block;
text-align:justify;
color:#000000; font-size:20px;
}
DEMO
Im trying to align my title, image and paragraph to the left of my news image.
And Im using float left for doing this but its not working,
Im having this:
But Im trying this:
Do you see where might be the problem?
My fiddle with the problem Im having:
http://jsfiddle.net/upH4U/1/
My html:
<div id="news-content">
<h1>News</h1>
<article id="loop-news">
<div class="img_container">
<img src="../image1.jpg" title=""/>
</div>
<h2><a href="#" >Title of the news</a><br /></h2>
<span id="date">Tuesday, May, 2014</span>
<p>
This is my paragraph and I want to align it to left of my image.
see more
</p>
</article>
<article id="loop-news">
<div class="img_container">
<img src="../image1.jpg" title=""/>
</div>
<h2><a href="#" >Title of the news</a><br /></h2>
<span id="date">Tuesday, May, 2014</span>
<p>
This is my paragraph and I want to align it to left of my image.
see more
</p>
</article>
</div>
My css:
#news-content
{
float:left;
width:480px;
background:#f3f3f3;
}
#news-content h1
{
font-size:20px;
font-weight:100;
margin-bottom:10px;
color:gray;
text-align:left;
}
#loop-news
{
width:400px;
margin-bottom:10px;
text-align:center;
}
.img_container
{
width:160px;
height: 165px;
float:left;
cursor: pointer;
border:3px solid #ccc;
}
#loop-news h2 a
{
font-size:20px;
color:#3B5998;
text-decoration:none;
margin:0 auto 0 5px;
font-weight:100;
float:left;
}
#loop-news a
{
font-size:14px;
text-decoration:none;
margin-left:2px;
}
#loop-news #date
{
font-size:13px;
font-weight:normal;
color:#7a7a7a;
}
#loop-news p
{
font-size: 13px;
text-align:justify;
line-height:25px;
word-spacing:-2px;
width:300px;
float:left;
margin-left:5px;
}
quick answer, use clearfix - there are a few options there
CSS
#loop-news
{
width:400px;
/*margin-bottom:10px; moving margin to seperator*/
/*text-align:center;*/
}
#loop-news p
{
font-size: 13px;
/*text-align:justify;
line-height:25px;
word-spacing:-2px;
width:300px;
float:left;*/
margin-left:5px;
}
#loop-news {
overflow:hidden; /*quick clear fix*/
}
.loop-news-content {
overflow:hidden;
}
#loop-news *:first-child { margin-top:0; }
#loop-news *:last-child { margin-bottom:0; }
#loop-news h2 { margin:0; }
.loop-news-meta { margin-top:0; }
Heres the updated fiddle
http://jsfiddle.net/Varinder/HTNk8/2/
Here's a page to show how to align text relative to an image:http://www.w3schools.com/tags/att_img_align.asp
your width is overflow; dont use it or fix it
#loop-news p
{
font-size: 13px;
text-align:justify;
line-height:25px;
word-spacing:-2px;
float:left;
margin-left:5px;
}
float the image to the right like this fiddle
float:right;
You need to clear your float by adding clear:left; to the same class that uses float: left. In your case, you can use the CSS declaration:
#news-content article { clear: left; }
Also, having multiple elements with the same ID can have unexpected results. You should consider using classes instead.
Hi i'm trying to make a div within the front page of my site that contains a floating img and some floating text h3, p and a . I then want to loop the div below with different text/pic . When i do this once it works fine but the container div hasn't stretched to fit the content . So when I add another below it overlaps .
code:
<div id="blog">
<h1>BLOG</h1>
<div id="postcont">
<img src="blog1.png" width="40" height="40" />
<h3>Playing At The Phenoix</h3>
<p>So we arrived down at the phenoix about 10 past ten .Rommy was all ready out of it and wasn't sure if he could do...read more </p
>
</div>
<div id="postcont">
<img src="blog1.png" width="40" height="40" />
<h3>Playing At The Phenoix</h3>
<p>So we arrived down at the phenoix about 10 past ten .Rommy was all ready out of it and wasn't sure if he could do...read more </p
>
</div>
</div>
#blog {
float:left;
width:400px;
border-top:#0FF solid 6px;
}
#postcont {
padding:10px;
border-top:1px #FFF solid;
margin-top:10px;
}
#blog h1 {
font-size:20px;
color:#FFF;
padding:10px;
padding-left:0px;
letter-spacing:2px;
}
#blog p {
font-size:15px;
color:#FFF;
float:right;
clear:right;
width:300px;
margin-right:30px;
letter-spacing:2px;
margin-top:5px;
}
#blog a {
font-size:15px;
color:#FFF;
float:right;
clear:right;
width:300px;
margin-right:0px;
letter-spacing:2px;
margin-top:5px;
font-style:italic;
text-decoration:underline;
}
#blog h3 {
font-size:15px;
color:#FFF;
float:right;
clear:right;
width:300px;
margin-right:30px;
letter-spacing:2px;
margin-top:5px;
font-weight:bold;
}
#blog img {
float:left;
clear:left;
}
Block-level elements to not expand to the height of floated elements unless you tell them to. You should add a clearing-element after the last floated element to fix this problem. Instead of:
</div>
</div>
Use:
</div>
<br style="clear: both"/>
</div>
For an extended explanation of this solution, as well as an alternative solution, please see: http://www.quirksmode.org/css/clearing.html
I am trying to create a little growl like div for a site. It works great in Firefox, but not IE6 (haven't tried IE7, but I still need to support IE6).
In Firefox: Centered text with image floated to right side of div
In IE6: Centered text with image to the left of text.
I've tried switching the img and span tag order, but that causes a line break in FF between the two, and IE renders the image on the right of the text, but not docked to the right side of the div.
HTML
<div id="growl">
<img src="close.gif" class="action" title="hide" />
<span class="text">Grrrrrr.......</span>
</div>
In css:
#growl {
background-color:yellow;
text-align:center;
position:absolute;
top:0; left:0;
width:98%;
padding:10px 0;
margin-left:1%;
z-index:10;
border:1px solid #CCCCCC;
}
#growl > .text {
font-size:120%;
font-weight:bold;
}
#growl > .action {
float:right;
cursor:pointer;
}
The > selector does not work on IE 6.
Just get rid of it:
#growl .text {
font-size:120%;
font-weight:bold;
}
#growl .action {
float:right;
cursor:pointer;
}
The > css selectors are not supported by IE6, try just removing them.
No point in adding a class to each elements in the div when you only have one img and span. Do this instead for cleaner code.
<div id="growl">
<img src="close.gif" title="hide" />
<span>Grrrrrr.......</span>
</div>
-
#growl {
background-color:yellow;
text-align:center;
position:absolute;
top:0; left:0;
width:98%;
padding:10px 0;
margin-left:1%;
z-index:10;
border:1px solid #CCCCCC;
}
#growl span {
font-size:120%;
font-weight:bold;
}
#growl img {
float:right;
cursor:pointer;
}