<li>
<a href="viewBook.php?bookId=<?=$bookId?>">
<img style="float:left; clear:left; padding-left:10px; width:50px; height:75px;" src="http://dummyimage.com/50x75/000/fff" / >
<span style="line-height:75px; padding-left:5px; color:grey;"><?=$count?>.</span>
<span style=""><?=$title?></span>
</a>
</li>
because i wanted to make a large clickable anchor area, so i have to throw everything inside an anchor. problem is because my title may be multiple lines. how could i actually vertically align to center of the image and preventing the next line of title from going below of the image.
demo link: jsfiddle.net/9wJRG/3
You can drop the two span elements and replace them with a single span element like this:
<li>
<a href="viewBook.php?bookId=<?=$bookId?>">
<img src="http://dummyimage.com/50x75/000/fff"/>
<span id="text">
<?=$count?>. <?=$title?>
</span>
</a>
</li>
and then use the following CSS for that span:
#text {
display: table-cell;
width: 100px;
height: 75px;
padding: 10px;
vertical-align: middle;
}
Working example on jsFiddle.
Hope this helps !
Related
I want to have multiple images on the same line with a caption below each image.
I can put images on the same line using the display:inline tag. When I add the figure tag, they are moved to different lines.
I tried multiple variation and can't get it to work.
Am I using the wrong tags for the job? I've seen this on other sites, but don't know how they do it.
CSS
section.products{
width: 100%;
padding:5px;
line-height:100%;
margin-top: 5px;
float: left;
text-align: center;
}
img.fans {
text-align: center;
max-width: 100%;
height: 50px;
width: 50px;
}
a {
color: #000000;
text-decoration: none;
font-weight: bold;
}
p {
text-align:center;
align: center;
}
figure {
display:center;
}
ul.fans li{
display: inline;
}
HTML
<section class="products">
<h1>Fans</h1>
<p>
<ul class="fans">
<li>
<a href="#">
<figure>
<img class="fans" src="images/shrouded.JPG" alt="Shrouded" style="Float"</img>
<figcaption>Shrouded</figcaption>
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="Float"</img>
<figcaption>Shallow Recess</figcaption>
</figure>
</a>
</li>
</ul>
</p>
</section>
You've got a couple things wrong.
You didn't close your image tags properly
you have in inline style of "float" which is not valid
This should help get you what you're looking for.
Css
ul.fans li {
display: inline-block;
}
figcaption {
text-align: center
}
Html
<section class="products">
<h1>Fans</h1>
<p>
<ul class="fans">
<li>
<a href="#">
<figure>
<img class="fans" src="http://placehold.it/300/300" alt="Shrouded"/>
<figcaption>Shrouded</figcaption>
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
<img class="fans" src="http://placehold.it/300/300" alt="Shrouded" />
<figcaption>Shallow Recess</figcaption>
</figure>
</a>
</li>
</ul>
</p>
</section>
Codepen Example
with html 5 the proper way to put an image tag is like so
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" />
You dont need a tag because you never finished opening the tag, it seems like you are mixing the old way of doing things like this
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded"></img>
display inline will make the li act as if they are a p tag or any other inline element.
The reason they are going to new lines when you add a figcaption is because figcaptions are display: block. block display types will always push items to the next line. with css you can change the display types of items like you did with the li elements.The figure tag is also a block element.
when you write html please always indent when there is nesting (an element inside of another one)
Also the style="Float" is not valid css. anything in between the "" will be css and it is called inline css. It is best to not have css inline because it can cause problems when trying to change the css the majority of elements later on.
you can add css in the top of your document with the style tag. like so
<style type="text/css">
ul.fans li {
display: inline;
}
</style>
You will want to correct the closing tag and get the css in the right spot, and make sure you do not do inline css (style="float:left;").
Since stated from the answer before that you probably don't need a list for this because lists are for breaking into new line, you will probably want to do something like this instead
<style type="text/css">
.fans li{
display: inline;
}
.fans .captioned-image {
display:inline-block;
width:200px;
}
.fans figure {
width: 200px;
display:block;
text-align:center;
}
img {
max-width:200px;
}
</style>
<section class="products">
<h1>Fans</h1>
<p>
<div class="fans">
<div class="captioned-image">
<a href="#">
<figure>
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="" />
<figcaption>Shrouded</figcaption>
</figure>
</a>
</div>
<div class="captioned-image">
<a href="#">
<figure>
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="" />
<figcaption>Shallow Recess</figcaption>
</figure>
</a>
</div>
</div>
</p>
</section>
In creating a custom tree, I am using a image followed by a label. The issue is when the label overflows it goes under the image, rather I need it to be aligned with the starting point of text. How do I do that with css.
Sample code:
<html>
<body>
<div class="maindivclass">
<ul>
<li id="TR_239984" class="liclass">
<img src="http://dummyimage.com/32x16" class="imgclass" />
<label class="labelclass">This is a long text to show wrapping of the text from the box edge</label>
</li>
<li id="TR_239985" class="liclass">
<img src="http://dummyimage.com/32x16" class="imgclass" />
<label class="labelclass">This is another long text to show wrapping of the text from the box edge</label>
</li>
</ul>
</div>
</body>
</html>
Please check a sample here
I need to make it look like : http://imgur.com/Yp9hC
I need image and text seperate because clicking either does 2 different things, so cant use background image for list style, unless its possible using that also.
Thanks
Try this - DEMO
li {
position: relative;
list-style: none;
}
li img {
position: absolute;
}
li label.labelclass {
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
margin-left: 32px;
display: block;
}
This would be a perfect time to use CSS floats. Float both the image and the label to the left and give them defined widths. Make sure to "clear" the float on the .liclass
See http://codepen.io/imjared/pen/EDgHc
Try this:
.maindivclass {
width: 300px;
}
li {
float: left;
position: relative;
list-style: none;
}
.img_container {
float: left;
width: 40px;
padding: 0px;
}
li label.labelclass {
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
float: left;
width: 250px;
}
HTML
<li id="TR_239984" class="liclass">
<div class="img_container">
<img src="img.png" class="imgclass" />
</div>
<label class="labelclass">
This is a long text to show wrapping of the text from the box edge
</label>
</li>
I added a class .img_container because it just simplified setting the width without skewing the img.
Fiddle here
Hear I give you the best code for it.
HTML:
<div class="wrapper">
<div class="box-one">
<img src="http://dummyimage.com/32x16" />
</div>
<div class="box-two">
This is a long text to show wrapping of the text from the box edge. This is a long text to show wrapping of the text from the box edgeThis is a long text to show wrapping of the text from the box edge.
</div>
<div class="clear"></div>
<div class="box-one">
<img src="http://dummyimage.com/32x16" />
</div>
<div class="box-two">
This is a long text to show wrapping of the text from the box edge. This is a long text to show wrapping of the text from the box edgeThis is a long text to show wrapping of the text from the box edge.
</div>
<div class="clear"></div>
</div>
CSS:
.clear{
clear:both;
}
.wrapper{
width:800px;
background:#E6E6E6;
}
.box-one{
float:left;
width:50px;
margin-bottom:30px;
}
.box-two{
float:right;
width:750px;
}
Hope this definitely helps you. Cheer.
I'm displaying a list of links for voting, similar to Hacker News. I want the following layout for each link:
The gray boxes highlight the four divs for each link listed.
The key thing I need to do is get the "other text" div to be left-aligned with the link headline text.
I could define the width of the rank and arrow divs (the two little boxes), of course, and then indent the other text div accordingly. But this implementation has some downsides relative to my specific needs -- which I won't go into -- and more importantly, I just feel like there should be a more elegant way to achieve this. Something like a clear bottom for the rank and arrow divs, or maybe a property of the link headline div that tells the following div to appear directly below it.
Any ideas?
Why not just put the two right containers in one?
<div class="rank">9</div>
<div class="arrow">arrow</div>
<div class="content">
<div class="row1">Link headline text</div>
<div class="row2">other text</div>
</div>
<br class="clear" />
style:
.rank, .arrow, .content {
float: left;
}
.clear {
clear: left;
}
EDIT: Demo on jsfiddle
Solution 1
It seems that all four boxes for each item are in one bigger box (li maybe), so I would use:
<li>
<span class="num"></span>
<span class="upvote"></span>
<span class="main">main text</span>
<span class="add">more text</span>
</li>
and
.add { clear: both; float: right; }
Solution 2
Other solution would be padding on parent of each group of four and then negative margin-left together with float: left on number and upvote links.
Anything better can be tailored to your needs, but we need to see HTML :)
I'd go for a combination of the answers given by #Adam and #Czechnology, and use a list to display the content, and put the Link headline text and other text boxes into a single parent div. Like so:
HTML:
<ol class="headlines">
<li class="news-item">
<div class="rank">9</div>
<div class="arrow"><img src="arrow.png" /></div>
<div class="content">
<h2>Link headline text</h2>
<div class="additional-content">other text</div>
</div>
</li>
<li class="news-item">
<div class="rank">10</div>
<div class="arrow"><img src="arrow.png" /></div>
<div class="content">
<h2>Link headline text</h2>
<div class="additional-content">other text</div>
</div>
</li>
</ol>
Style:
ol.headlines {
display:block;
list-style-type:none;
list-style-position:outside;
margin:0;
padding:0;
}
div {
border:1px solid #00F;
}
ol.headlines .rank, ol.headlines .arrow, ol.headlines .content {
float:left;
}
.news-item {
clear:left;
}
ol.headlines h2,
ol.headlines .additional-content {
display:block;
}
You can find a sample of this here: http://jsfiddle.net/DEWtA/
Note that you'll need to alter the CSS to your needs with regards to the size of the divs and such.
Why not provide a wrapper element for the link headline text and the other text? Then float the wrapper instead.
http://jsfiddle.net/userdude/H3qPt/
HTML
<div class="linkblock">
<span class="score">100</span>
<span class="arrow">^</span>
<div class="linkdata">
<div class="linkurl">Link headline</div>
<div class="linktext">Other text</div>
</div>
<br/>
</div>
CSS
Some of this is just for demonstration.
.linkblock .score,
.linkblock .arrow,
.linkblock .linkdata {
float: left;
}
.linkblock br {
clear: both;
}
div, span {
border: 2px solid #ddd;
margin: 4px;
padding: 3px;
}
div.linkdata {
border: none;
padding: 0;
margin: 0;
}
You can contain the those two things into divs and then for the left div with the voting stuff, label the div with a class, "vote", and have the following CSS:
.vote {
margin: 0 0 100%;
}
I haven't tested it, but it should work like a charm.
Caveat: Doesn't work well with responsive design :(
The best solution would probably be to wrap 'link headline text' and 'other text' within a 'div' and use 'overflow: hidden;' on it.
When i have a div with position: absolute, and in it is another div with position: absolute the inner div will position in the frame given through the outer (wrapper) div.
Now i want to create a class (css) called error_message that positions itself exactly in the center middle of the site, indifferent from where the it is called, so i need it to break out of every div wrapped around the error_message div.. how do i do this?
i had a similar problem with positioning a hoover-text centered below a floated image button list.
for me the solution was using the "fixed" value for the "position" property
position: fixed
then you can position your error message from top left of the body again.
i use another wrapper div to position all hoover texts center center.
found the solution here:
CSS nested Div with position absolute?
the code is not the code from the picture you see, the picture is just for illustration.
stylesheet in less format (see http://lesscss.org/)
<style>
.button
{
float: left;
position: relative;
a
{
&:hover, &:focus
{
.titlePos
{
.title
{
display: block;
}
}
}
.titlePos
{
position: fixed;
top:50%;
left:50%;
width: 400px;
margin-left: -200px;
.title
{
position:relative;
display: none;
top: 130px;
text-align: center;
}
}
}
</style>
html:
<div id="wrapper">
<div id="content">
<ul>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text1</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text2</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text3</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text4</div>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
You should try using css's position:fixed property, instead of position:absolute, for the error div. position:fixed will position an element based on the browser window, with no regard for where it falls in the DOM. If you want it to be centered in the window, regardless of window size, you could make the fixed-position div cover the entire screen (left: 0, right: 0, etc). and then text-align the error message inside of it.
I'm not sure why would you want that div to break out of parent div. Maybe try working on a fresh html structure for those?
http://haslayout.net/css-tuts/Horizontal-Centering and http://haslayout.net/css-tuts/Vertical-Centering
These should help you out!
I think the only way to have a div break out of all parent divs is to have an absolute positioning on all of them, which will obviously create its own set of problems.
Why not simply have a pre-defined, hidden div as a direct child of the body, instead of wrapping it in the markup. You can then easily position it as you want, and insert the error messages in it with the help of jQuery. An obvious advantage to this method is that you would only have to write this div once, and dynamically insert the error message into it. I would even suggest having a look at jQuery UI which allows you to easily create dialogs, both normal and modal, besides tons of other features.
UPDATE
Since JS is not allowed, an easy way to do this would indeed be displaying the div only if there was an error. So the PHP code would be ...
if (isset($error)) {
echo '<div class="show_error">' . $error . '</div>';
}
... and the CSS class for it would be ...
.show_error {
width: 400px; // error element's width
height: 200px; // error element's height
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; // minus half the height
margin-left: -200px; // minus half the width
}
Of course, you can further style the error div as you wish, but these are needed to position it dead-center.
Hope this helps !
I have found a solid CSS solution here:
https://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent/
Let’s add another parent and move the position:relative one level up
(or, in your context, you could maybe simply use an existing upper
parent).
HTML
<div class="grand-parent">
<div class="parent">
<div class="child"></div>
</div>
</div>
CSS
.grand-parent {
position: relative;
}
.parent {
/*position: relative;*/
overflow: hidden;
}
.child {
position: absolute;
top: -10px;
left: -5px;
}
Result:
I have the following li item:
<li>
<span style='float:left; background-color:red'>a</span>
<span style='float:left; background-color:green'>b</span>
</li>
I'd like the span on the right to fill whatever width is remaining in its parent li. Is there a way to do that?
Thanks
You don't want to float each of them left, only the first one, and then make the second one display in block mode:
<li>
<span style="float:left; background-color:red">a</span>
<span style="display: block; background-color:green">b</span>
</li>
Looked for the same solution, but found only this which worked great for me:
<li>
<span style='display: table-cell; background-color:red'>a</span>
<span style='display: table-cell; width: 100%; background-color:green'>b</span>
</li>
All you need is just using table-cell displaying and set filler span width to 100%. All other solutions I've tried didn't work for me as expected.
Don't float the second one, and make it display:block.
http://jsfiddle.net/ymAt5/
You can use the grid layout:
<li class="my-grid">
<span class="left">a</span>
<span class="right">b</span>
</li>
And the css :
.my-grid {
display: grid;
grid-template-columns: max-content auto;
}
.left{
background: red;
}
.right{
background: blue;
}
Play with the grid-template-columns property so it suits your needs.
https://jsfiddle.net/c9j3ok7u/