i would like to create html like this :
text start with "we all grew up, reiterating to oursleves...." have 2 lines with image, and 3rd like start with left alignment
i take following elements for this ;
<ul class ="ariticaldiv">
<li>
<div>
<img src="../Images/DefaultPhotoMale.png" alt="" />
<span>Think About there benefits , Your Brand is your Equity</span>
<span><span>By : xxxxx</span><span>Director Of HR</span></span>
<span><span>Post:</span><span>March 3,2014</span></span>
<label>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx some long text here xxxxxxxxxxxxxx</label>
</div>
</li>
</ul>
how could i do that ?
If you render float the image, you'l obtain what you desire:
HTML:
<img src="../Images/DefaultPhotoMale.png" alt="" class='floated_image' />
CSS:
.floated_image
{
float:left;
margin-right:10px;
}
try this
<div>
<p style="width: 250px">
<img src="../Images/DefaultPhotoMale.jpg" alt="" style="float: left; width: 50px; height: 50px;margin:2px" />
<span>Think About there benefits , Your Brand is your Equity
By : xxxxx Director Of HR
Post: March 3,2014
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx some long text here xxxxxxxxxxxxxx
</span>
</p>
Related
Here is the HTML and then the CSS. As you can see the aside is covering all the li items. The CSS is using the aside tag to add the border around all of these elements, but it is only adding a border around the first li item. I have tried adding a separate aside element around each li to overcome this but this didn't work. I have inspected using chrome dev tools and couldn't understand why this is happening.
<aside>[enter image description here][1]
<h5><strong>Related posts</strong></h5>
<ul>
<li class="related-post">
<img
src="img/mantyping.jpg"
alt="mantyping"
width="100"
height="70"
/>
<div>
<a href="Howtolearnwebdevelopment.html" class="related-link"
>How to learn web development</a
>
<p class="related-author"><strong>By Jonas Schmed</strong></p>
</li>
</div>
<li class="related-post">
<img
src="img/csspower.jpg"
alt="lightning"
width="100"
height="70"
/>
<div>
<a href="Unknownpowersofcss.html" class="related-link"
>The unknown powers of css</a
>
<p class="related-author"><strong>By Jim Dillon</strong></p>
</li>
</div>
<li class="related-post">
<img
src="img/javascriptcode.png"
alt="javascript code"
width="100"
height="70"
/>
<div>
<a href="javascriptisawesome.html" class="related-link"
>Why Javascript is awesome</a
>
<p class="related-author"><strong>By Matilda</strong></p>
</li>
</div>
</ul>
</aside>
aside {
background-color: #f7f7f7;
border-top: 5px solid #1098ad;
border-bottom: 5px solid #1098ad;
padding: 50px;
width: 500px;
}````
[1]: https://i.stack.imgur.com/1hIls.png
I am not sure if you are looking forward to adding a border to all list items or want to add a border to the entire aside. In this solution, I'm showing how you can add borders to each list of items. If you want to add a border to the entire <aside>, just replace the .related-post class with aside. Be careful about the code formatting with correct opening and closing tags, else it may break the UI.
/* aside { */
.related-post {
background-color: #f7f7f7;
border: 5px solid #1098ad;
padding: 50px;
width: 500px;
list-style-type: none; /* It removes the bullet */
}
<aside>
<h5>
<strong>Related posts</strong>
</h5>
<ul>
<li class="related-post">
<img src="https://image.shutterstock.com/image-photo/smiling-young-man-sit-table-600w-1939452445.jpg" alt="mantyping" width="100" height="70" />
<div>
How to learn web development
<p class="related-author">
<strong>By Jonas Schmed</strong>
</p>
</div>
</li>
<li class="related-post">
<img src="https://image.shutterstock.com/image-vector/vector-illustration-abstract-electric-lightning-600w-1706216764.jpg" alt="lightning" width="100" height="70" />
<div>
The unknown powers of css
<p class="related-author">
<strong>By Jim Dillon</strong>
</p>
</div>
</li>
<li class="related-post">
<img src="https://image.shutterstock.com/image-photo/digital-technology-software-development-concept-600w-2111828198.jpg" alt="javascript code" width="100" height="70" />
<div>
Why Javascript is awesome
<p class="related-author">
<strong>By Matilda</strong>
</p>
</div>
</li>
</ul>
</aside>
Hope it helps.
I'm trying to figure out how to both place a caption beneath a picture and move text down. I'm trying to move the text that contains the second unorganized list down.
The figcaption with the text "Crazy Baby" appears on the top right of the picture it's supposed to be under. My understanding was figcaption would accomplish that although I'm clearly doing something wrong.
<div class="container">
<div class="jumbotron">
<div class="text-center">
<h1>The Golden Babies of 3 Orchard Lane</h1>
<p style="font-size: 30px;"><em>The Snady and Baby Maya</em></p>
<img src="http://oi63.tinypic.com/2ijkend.jpg" alt=" haha, sucks" class="Sandy">
<figcaption> <em>Snady Babushka</figcaption> </em>
<font size="5">
<ul>
<strong> Sandy loved</strong>
<li>Her red ball</li>
<li>Hiding in her jungle</li>
<li> Crossing her paws in an X</li>
<li> And most of all her big brother, Jonah </li>
</ul>
</font>
<br>
</div>
<img src="http://oi68.tinypic.com/8yb2f4.jpg" align="left" alt="I'm so sorry you can't see my baby face" class="Maya">
<figcaption><em>Crazy Baby</figcaption></em>
<font size="5">
<ul id="cap">
<div class="text-center">
<strong>Maya Loves</strong>
<li>Tennis balls</li>
<li>People more than dogs</li>
<li>Greeting someone as they enter the house</li>
<li> And of course, her big brother, Jonah</li>
</ul>
</div>
</font>
</div>
</div>
Without seeing your CSS, this is what I'd recommend trying. First thing I would do it make sure you tags are placed in the correct order. In your unordered list, you have the div starting inside the tag, but ending outside of it.
<ul id="cap">
<div class="text-center">
<strong>Maya Loves</strong>
<li>Tennis balls</li>
<li>People more than dogs</li>
<li>Greeting someone as they enter the house</li>
<li> And of course, her big brother, Jonah</li>
</ul>
</div>
Should look like this
<div class="text-center">
<ul id="cap">
<strong>Maya Loves</strong>
<li>Tennis balls</li>
<li>People more than dogs</li>
<li>Greeting someone as they enter the house</li>
<li> And of course, her big brother, Jonah</li>
</ul>
</div>
Then what you can do it with that div, give it a certain width, say the width of the image. Then float both the image and the list, left.
.text-center {
width: 100px; (Just an example)
}
.text-center img,
.text-center ul {
float: left;
}
I have a problem with changing images by hover effect. Actually I can change image if the images are one on the top of the other but I need something different.
I need to change the images when I mouse over another image. Like;
<div id="gallery">
<div>
<img src="images/team-large.jpg" alt="Img">
</div>
<ul>
<li>
<img src="images/elek2.jpg" alt="Img" title="Elektronik Alt Sistemler">
</li>
<li>
<img src="images/su.jpg" alt="Img" title="Sualtı Akustik Sistemler">
</li>
<li>
<img src="images/yazılım.jpg" alt="Img" title="Yazılım, Bilgi Teknolojileri ve Simülasyon">
</li>
</ul>
</div>
This is my HTML Code and I need to change
<img src="images/team-large.jpg" alt="Img">
this image when I mouse over the other sub images but I'm stuck.
Addition;
How can I change other images by onmouseover and onmouseout commands??
<div id="gallery">
<div>
<img src="images/team-large.jpg" id="Img1" name="Img1" class="Img1" alt="Img1" />
</div>
<ul>
<li>
<img src="images/elek2.jpg" alt="Img" title="Elektronik Alt Sistemler"
onmouseover="'#Img1'.src='images/elek3.jpg'" onmouseout="'#Img1'.src='images/team-large.jpg'">
</li>
<li>
<img src="images/su.jpg" alt="Img" title="Sualtı Akustik Sistemler" class="thumbnail">
</li>
<li>
<img src="images/yazılım.jpg" alt="Img" title="Yazılım, Bilgi Teknolojileri ve Simülasyon" class="thumbnail">
</li>
</ul>
</div>
I added the ID name to Img1 and tried to change the image when I mouse over 'images/elek2.jpg' but it doesn't work.
Thanks for help.
You could alter the background image using css's :hover instead. Something like:
div{
height:200px;
width:200px;
background:url("http://placekitten.com/g/200/200");
}
div:hover{
background:url("http://placekitten.com/g/200/400");
}
<div></div>
For what you're looking for, you might need the child or sibling selector:
.parent{
height:300px;
width:300px;
background: url("http://placekitten.com/g/300/300");
}
.child{
height:200px;
width:200px;
background: url("http://placekitten.com/g/200/200");
}
.parent:hover .child{
background: url("http://placekitten.com/g/200/300");
}
<div class="parent">
<div class="child"></div>
You may try this jQuery code to change source of main image
var original = $('#main').attr('src');
$('.thumbnail').mouseover(function()
{
var source = $(this).attr('src'); // retrieve image source of hovered image
$('#main').attr('src', source); // update main image source
})
.mouseout(function() {
$('#main').attr('src', original); // restore original image source
});
jsFiddle code (UPDATED)
In the linked snippet, I've assigned a main id to main image and a thumbnail class to other images. This allows to access them runtime via jQuery.
I have a question about floating elements inside of <li> tag.
I have following markup
<li>
<img src="concept-truck.jpg" alt="2013 Toyota Tacoma" id="itemImg" style="float:left">
<p>2013 Toyota Tacoma</p>
<p>Price : 450000$</p>
<p>Year : 2013</p>
<p>more</p>
</li>
In FF, IE works fine, but in Chrome list numeration floats image too.
How to fix it? Thanks
I would rewrite your example like this:
<li>
<div style="float: left;">
<img src="concept-truck.jpg" alt="2013 Toyota Tacoma" id="itemImg">
</div>
<div style="float: left;">
<p>2013 Toyota Tacoma</p>
<p>Price : 450000$</p>
<p>Year : 2013</p>
<p>more</p>
</div>
<div style="float: none; clear: both;"></div>
</li>
This is written with inline-style CSS attributes, which I usually tend to avoid, but as in your example, I wrote it like you did - inline.
Hi there,
I am trying to build a web page and i have the following problem. I tried to upload a photo but I cannot because I don't have enough votes. I have a contacts page and my problem is that there is a huge gap between the contacts (little photos with people) and the grey layer in the bottom (please vote for me so that I can upload a photo to show you what I mean). I am really confused and I don't know where the problem might be. Here I give some information:
I have created two lists (divs) with photos and contacts (in this picture you can see 2 photos of the leftlist (as i called it) div and one photo of the rightlist div.
The CSS for these two are the following:
#leftlist {
width:430px;
position: relative;
left: 0px;
top: 0px;
bottom: 720px;}
#rightlist {
width:430px;
position: relative;
left: 450px;
bottom: 720px;
top: -670px;}
These two divs I placed them inside the white box as you can see from the photo which I named container. The CSS for container is:
.container {
width:950px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;}
Here I add the whole code of the container including whats inside:
<div class="container">
<div class="box">
<div class="border-top">
<div class="border-right">
<div class="border-bot">
<div class="border-left">
<div class="left-top-corner">
<div class="right-top-corner">
<div class="right-bot-corner">
<div class="left-bot-corner">
<div class="inner">
<h2> </h2>
<h2 align="center">Sales and Customer Service Team</h2>
<h2 align="center"><br />
<br />
</h2>
<div id="leftlist">
<ul class="list2">
<li>
<img alt="" src="images/blabla.jpg" />
<h4><strong>blabla </strong>
President<br />
<br />
<span class="style100">Email: blabla#sblabla.it</span><br />
<span class="style100">Tel: +39 02 00000001</span><br />
</h4></li>
<li></li>
<br />
<li>
<img alt="" src="images/blabla.jpg" />
<h4><strong>blabla </strong>
General Sales Manager<br />
<br />
<span class="style100">Email: blabla#blabla.it</span><br />
<span class="style100">Tel: +39 02 00000023</span><br />
</h4>
</li>
<li></li>
<br />
<li>
<img alt="" src="images/blabla.jpg" />
<h4><strong>blabla </strong>
Sales Manager<br />
<br />
<span class="style100">Email: blabla#sblabla.it</span><br />
Tel: +39 02 00000021<br />
</h4></li>
<li></li>
<br />
<li>
<img alt="" src="images/lara.jpg" />
<h4><strong>Lara blabla</strong>
Sales and Logistics<br />
<br />
<span class="style100">Email: lara.blabla#blabla.it</span><br />
Tel: +39 02 00000022<br />
</h4></li>
<li></li>
<br />
</ul>
</div>
<div id="rightlist">
<ul class="list2">
<li>
<img alt="" src="images/blabla.jpg" />
<h4><strong>blabla</strong>
Laboratory Manager and Quality Control<br />
<br />
<span class="style100">Email: blabla#blabla</span><br />
Tel: +39 02 00000020<br />
</h4></li>
<li></li>
<br />
<li>
<img alt="" src="images/blabla.jpg" />
<h4><strong>blabla</strong>Technical Department<br />
<br />
<span class="style100">Email: blabla#blabla.it</span><br />
Tel: +39 02 00000012<br />
</h4></li>
<li></li>
<br />
<li>
<img alt="" src="images/blabla.jpg" />
<h4><strong>blabla</strong>Safety Manager<br />
<br />
<span class="style100">Email: blabla#blabla.it</span><br />
Tel: +39 02 00000011<br />
</h4></li>
<li></li>
</ul>
</div>
</div>
<div align="center"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- box end -->
</div>
Tip: there are more photos and contact details that are not visible in the photo I upload as i wanted to show you the gap between the container div and the next div (grey layer).
I am really sorry in advance if I am asking something stupid but I've been working on this for 8 hours now and I can't seem to find a solution. Maybe the solution is really stupid but my brain feels like its frying right now :p
Right, there are a couple of issues with the code you have here, most notably the number of divs you are using (I assume that's just for the rounded corners?). However I believe your issue is caused by the positioning of the #leftlist and #rightlist. I can't see a reason for these to be position:relative (also when used you should only set the top value or the bottom value, not both (e.g. 'top:0px' OR 'bottom:0px').)
What is happening is you are moving the #rightlist from it's default position under the #leftlist. Because you are using position:relative and not position:absolute the original position is retained. The extra whitespace you are seeing is where the #rightlist should, by default, appear.
I would not use position in this instance. A better alternative is to use 'float:left' on both lists. If you do this your css will end up being the same for each list - try this:
#leftlist
#rightlist {
width:430px;
float:left;
}
This may collapse the #container div which can be fixed in a number of ways, the simplest being adding 'overflow:hidden;height:100%' to #container. A quick google search should provide many more options if required.
Another alternative would be to use 'display:inline-block' instead of 'float:left' although this can cause issues in older browsers - it really depends on what browsers you need to support.
Hope this helps put you on the right track. Please leave a comment if I'm not being clear and I'll edit my response!
You could try the following in order to attempt to identify where the problem lies:
Install the Web Developer add-on in Firefox, load up your page then use the 'Outline Block Level Elements' option to get a visual display of all the elements that make up your page.