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");
Related
I have an html structure defined like this:
<div class="container">
<div class=photoItems>
<div class=photoWrapper>
<img class="image" ... />
</div>
<div class=photoWrapper>
<img class="image" ... />
</div>
<div class=photoWrapper>
<img class="image" ... />
</div>
...
</div>
</div>
What I would like to be able to do is use the "container" style to recursively go through its children and locate the first instance of type <img/> and force a display:none;. Kind of like this (non-working css):
.container {
width: 100%;
> img:first-of-type {
display: none;
}
}
From what I understand the 'first-of-type' selector only works at the sibling level, however for reasons I am only able to operate at the "container" level - so is there a way to recursively select the first instance of an image from the styling at the great-grandfather level?
On my own understanding, ">" selector selects the elements that is first descendant of an element. Like for example div > img, this one selects all the img that are first descendant of the div and not the img that is on its second successor.
So, if I didn't misunderstood your question, what you are trying to accomplish is to find the very first img inside the .container class by using the :first-of-type selector. If we base on the structure of your elements, it will never happen. This is because you are using ">" selector but there are no direct descendants of img inside since images are being wrapped inside .photoWrapper class. And if you use div img:first-of-type, this will select all the first instance of image inside the div as well as in its successors.
Sadly, I think there's still no feature/selector on CSS that can find elements to all its successor in accordance to your question. You can read about selectors here:
https://www.w3schools.com/cssref/css_selectors.asp /
https://www.w3schools.com/cssref/css_selectors.asp
Hmm I don't know if you prefer this, but here's my workaround for your question. I will use find('img:first') function of jquery.
Hope this will help you.
$(document).ready(function(){
$('.container').find('img:first').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class=photoItems>
<div class=photoWrapper>
<img class="image" alt="1" />
</div>
<div class=photoWrapper>
<img class="image" alt="2" />
</div>
<div class=photoWrapper>
<img class="image" alt="3" />
</div>
...
</div>
</div>
What about:
.container .photoWrapper:first-child img {
display:none;
}
I have a problem with fixed image width only in Internet Explorer (I have IE8)
First the image is not appear at all when padding is not defined
Second when i specify padding:5px; for the img it appears like this
Note that I can't set a special width for image container div because
below is my code
HTML:
<div class="block_div">
<div>
<div class="img_about">
<img src="test_img.jpg" alt="test_img" width="150" />
</div>
<div class="img_about">
about: "Adapted from Betty Crocker".
</div>
</div>
<div class="clear"></div>
</div>
CSS:
.img_about{float:left; }
.img_about img{padding:5px; }
and if i delete the float from .img_and_text dev it looks normal width:150
try this:
.img_about img { width:150px; height:150px; }
Using inline width tags is only helpfull for e-mail clients these days afaik...
Given the following example at:
http://jsfiddle.net/DLHGs/1/
Is it possible to have the bye element to render below hi, but still remain to the right of the red block? (Rather than on the same line)
To clarify, I dont want to have any uses of <br />, and the float:left applied to hi is not removable, and I dont want to set any other width or height properties other than those already specified.
Edit:
Solution: http://jsfiddle.net/T4XMq/
What about this?
I added float:left to the div wrapping the "hi" and "bye" and also set "bye" to clear:left
<div>
<div style="width:30px; height:300px; background:red; float:left;"></div>
<div style="float:left">
<div style="float:left;">hi</div>
<div style="clear:both;">bye</div>
</div>
</div>
Well i can see that a normal clear:both put bye way under the red box. If you can not make hi float:right instead, and use <div style="clear:right">bye</div>, a simple linebreak will do in this case:
<div style="float:left;">hi</div>
<br />
<div>bye</div>
You can wrap both elements in a div with float:left.
<div style="float: left;">
<div>hi</div>
<div>bye</div>
</div>
Fiddle: http://jsfiddle.net/DLHGs/8/
<div>
<div style="width:30px; height:300px; background:red; float:left;"></div>
<div style="float:left;">
<div style="float:left;">hi</div>
<div style="">bye</div>
</div>
</div>
Here is the code:
<div class="crop">
<img src="image1.jpg" alt="image1.jpg" />
<img src="image2.jpg" alt="image2.jpg" />
</div>
.crop{
float:left;
margin:2px;
overflow:hidden; /* this is important */
position:relative; /* this is important too */
width:320px;
height:240px;
}
.crop img{
position:absolute;
top:-0px;
left:-0px;
}
I'm guessing I need to add something to my CSS? I know a solution would be to put the images as separate divs like this:
<div class="crop">
<img src="image1.jpg" alt="image1.jpg" />
</div>
<div class="crop">
<img src="image2.jpg" alt="image2.jpg" />
</div>
But I have next/previous arrows in my gallery so I need the images to be in the same div otherwise the arrows won't work.
I think the reason they are both appearing in the same place is because they are sharing the same css class, just name them differently with different top/left coordinates.
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.