I'm helping an artist maintain her website and have inherited some pretty outdated code. Have moved lots of redundant common code to include files and am now working on moving from inline styles to more CSS-driven styles.
For the gallery pages, e.g. http://artistsatlaketahoe.com/abstract.html, a lot of inline styling is used to force the current layout. My preference would be to replace this entirely with CSS that presents the following table-like layout within the "content" div:
[image] [image descriptives and purchase button]
[image] [image descriptives and purchase button]
[image] [image descriptives and purchase button]
I'd like to middle-align the image descriptives & purchase button relative to the image if possible. And then apply some padding above and below each row to stop using tags for vertical spacing.
Any ideas how to create a div that I can use to get this kind of layout?
Thanks!
Using inline style for simplicity, move to CSS to accomplish your goal.
<div>
<img src="#" style="float: left; padding: 10px 10px 10px 0;" />
<div>
<p>Text</p>
<input type="submit" value="Submit" />
</div>
</div>
<div id="container">
<div id="row" style="display:table-row; margin:5px 0; outline:red solid 1px;">
<div id="image" style="float:left; outline:blue solid 1px;"><img src="#" /></div>
<div id="content" style="display:table-cell; padding:5px; outline:green solid 1px; vertical-align:middle;">
Image Description<br />
<input type="button" value="Button" />
</div>
</div>
</div>
Related
I have this markup:
<div class="girls" style="text-align:center; margin-top:100px">
<img src="images/1.png" />
<img src="images/2.png" />
<img src="images/3.png" />
<img src="images/4.png" />
and this css (I'm using Twitter Bootstrap) :
img {
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
The images have equal width and height and are displayed inline.
On my resolution are ok, fit the entire width (1366px), but on lower resolutions the images don't fit.
So, I need to keep the proportions on every screen resolution ( lower than 1366px in my case)
I've found this picturefill
Which I think is helpful for me, but I'm thinking that it's a simpler solution for my case because I have 4 images which I need to display them horizontally and make them scale on every resolution.
Thanks!
You can set the style width attribute of the images to 25%, without specifying height. That's gonna work if you're always putting 4 images, they have the same width between them and your container div is always at 100%.
HTH
Francisco
If you are using Twitter Bootstrap, then use markup properly like in Twitter Bootstrap documentation:
<div class="row-fluid">
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div class="span3">
<img src="http://placehold.it/350x400"/>
</div>
<div>
http://jsfiddle.net/zNLBG/
I have a small Perl script the loads some external images to page. The images links (50 of them) are all within an array which I iterate through to dump to screen. While I am reasonably good at Perl I have never done any web dev before so I am a complete noob with CSS. I have the following code in the html template
[% FOREACH dvd IN dvd_chart %]
<div class="thumbnail">
<img src="[% dvd.thumbnail %]" />
<br>
</div>
[% END %]
The CSS is this:
.thumbnail
{
float: left;
width: 120px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}
EDIT:
Generated HTML looks like this:
<div class="thumbnail">
<img src="http://content9.flixster.com/movie/11/16/78/11167831_pro.jpg" />
<br>
Taken 2
</div>
<div class="thumbnail">
<img src="http://content9.flixster.com/movie/11/16/86/11168615_pro.jpg" />
<br>
The Possession
</div>
<div class="thumbnail">
<img src="http://content7.flixster.com/movie/11/16/80/11168037_pro.jpg" />
<br>
Won't Back Down
</div>
<div class="thumbnail">
<img src="http://content9.flixster.com/movie/11/16/51/11165143_pro.jpg" />
<br>
To Rome with Love
</div
The problem is the images start to load perfectly, the first two rows are fine, but then there will be a few rows with just one image, followed by more good rows. There are no missing URLs. Can anyone suggest what might be going wrong or even a good tutorial for loading dynamic images into div -that wraps!
I took a look at your HTML and CSS in a JS fiddle, and I saw right away that it's an issue with the height of any item with a longer movie title. A quick Google search for "CSS gallery variable height" brings up this tutorial: http://jonathanweatherhead.com/2012/12/31/how-to-make-a-flowing-css-gallery-layout/
I would follow that. Otherwise, you may have to set a height for all gallery items (not the best plan) or limit the length of the movie titles (also not great).
What I am trying to do is be able to have two columns in a div. So I can insert a picture at any point, and place text long side it neatly.
Here is my html:
<div id="content">
<div id="gallery">
<h1>Gallery</h1>
<div id="container">
<div id="imageleft">
<img src="images/pic1.jpg" width="150px" alt="Image" />
</div>
<div id="imageright">
test
</div>
</div>
<img src="images/pic2.jpg" width="150px" alt="Image" />
<img src="images/pic3.jpg" width="150px" alt="Image" />
<img src="images/pic4.jpg" width="150px" alt="Image" />
</div>
</div>
Here is a perfect working JSFiddle
http://jsfiddle.net/RdyGM/1/
And here is an image of what I actually see. The purple bit should be 50% of left. (The text "test" is placed below).
upon inspection you can see that it is obtaining its width from else where :#
How to use just my desired css.
Well, there are two things you could do. The general approach is to try to make your CSS selector more specific. So you could do: #gallery #content #imageleft, instead of just #imageleft, and that should make your rule apply. The other approach is to change your CSS #imageleft to say:
#imageleft{
....
width:50% !important;
....
}
You can use !important to tell the browser which CSS to prioritise - it might, or might not help...
#imageleft {
float:left;
width:50% !important;
background:#c9c;
}
#imageright {
float:right;
width:50% !important;
background:#9c9;
}
domId.Attributes.Add("property of css", "Your css class name");
I want to create an optimized structure for following output in HTML.
rite now i m using this structure :
<div>
<div style="float:left; padding:5px;">
<img src="avatar_url">
</div>
<div style="float:left; padding:5px;">
Name <br />
Current Mood
</div>
<div class="clr"></div>
<div align="right">
Online Status
</div>
</div>
but in some cases i have to display thousands of friends on one single page thats why i m trying to optimize the structure and remove unnecessary tags from the code.
Can you not paginate the results?
<div class="user">
<img src="avatar.gif" class="user-avatar" />
<h1 class="user-name">Name</h1>
<h2 class="user-mood">Current mood.</h2>
<div class="user-status">Online Status</div>
</div>
This is technically a few less tags however...
This is quite a bit simpler. Depending on how fancy you need to get, almost everything can be stripped away:
<div class="friend">
<img ... />
<hx>FULL NAME</hx>
<p>Current Mood</p>
<p class="status">Online Status</p>
</div>
The hx part is just a stand-in for whatever level of heading you would want to use for their name.
Here's some very minimal CSS to go with that:
.friend img { float:left; margin-right:5px; }
.status { text-align:right; }
Aside from removing the div around the avatar img (can you set the float/padding on the img element itself?), there isn't a lot you can do.
However, you can optimise the amount of text by creating a class for float: left; padding: 5px and using that class instead of the full style thousands of times.
You can't delete a lot there, but you surely can replace the style attribute with a class one
class="left"
with
.left { float:left;padding:5px; }
And you can also replace
<div class="clr"></div>
with
<div class="clr" />
Anyway, not much will change in the loading times.
I am trying to learn more CSS. I inherited a nice layout that I have been using for a little while now and I want to keep the CSS going instead of mixing tables in there. I am currently designing a separate form to handle side by side textboxes. I was using span tags to keep these textboxes side by side but now I'm wondering what the best practice for this type of design would be. Should I use a div container and spans as I was doing or should I just use straight divs and float them as in my example?
<div style="overflow:hidden; width:100%; border:1px solid #000;">
<div>
<div style="float:left"><input type="text" /></div>
<div style="float:right"><input type="text" /></div>
</div>
<div style="clear:left">
<div><input type="text" /></div>
</div>
</div>
As far as markup choices are concerned, it is always a good hint to test your page in a text browser (Lynx, Links, Elinks), and check how it is displayed there. I am usually using some kind of list (ul, ol or dl) for my forms.
Don’t forget to checkout A List Apart’s Prettier Accessible Forms article, which gives a good start for styling forms.
I'm not entirely sure what you're trying to achieve in terms of layout, but you can get the same result using a lot less markup:
<div style="overflow:hidden; width:100%; border:1px solid #000;">
<div>
<input type="text" style="float:left" /><input type="text" style="float:right" />
</div>
<div style="clear:left">
<input type="text" />
</div>
</div>
Make sure you move those in-line styles into class or id definitions too. Avoid having css definitions in your markup.