Problem:
Div newline is hovering div gallery-preview
I'm trying to make gallerys preview and a have made div with table. gallery-preview div is inline, to be in one line with others. How to make newline div be in bottom of gallery-preview divs line? And why newline is hovering gallery-preview?
My HTML:
<div class="content">
<h1 class="title">New Photosets</h1>
<div class="gallery-preview">
<table>
<tr>
<td>
<img src="image.png" class="gallery-preview-big-image" />
</td>
</tr>
<tr>
<td>
<img src="image.png" class="gallery-preview-small-image" />
<img src="image.png" class="gallery-preview-small-image" />
<img src="image.png" class="gallery-preview-small-image" />
</td>
</tr>
</table>
</div>
<div class="newline"></div>
My CSS:
.newline{
width: 300px;
height: 300px;
border: 1px solid black;
}
/* --------------- */
/* Content Gallery */
.gallery-preview{
padding-right: 1%;
display: inline;
float: left;
}
.gallery-preview-big-image{
width: 166px;
height: 166px;
padding-bottom: 10px;
}
.gallery-preview-small-image{
width: 50px;
height: 50px;
padding-right: 4px;
display: inline;
}
/* --------- */
It is probably because of the float property.
Try to add clear:both; into your .newline style.
If this is what you want
Than you just have to remove float:left from .gallery-preview
Related
I'm trying to get the text to display over each individual image, I can't figure out why it's not displaying at all. From what I can tell I don't have the text hidden or anything, it's just not displaying on top of the corrisponding images.
I'm very new to html/css so i'm proberly missing someting quite obvious.
<html>
<body>
<table class="index">
<tr>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Care-Guide.jpg">
Care guides
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Prop.jpg">
Propagation
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Trouble.jpg">
Troubleshooting
</td>
</tr>
<tr>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Easy.jpg">
Easy plants
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Pilea.jpg">
Pilea
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Pets.jpg">
Pets & plants
</td>
</tr>
</table>
</body>
</html>
table.index{
table-layout: fixed;
border-spacing: 25px 35px;
font-size: 20px;
color: #575151;
padding-left: 180px;
padding-right: 180px;
}
table.index td {
height: 220px;
width: 360px;
min-width: 200px;
position: relative;
border: 1px solid black;
background-color: #575151;
vertical-align: middle;
text-align: center;
}
table.index td img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
div.index {
width: 100%;
}
You should put your text in an HTML element for example p tag: <p>Easy plants</p>
Give the p element a relative position: position: relative;
This will position it over the absolutely positioned image.
If you happen to change the order of the images and the text elements later, you should give the text elements a higher z-index value than the images.
I'm trying to get away from using the table layout to do specific layouts. I know it's sloppy programming so I'm redoing it. I can't seem to recreate something like this using the div tag:
<table border=10 cellpadding=10 width="90%">
<tr>
<td align="center" width="143">
<img src="http://blah.com/images/133widepixelimage.jpg">
</td>
<td align="center">
Some text describing the image
</td>
</tr>
</table>
I've got the border, padding, width and alignment all done in a CSS file, and that works fine. But setting the width of the centered image still doesn't allow the centered text to show up to the right of the image. It still wraps to the next line. If I center the image left, and set float: left, that works. But not two centered even if the parent div is wide enough to accommodate.
Try this snippet:
.container{
margin-top: 30px;
width: 90%;
display: flex;
border: 10px solid black;
height: 50px;
border-left-color: gray;
border-top-color: gray;
}
.img{
width: 143px;
}
.img > img{
width: 100%;
}
.container > div {
vertical-align: middle;
line-height: 40px;
text-align: center;
margin: 1px;
border: 1px solid black;
display: inline-block;
}
.text{
flex: 1;
}
<div class="container">
<div class="img">
<img src="http://blah.com/images/133widepixelimage.jpg">
</div>
<div class="text">
Some text describing the image
</div>
</div>
You can do it with divs, using flexbox like the example showed above
I want to make a formatted paragraph whose image is located in left, the text is located in right with CSS.
However, it looks good when I type a single line text, but the top position is changed when I type two-line text or more.
Its source is on
http://jsfiddle.net/RXrvZ/1883/
and the main part of CSS is:
.post-container {
margin: 20px 20px 0 0;
border: 1px dotted #333;
overflow: auto;
}
.greenbox {
display: block;
border: 1px dotted #383;
width: 100%;
}
.redbox {
display: inline-block;
border: 1px dotted #f33;
width: 70%;
height: 100px;
}
.redbox10 {
display: inline-block;
border: 1px dotted #f33;
width: 20%;
height: 100px;
}
And its HTML code is like:
<div class="greenbox">
<div class="redbox10">
<img src="#">
</div>
<div class="redbox">
One Line Text
</div>
</div>
How can I place the top line same whatever I type in?
Thanks for your help.
Set the left column to align at the top.
.redbox10 {
vertical-align: top;
}
JSfiddle
You need to specify vertical align to be top:
.redbox, img{
display: inline-block;
vertical-align: top;
}
Here's the updated demo
you should use float:
.redbox {
float: left;
}
.redbox10 {
float: left;
}
you can give them a margin for some space.
Demo
Demo With Margin
This could be rather simplified if made using a table.
I hope this helps.
.mainTable{
padding: 10px;
}
.outerRow{
padding: 10px;
}
.imageColumn{
border: 1px solid;
padding: 10px;
vertical-align: top;
}
.textColumn{
border: 1px solid;
padding: 10px;
}
<div class="container">
<table class="mainTable">
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
One Line Text
</td>
</tr>
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
Two Lines Text - rai oda bi iod ieo idooosido oiojs oijodif oijoa oijsdf
</td>
</tr>
<tr class="outerRow">
<td class="imageColumn">
<img src="#"/>
</td>
<td class="textColumn">
Three Lines Text - rai oda bi iod ieo idooosido oiojs oijodif oijoa oijsdf hello hello hello hello hello hellohellohellohellohellohello
</td>
</tr>
</table>
</div>
Here is the html code that makes the table:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="profile">
<img src="http://www.teleread.com/wpcontent/uploads/2009/05/image18.png" />
</div>
</td>
<td>Hello</td>
</tr>
</table>
Here is the css:
.profile img {
width: 120px;
height: 125px;
float: left;
margin-right: 4px;
margin-top: 4px;
margin-bottom: 4px;
border: 1px #cc1212 solid;
clear: both;
}
Here is the code in action on jsfiddle:
http://jsfiddle.net/Yeqnn/
THE ISSUE: The word "Hello" is vertically centered in the right column
How do I fix this? BTW, the image has to be in the table and floated left to work with my current theme... any ideas, if so drop an answer plz.
Simply put vertical-align: top; on your <td> elements.
Demo
What I'm trying to do is this:
In text form:
XXX Some text here YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY ZZZZZZZZZ
Body body body Sidebar!
Body body body Sidebar!
Body body body Sidebar!
X, Y, and Z are images (3 images total). Y can stretch along the X axis, and does so above, to fill the available space. (But doesn't cause "Some text here" to get squished and start breaking into multiple lines)
I'd like to keep the "Some text here" part in one line. A line breaking here will not end happily.
Is this possible, or should I simplify the layout around HTML?
My current attempt using tables:
<table cellspacing="0" cellpadding="0" border="0" style="height: 20px; width: 100%;">
<tr>
<td style="width: 205px; height: 20px; background: url('images/horz_bar_left_end.png');"> </td>
<td style="width: 5px; height: 20px; background: url('images/transparent.gif');"/> </td>
<td valign="center" style="height: 20px; white-space: nowrap; font-weight: bold;">THIS IS A TITLE</td>
<td style="width: 5px; height: 20px; background: url('images/transparent.gif');"> </td>
<td style="width: 100%; background: url('images/blue.gif');"> </td>
<td style="width: 190px; height: 20px; background: url('images/horz_bar_right_upper.png');"> </td>
</tr>
</table>
Close... ish. All of the columns (except the one with the text, and the width: 100% one) are ignoring their CSS width attribute in both Firefox and Chrome. This is what it looks like:
My attempt using <div> and all that CSS jazz.
<div style="white-space: nowrap;">
<div style="float:left; width: 25px; height: 20px; background: url('images/horz_bar_left_end2.png');"> </div>
<div style="float:left;">Some Text</div>
<div style="float:left; width: 100%; height: 20px; background: url('images/blue.gif') repeat;"> </div>
<div style="float:left; width: 190px; height: 20px; background: url('images/horz_bar_right_upper.png');"> </div>
<div style="clear: both;"></div>
<div style="float:left; width: 500px;"> body </div>
<div style="float:left; width: 100px;"> sidebar </div>
</div>
...massively fails. It's on like three lines.
For those wanting to play at home, here are the images:
horz_bar_left_end.png:
horz_bar_right_upper.png
transparent.gif: 1x1 transparent GIF
blue.png: 1x1 blue PNG. (#0073e4)
You can do with many way to archive your web layout.
Code update and look at http://jsbin.com/awudi4/
LOL! Let's see if I understand... Try this!
HTML:
<div id="foo">
<h3>This is my CSS title! :)</h3>
</div>
CSS:
#foo {
width:900px;
margin:0 auto; /* center to the screen horizontally */
background:#ccc;
/* increase border radius until it is curvefull! */
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
}
#foo h3 {
font:bold 14px Georgia, Arial, Sans;
color:#333;
margin:0;
padding:25px 0 25px 50px; /* top, right, bottom, left */
}
Simpler? XD
Try this
<table><tr>
<td>XXX</td>
<td>Some text here</td>
<td>YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY</td>
<td>ZZZZZZZZZ</td>
</tr>
</table>
<div style="float:left; width: 100px; background: url(X) repeat-x;"> </div>
<div style="float:left;"> Some Text </div>
<div style="float:left; width: 200px; background: url(Y) repeat-x;"> </div>
<div style="float:left; width: 150px; background: url(Z) repeat-x;"> </div>
<div style="clear: both;"></div>
<div style="float:left; width: 500px;"> body </div>
<div style="float:left; width: 100px;"> sidebar </div>
You can change widths for your wrapper width