I'm currently developing a small photo cms for a friends, she uses Flickr, so that what i use to get the images, or i use a gem called Flickraw. I have to somehow know when the image is a third in a row out of three, and the second out of three, and so on. Here's an screenshot which illustrates what it does.
(sorry about it is danish)
So basicly i want the middle image to be in the middle, the left to the left, and the right to the right. i have lik 8 rows .. and it is dynamicly.
Thank you!
PS. i wan't as much as possible to not use tables.
Here is my suggestion.
HTML
<div class="photo-row">
<div class="photo">Left</div><div class="photo">Center</div><div class="photo">Right</div>
</div>
CSS
.photo-row .photo {
background-color: rgb(230,230,230);
display: inline-block;
vertical-align: middle;
width: 33.33%
}
.photo-row .photo:nth-child(1) { text-align: left; }
.photo-row .photo:nth-child(2) { text-align: center; }
.photo-row .photo:nth-child(3) { text-align: right; }
Example: http://jsfiddle.net/xYZjL/
That's if you don't have control over the images and adding class names. If you DO have control you'd be safer to use class names in place of nth-child.
You are dynamically creating the page, so you can have the HTML element for each first image have class="first", each second class="second" and each third class="third".
Then you can use CSS to define float and clear layout rules for each.
Related
First post so I am unsure of the format works for post but I have created a site as a newbie in which I got it to work on desktop but when on mobile, the right hand side of the website goes over another text instead of under. Any thoughts? I have trouble with getting the side bar update to appear where I want to. The solution now is to add the code between two left side divs which in turn, when minimized, the stripo goes over there divs and the following ones.
My trouble is that if i put the div at the end of the code, then the div only appears next to the last div then going down. The website is http://clinicalresearch-apps.com/index.html. Thank you.
HTML CODE
<div class="col-md-5">
<br>
<div class="navigation">
Center for Biostatistics Updates
<br>
<div class="my-text">
<p><font size="4"> Application cycle open for our Center for Biostatistics-sponsored 1-year MS in Biostatistics Program in Theory and
Methods! Learn more here
<br>
<p><font size="4">Apply now for our Center for Biostatistics-sponsored 1-year MS in Biostatistics
Program in Clinical Applications geared specifically for clinically-trained professionals! Learn more here
</div>
</div>
</div>
CSS CODE
.navigation
{
position:absolute;
left: 20px;
padding-left: 10PX;
background-color:#221f72;
opacity: .9;
width:502px;
height:745px;
color:white;
}
First off let me say good job for creating the site as newbie, many comments on what you could be doing better but awesome start, everyone starts somewhere.
Your have two main issues:
1) Your class of "navigation" is causing issues with it's current rules.
2) You are not utilizing bootstrap html/css correctly.
First update your class to something like this:
.navigation {
background-color: #221f72;
opacity: .9;
width: 100%;
height: auto;
color: white;
padding-bottom: 15px;
padding-left: 20px;
padding-right: 20px;
padding-top: 15px;
}
Removing the position : absolute solves a lot, let the element flow naturally.
Add this for your video iframes, particularly for mobile:
.navigation iframe { width: 100%; }
Next, since you are already using bootstrap, utilize it correctly. Bootstrap specifies that you should place columns inside of rows, and your rows inside of a container. You have columns and a container, but not rows around your columns!
You looks like you want to have the main column be col-md-7 and the right/side column be col-md-5, surround both of these with a <div class="row"></div>, then seeing what you get. Remember to refer to the docs: https://getbootstrap.com/docs/3.3/css/#grid
Use media screen, you can control it through its width size. Make the position relative instead of absolute
I am really bad with css and html, can somebody help with this simply problem?
On the bottom of the [site][1] i have text and sharing icons. How can i make them in one row? Like on right from text. It looks horrible now.
Thank you!
here:
this css should work:
.text-muted {
display: inline-block;
}
div.ya-share2 {
display: inline-block;
float: right;
margin-top: 20px;
}
explain: it makes both elements able to coexist in the same line, plus the margin-top is just for aligning it.
add that to your CSS file and youre good to go
I'm fairly new to CSS / HTML, but usually can figure something out. Not with this issue though... I've spent 2 days trying to fix it with no joy
Using WP 3.9.1 and WooThemes Mystile which comes with a custom css to make changes in; no child theme needed. When I place images with captions on a page using left align, some will and others vigorously refuse. In older WP, it was always align all images left to create rows, but not with 3.9.1 it seems. I've tried everything I can think of, but those images that are supposed to be aligned left are actually right of center.
Using Firebug or Safari Inspector, I've tried to align them left and even using a negative margin-left will not place the image where it belongs. It's almost like there's some kind of page break, for lack of a better term, that is making it set right of center. Like it thinks that position is left.
I am not using any gallery or plugin, just adding images to the pages with captions in the text box, not visual. Most of my Galleries under Store are a mess. :(
Here's an example of one: Tuscany Gallery Most of the Galleries I want 2 landscape in a row or 3 verticals. Sometimes with an odd number of images I might center 1 - 3 images, but most are left align.
Any help would be very appreciated! Thanks!
Re: the Body css code
I have a few color changes and more div#attachmet_number (didn't think you needed all them), but this is about it.
:active, :focus {
outline-style: none !important;
-moz-outline-style:none !important;
}
a {
outline-style: none;
-moz-outline-style: none;
}
a:before {
outline: none !important;
}
a:imag {
outline: 0px none;
}
#sidebar .post-46 {
display: none !important;
}
article.post-46 img.alignleft {
margin: 0 1.618em 1em 16px;
}
.post .alignleft, .type-page .alignleft {
margin-bottom: 50px;
}
.post-282 .wp-caption img, .type-page .wp-caption img {
margin: 0 0 0 0.4em;
}
div#attachment_283 {
margin-left: 42px;
}
div#attachment_286 {
margin-left: 42px;
}
div#attachment_291 {
margin-left: 42px;
}
I'm not quite sure if that's what you need or not. The div#attachment_number is the image within a box with caption (title) below it.
HTML of images with caption
[caption id="attachment_516" align="alignleft" width="407"] Duomo di Pisa[/caption]
Following your comments above on your question, your fourth photo (Autumn Drive) specifically is getting pushed to the right by the bottom edge of your second photo (Duomo di Pisa).
It appears that you've added a specific width to each div in your HTML. If you were to add there also a specific, equal height to each div, then they would align and allow the divs below to float to the left.
A greater ideal might be to declare a class for your landscape-oriented divs in your CSS, define a uniform width and height there, and assign that class to all landscape-oriented divs. That way, you could easily change that width and height in one place, and it would apply to all divs with that class assigned (and multiple classes can be assigned to a single div; just separate them by spaces, like class="landscape framed dark" for example).
I want to build a list of itens. Each item should be in one line, like several paragraphs.
Why my div.empresa elements are on same line? I think they should be on different lines because the display property of them is block.
Take a look at code:
http://jsfiddle.net/Yz8Cq/
You need to remove float: left;
#ListaDeEmpresas .arrow {
height: 50px;
width: 20px;
background: url("/Content/SetaBrancoh40.png") no-repeat center center;
background-color: #A9462F;
}
http://jsfiddle.net/spacebeers/Yz8Cq/5/
Floats can be a bit tricky to get your head around at first. This article is excellent - http://css-tricks.com/all-about-floats/
Actually, removing float: left from the label will make the arrow span appear to the left of the label. Assuming you want the arrow spans to continue to show up on the right of the labels, then you want to add:
#ListaDeEmpresas div.empresa {
clear: left;
}
This will make sure each label/span set appears below the previous one.
Get rid of the float: left; in #ListaDeEmpresas .arrow
The float: left; is making them do that.
I am trying to create a block of photos on my webpage (Which has a set width, I didn't copy that part of the code over). I have put the code into the JSFiddle link below.
http://jsfiddle.net/T2qHR/12/
I will recreate what I am trying to do on a graphic editor. Click here to view it: http://www.flickr.com/photos/adpartners/6630840127/in/photostream
I'm not sure what I am doing wrong with my css/html. Everything is stuck on the left because I used float left in one of my div tags. I really want the background to be centered, which it is, then have the images over the top of it, like so: 3 photos, 2 photos, 1 photo, 2 photos. They will all link to youtube videos, which I have already got the links already for that part of it.
Any help would be much appreciated. I have done 10-20 different versions of this code with
p, div, table, ol/li tags, and honestly don't know which one to use for this now.
If you see what I am doing wrong, please fill me in. I'm at a loss of code!
Many thanks for any help you might offer,
R
Use display: inline-block and text-align: center instead.
div.floatingPic { display: inline-block; padding: 12px; }
div.containerVid { border: 2px solid #99cc99;
background-color: #000000;
padding: 45px;
height: 890px;
border-radius: 10px;
margin-bottom: 25px;
text-align: center; }
As long as .containerVid is wide enough, images will continue to stack up until they no longer fit in the row. If you want to force a break early, simply add a <br /> (as you've been doing).
fiddle: http://jsfiddle.net/T2qHR/20/