I am trying to make a detailed list with images on both sides similar to this
image image
Alist
image image
(There are multiple dt's and dd's too)
My problem is that I can get the images aligned right and the list too but the images come before the list like this.
Image Image
Image Image
Image Image
then the list
I can get it to work with the images in the list but this gives me errors as images cannot be in a list.
This is part of what im using
dl {
text-align: center;
width: 500px;
margin-left:400px;
margin-right:400px;
}
.floatright {
float: right;
}
.floatleft {
float: left;
}
<img class="floatleft" src=....
<img class="floatright" src=...
<img class="floatleft" src=....
<img class="floatright" src=...
<dl>
<dt>heading</dt>
<dd>details
</dd>
<dt>heading</dt>
<dd>details etc...
</dd>
</dl>
you could do it like this using divs to surround the list, and use inline-block styling.Although inline styling is frowned upon, i felt its easier to demonstrate it like this for simplicity sake, you could always move it to an external css file if you would like to
<html>
<body>
<div style="width:780px; border:red solid 1px;">
<img src="http://www.html-helper.net/wp-content/uploads/2013/07/HTML.jpg" width="150" height="150"/><img src="http://www.html-helper.net/wp-content/uploads/2013/07/HTML.jpg" width="150" height="150"/>
<div style="display:inline-block; border:solid black 1px; vertical-align: top;">
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</div>
<img src="http://www.html-helper.net/wp-content/uploads/2013/07/HTML.jpg" width="150" height="150"/><img src="http://www.html-helper.net/wp-content/uploads/2013/07/HTML.jpg" width="150" height="150"/>
</div>
</body>
</html>
I did this to dl
font-size:25px;
margin-left:auto;
margin-right:auto;
and here you can see the output result http://jsfiddle.net/u2peomur/
The width and height of images are set to 50. You can change according to your need. Also change the font-size as you desire
Related
<body>
<div id="banner">
<img id="img1" src="leftimage.gif" alt="" width="" id="headImg" />
<p id="myText">First Line of Text here
<br />
Second Line of Text here
</p>
<img id="img2" src="rightimage.gif" alt="" width="" id="headImg2" />
</div>
. . . more stuff down here
In CSS I have float: left for img1. On img2 I have float: right; and clear left;
I've been playing with this for hours with no success. What I'd like to do using CSS is center vertically the text between these two images. I'd also like to place it up against the left image, maybe a few pixels off.
Additionally I want to be able to set the font-size and other attributes (bold, color, etc.) of each of the two lines of text.
Can someone please put me on the right track? Nearly everything I try puts the text under the banner div completely. What am I missing?
Thanks.
If you put the p tag after the images, it will float up between the images and you can position it accordingly. You don't need clear:left on the right image and keep in mind that you can only have one id attribute on an element, not two. The images have two ids in your code, so I removed one.
<div id="banner">
<img id="img1" src="leftimage.gif" alt=""/>
<img id="img2" src="rightimage.gif" alt="" />
<p id="myText">First Line of Text here
<br />
Second Line of Text here
</p>
</div>
#img1{
float:left;
}
#img2{
float:right;
}
You can see this working here: http://jsfiddle.net/duq6R/
First off, you will need to remove the floats on the images and paragraph.
Second, you need to make both images and paragraphs display:inline-block;. Now, you can use vertical-align: middle; to achieve your desired effect.
#banner {
overflow: hidden; /*this is a cheap clearfix*/
text-align: center;
}
#banner img, p {
display: inline-block;
vertical-align: middle;
}
See this JS Fiddle.
I want the text and the image to be next to each other but I want the image to be on the far left of the screen and I want the text to be on the far right of the screen. This is what I currently have....
<body>
<img src="website_art.png" height= "75" width= "235"/>
<h3><font face="Verdana">The Art of Gaming</font></h3>
</body>
How can I do this?
Thanks
img {
float:left;
}
h3 {
float:right;
}
jsFiddle example
Note that you will probably want to use the style clear:both on whatever elements comes after the code you provided so that it doesn't slide up directly beneath the floated elements.
You want to use css float for this, you can put it directly in your code.
<body>
<img src="website_art.png" height= "75" width="235" style="float:left;"/>
<h3 style="float:right;">The Art of Gaming</h3>
</body>
But I would really suggest learning the basics of css and splitting all your styling out to a separate style sheet, and use classes. It will help you in the future. A good place to start is w3schools or, perhaps later down the path, Mozzila Dev. Network (MDN).
HTML:
<body>
<img src="website_art.png" class="myImage"/>
<h3 class="heading">The Art of Gaming</h3>
</body>
CSS:
.myImage {
float: left;
height: 75px;
width: 235px;
font-family: Veranda;
}
.heading {
float:right;
}
You can use vertical-align and floating.
In most cases you want to vertical-align: middle, the image.
Here is a test: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
For middle, the definition is: The element is placed in the middle of the parent element.
So you might want to apply that to all elements within the element.
I am trying to display a list of images with text on my webpage. But in IE7, it is displaying each image below the other and not next to other. Looks like it is because of lack of support of inline-block. I read some articles and added some things to my CSS, but still it is not working.
He is the HTML:
<div id="image_example">
<div class="accept">
<h4>Acceptable</h4>
<img width="84" height="150" src="some-image" alt="accept">
</div>
<div class="unaccept">
<h4>Unacceptable</h4>
<img width="112" height="150" src="some-image"">
</div>
<div class="unaccept">
<h4>Unacceptable</h4>
<img width="215" height="150" src="some-image">
</div>
<divclass="unaccept">
<h4>Unacceptable</h4>
<img width="165" height="150" alt="unaccept" src="some-image"">
</div>
</div>
My CSS looks like this::
.unaccept, .accept{
display: inline-block;
text-align: center;
margin: 0 0.75em;
zoom:1;//Added after reading other posts
*display:inline; //Added after reading other posts
}
I added the last two lines after reading a lot of articles/ pages about this problem. But still it is not working.
I tried adding:
*width:173px to the class accept, but then it is breaking when the image width is more, if I increase the width width of all accept classes(even where the image width is less is getting increased, so the page does not look good again).
Can someone please help me out? All I want is to display these images next to each other with their default widths.
IE7 only supports inline-block on elements that are inline by default.
Use float: left; instead, that works with following the standards, without any IE hacks:
.image_example { overflow: hidden; }
.unaccept, .accept {
float: left;
text-align: center;
margin: 0 0.75em;
}
Demo: http://jsfiddle.net/Guffa/xCREN/
I need to make the images show up side by side horizontally in the div. How can I do that?
HTML:
<div class="Wrapper">
<img src="/wp-content/uploads/2012/07/TFT.png" alt="Smiley face" height="90" width="95" />
<img src="/wp-content/uploads/2012/07/Ltyt.png" alt="Smiley face" height="90" width="95" />
<img src="/wp-content/uploads/2012/07/artspng" alt="Smiley face" height="90" width="95" />
</div>
Reference: jsFiddle
You could also use css properties display:inline-block or float : left to achieve this.
HTML Code
<div>
<img ... />
<img ... />
<img ... />
</div>
CSS Code
div img{ display: inline-block;}
or
div img{ display: block;float: left;margin-right: 5px;}
On the general assumption of your code being something like this
<div>
<img ... />
<img ... />
<img ... />
</div>
Then, a simple CSS property will get the job done.
div img { display: inline; }
On seeing your HTML portion. You can use the following CSS to get them online.
.partners img { display: inline; }
Rather than using inline, which robs you of a lot of the control that comes with block elements, or changing their vertical align, I'd float them:
<html>
<head>
<style>
div.img_holder img
{
float: left;
}
</style>
</head>
<body>
<div class = "img_holder">
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>
</body>
</html>
Floating is a peculiar science of its own in CSS; it's very much worth learning as it can yield some very powerful results. For example, were these divs, and not images, using inline would keep you from setting their height. Inline also affects how margins and padding work. vertical-align is inconsistent between browsers and, if I'm not mistaken, shouldn't actually yield the results you're looking for, at all.
now you can used to
Your default link is http://tinkerbin.com/ob9HFOA4
Css
img{
display: inline-block;
vertical-align: top;
}
live demo http://tinkerbin.com/a5BxIZrs
Firts of all, in order not to mess up your other images you're probably going to add, do this:
.Wrapper img{ float: left; }
This will float all your images within the .Wrapper class to the left. If all images in the page where these css rules are called will be aligned to the left, do this:
.Wrapper img{ float: left; }
EDIT: Add this rule to .Wrapper
.Wrapper{ width: 100%; }
Edited this question entirely, not sure if it made sense previously.
Ok, I am having difficulty positioning some images on a website. I am using the slidedeck jQuery slideshow, and in the third slide I want a portfolio of work, so just to display 6 images (2 rows of 3).
In the index.html the slides are set up as follows;
<div id="slidedeck_frame" class="skin-voyager">
<dl class="slidedeck">
<dt>ABOUT US</dt>
<dd>About the company here</dd>
<dt>OUR SERVICES</dt>
<dd>Company services here</dd>
<dt>PORTFOLIO</dt>
<dd>Images of completed work here</dd>
<dt>Contact Us</dt>
<dd>Contact form here</dd>
</dl>
</div>
Each of these slides is formatted in the CSS sheet with the following tag;
.slidedeck dd.slide_1
In the third slide, I need to be able to simply show rows of images using the CSS to position them. I have tried a number of things but can't get it right. In the index.html I have tried;
<dt>PORTFOLIO</dt>
<dd><img src="images/myImage1.png" width="130" height="130" />
</dd>
But that obviously just display an image, with no ability to format it.
I have also tried;
<dt>PORTFOLIO</dt>
<dd>
<div>
<img id="image1" src="images/myImage1.png" width="130" height="130">
</div>
</dd>
and then using the following CSS to position;
img#image1 {
position: relative;
top: 20px;
left: 10px;
z-index: 5;
}
But the image just doesn't show up at all.
Any suggestions?
You are styling with dd.slide_1 but none of the <dd> elements have that class applied.
Edit
Given this html:
<dl class="slidedeck">
<dt>PORTFOLIO</dt>
<dd>
<img src="images/myImage1.png" width="130" height="130" />
<img src="images/myImage2.png" width="130" height="130" />
<img src="images/myImage3.png" width="130" height="130" />
<img src="images/myImage4.png" width="130" height="130" />
<img src="images/myImage5.png" width="130" height="130" />
<img src="images/myImage6.png" width="130" height="130" />
</dd>
You should be able to style your images like this
.slidedeck dd img {
/* add whatever styles you want */
}
If that isn't working try adding !important after your style values. If this works investigate what CSS (perhaps from jQuery plugins) is interfering with your styles. Try not to leave !important in if you can help it.
So for 2 rows of 3 images you would need this css
.slidedeck dd {
width: 390px; /* 3x your image width */
overflow: hidden; /* To contain floats */
}
.slidedeck dd img {
float: left;
display: block;
}