I have a Menu with an image for the list items, and I want to join those images with an horizontal line.
<ul>
<li>
<img src="foo/bar.png">
</li>
<li>
<img src="foo/bar2.png">
</li>
</ul>
To explain it better I show 2 images:
I want to convert
into
I don't know the css needed to position a 'line.png' like that or to make it in pure css.
Kronen,
Hope this link will helps...
[http://jsfiddle.net/Karthik_Dev/mwjzcnqe/][1]
Make sure the line image will be in size of 1 X 4 in px.
Comments are welcome
There are many ways to achieve this, but using your approach, just try this:
ul{background:url(images/line.png) repeat-x 50%; display:block;}
li{display:inline-block}
where line.png is a line just as in your image
<div>
<img src="foo/bar.png">
<img src="foo/bar.png">
</div>
div {
height: 20px;
border-bottom: 4px #ddd;
}
div a {
display: block;
float: left; // or display: inline-block and centered on parent div
margin: 0 10px;
width: 44px;
height: 44px;
}
Related
I'm trying to put the following two <div> elements on the same row. How should I do this?
<nav>
<div class="logo" style="background:#00f; margin-right:100px; margin-left:1150px;">
<img src="jiasaz-4.png" width="100px" height="100px">
</div>
<div class="menu" style="background:#f00;">
<img src="jiasaz-4.png" width="100px" height="100px">
</div>
</nav>
Here you go, Use this css
.logo, .menu{ display:inline-block'}
You can use table for that. If you don't want to use table then use CSS float property.
float : left;
position: Relative;
display:inline;
Hope it will help.
I will try to keep it short ;). There are multiple ways of doing that. Main part is trying to keep it simple and understand each step you take. Then step by step everything (CSS & HTML) makes sense.
.logo {
display: inline-block;
width: 100px;
}
.logo img {
max-width: 100%;
}
.menu {
display: inline-block;
height: 80px;
}
/* just to color up things */
header { background-color: tomato }
.logo { background-color: firebrick }
.menu { background-color: wheat }
<header>
<div class="logo">
<img src="http://www.jiasaz.com/wp-content/uploads/2015/08/jiasaz-4.png">
</div>
<nav class="menu">
<ul>
<li>Item1</li>
<li>Item1</li>
</ul>
</nav>
</header>
Just a one suggestion. Separate CSS from HTML. This will make it a lot easier to read and maintain when project becomes bigger - trust me ;).
Take look on HTML:
We have two elements - logo and menu which are wrapped by header.
The header element represents a container for introductory content
or a set of navigational links.
.. maybe this is too long .. I'll create another post
Try this:
.logo{ float: left;
display: inline;
width: 25%;}
.menu{ float: left;
display: inline;
width: 60%;}
/* you can use the 15% remaining for padding in menu and logo class*/
nav{
padding: ;/* try different value */
}
I have a div with a picture in it, next to this is a div with some text including some lists (li) and the dots for the li's should be on the right side of the picture, but in IE11 it's shown in the div with the picture, on the left side.
Ive made a jsfiddle to explain it better here: http://jsfiddle.net/tD8an/6/
HTML:
<div id="container">
<div id="pic">
<img src="http://www.wallcore.net/wp-content/uploads/2013/09/funny_pic_of_a_monkey-280x280.jpg"/>
</div>
<div id="text">
<b>HEADLINE</b>
<ul>
<li>Li 1</li>
<li>Li 2</li>
</ul>
</div>
</div>
CSS:
#container {
width: 700px;
float: left;
}
#pic {
width: 300px;
float: left;
text-align: center;
margin: 0 15px;
}
#text {
width: 700px;
}
Is there any fix or something I can do? Am i doing something wrong?
First thing you can do is changing the position of the bulletpoints to inside. I don't see any downsides here.
ul {
list-style-position: inside;
}
Alternatively you could create a new block formatting context with overflow. But the text will not flow around the image then.
#text {
overflow: hidden;
}
<ul> is not a valid child element of <p>
Also, your widths are incorrect.
The container is 700px, but the pic is 300px and the text is 700px, so overflow issues are expected.
Setting the width of the text to 370px and float:left is one solution.
I am having trouble creating a different image to appear when you place your curser over the original image. Heres my code without the rest of my listed buttons:
<nav class="buttons">
<ul>
<li class="left">
<a class="home" href="www.google.com">
<img src="img/Home_2.png"></a></li>
</ul>
</nav>
Css:
.buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;}
.buttons ul{list-style-type: none; margin:0px; padding:0px}
.left{float:left}
.home:hover {background: url(../img/Home_crack.PNG)}
Any suggestions?
EDIT: Okay great suggestions, however when I hover over the "home button" now the stuff in the float tweeks out. Heres the code with the full float properties:
HTML:
<nav class="buttons">
<ul>
<li class="left">
<a class="home" href="www.google.com">
<img src="img/Home_2.png"></a></li>
<li class="left">
<a href="www.google.com" class="menu">
<img src="img/Menu_2.png"></a></li>
<li class="right">
<a href="www.google.com" class="about">
<img src="img/About_2.png"></a></li>
<li class="right">
<a href="www.google.com" class="contact">
<img src="img/Contact_2.png"></a></li>
</ul>
</nav>
CSS:
.buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;}
.buttons ul{list-style-type: none; margin:0px; padding:0px}
.left{float:left}
.home:hover img{display:none}
.home:hover {background: url(../img/Home_crack.PNG);}
.right{float:right}
Basically i wanted to separate 4 buttons.... one in the left float and one in the right float, then on the hover, the buttons would change to a different image....With the new img{display:none} the left float rapidly flashes.
If you want a different img on :hover, you can add it via the :after psuedo element with a background-image.
This approach works well for dynamic img dimensions.
jsFiddle here - different img will be displayed on :hover of a.
a:hover:after {
content: "\A";
position: absolute;
z-index: 99;
width: 100%;
height: 100%;
background: url('http://...');
top: 0px;
left: 0px;
}
You're changing the background of the <a> tag, which happens to be completely filled with the <img>. As such, the background is effectively invisible because the img is completely covering it. Try putting in a
.home:hover img { display: none }
rule as well to hide the img when you are hovered. That'll allow the background to "show".
Try adding the following line, this will hide the orriginal image when hovering the link:
.home:hover img {
display: none;
}
I think the other image is being showed, but the default image won't dissapear and is simply before the hover image.
Now, I do also recommend you to change the display style of the a element to block and give it a fixed size like so because the a element will get a size of 0 when hiding the image element:
.home {
display: block;
width: 100px;
height: 100px;
}
Finally I recommend you to have the default image as a background in the a element too, just to make sure it will appear exactly the same as the hover image. Now you are using an img element to show the default image, a different element to show the hover image. I recommend you to prevent this, and try to use one single element. Simply add this line to achieve this:
.home:hover {
background: url(../img/Home_2.png)
}
Hope this helps!
In addition to everyone else here saying to add this to the css:
.home:hover img { display: none }
You will also need to add a height and width to the a tag that you are putting a background on or the tag will have no content in it and it will not show at all.
.home:hover {
background: url(../img/Home_crack.PNG)
width: [enter the width of the bg image];
height: [enter the height of the bg image];
}
How do i create a link like this with HTML and CSS:
It does not respond as i hoped it would.
What i try to accomplish is create a navigation link that hold a image on the left, and 2 lines of text right next to the image and not below the image.
html:
<div id="nav">
<img src="http://www.werkenbijavl.nl/images/WerkenBijAVL/icon-email.png" heigh="24px" width="24px" alt=""> Line 1<br><span>Line 2</span>
</div>
css:
nav a {
background: grey;
padding: 10px;
text-align: center;
text-decoration: none;
line-height: 24px;
vertical-align: middle;
}
nav img {
padding-right: 10px;
}
nav span {
font-style: italic;
}
Inline-block should fix your issues: http://jsfiddle.net/sZnaR/
The HTML:
<a href="#">
<img src="blah" />
<span class="text">
Line 1<br/>
Line 2
</span>
</a>
The CSS:
a {
display: block;
text-decoration: none;
}
a img {
display: inline-block;
width: 30px;
height: 30px;
}
a span {
display: inline-block;
}
Your text elements render as inline elements, and because of that, wrap underneath the image.
You're better off putting the image as a background image on the link using CSS then using Padding to align the text to the image, making sure you've allowed enough padding for the text to clear the image on the left. Also, use the background position to position the image to the right or wherever if you need it there. It also makes the HTML a lot cleaner and easier to read.
edit if you need dynamic images for each link you can always use an inline style to specify the background-image url.
You can also do this by floating it to the left.
Like this
<span style="line-height:15px;float:left">Line 1<br>Line 2</span>
Working Fiddle
HTML:
<div id="nav">
<a href="#">
<img src="http://www.werkenbijavl.nl/images/WerkenBijAVL/icon-email.png" heigh="24px" width="24px">
<div>
Line 1<br>
Line 2
</div>
</a>
</div>
CSS:
#nav img, #nav div{
float: left
}
This will make "Line 1", "Line 2" - and whatever lines you put in their - be always to the right of the image.
If you want text to wrap around the image, change your CSS to be:
#nav img{
float: left
}
I need some help centering some images
HTML:
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
<br>
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
CSS:
ul.thumbs {
clear: both;
padding-left: 0px;
}
ul.thumbs li {
display: inline-block;
/*float: left;*/
padding: 0;
margin: 5px 10px 5px 0;
list-style: none;
}
a.thumb {
padding: 2px;
display: block;
border: 1px solid #ccc;
}
ul.thumbs li.selected a.thumb {
background: #DAA12F;
}
a.thumb:focus {
outline: none;
}
ul.thumbs img {
border: none;
display: block;
height: 120px;
width: 120px;
margin: 0px auto;
}
I need the images be centered together so that they remained lined up. Ive tried using:
ul.thumbs {
text-align:center;
}
but since there are a different number of images on each row, they move out of alignment
Thanks for the help, this is driving me crazy
EDIT: I thought I found a solution using this as a guide: http://www.tightcss.com/centering/center_variable_width.htm but if the images go over more than row, they no longer center. Originally I put a br tag to break up the rows and that fixes the problem, but a JS library Im using doesnt play nice with br tags between list items. Any suggestions (you can see the issue here http://jsfiddle.net/HvZva/26/)
There is two solutions to this, one is if you want your images to be centered and the another is if your images should be aligned left, but centered on the page.
Center block, left align images
To do this you need to add the following to your css (or see: http://jsfiddle.net/HvZva/20/)
ul.thumbs{
margin:0 auto;
width:416px;
}
what I do is basicly to tell the browser that this un ordered list should have an equal margin to both sides. But since this object has an width of 100% as standard, we need to specifiy that aswell, and in this case it is 416px.
Center align images
If this is static content, one easy way to do this is to add a div with the class of center that wraps each line, and then adding "text-align:center;" to those divs, that will do the trick.
note: there is one new way to center the block, but aligning the images to the left. but that involves the box flex model and css 3, and it has not yet been implemented by browsers yet
Applying text-align: center; to .thumbs.noscript ul fixes it in the jsfiddle
You can give the parent element a width and apply margin-left: auto; margin-right: auto;
http://jsfiddle.net/HvZva/13/
ul.thumbs {
display:inline-block;
text-align:center;
}
Something like this? http://jsfiddle.net/HvZva/11/
I may have mis interpreded your issue but is it something like this you want?
http://jsfiddle.net/HvZva/12/