birdbrain
msg:4359548 | 4:25 pm on Sep 7, 2011 (gmt 0) |
Hi there mattdna,
and a warm welcome to these forums. ;)
Try it like this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.pubcon.com/exhibitor/gfx/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title> thre images in a row</title>
<style type="text/css">
#image-container {
min-width:782px; /* width of 3 images (746px) plus images' padding and border (36px) */
padding:10px;
border:1px solid #d3d2d2;
background-color:#f0f0f0;
}
#image-container img {
padding:5px;
border:1px solid #d3d2d2;
background-color:#fff;
}
#image-right {
float:right;
width:250px;
height:49px;
}
#image-left {
float:left;
width:250px;
height:36px;
}
#image-center {
display:block;
width:246px;
height:59px;
margin:auto;
}
</style>
</head>
<body>
<div id="image-container">
<img id="image-right" src="lvicc_logo.jpg" alt="">
<img id="image-left" src="mgm_mirage_logo.jpg" alt="">
<img id="image-center" src="copyblogger_logo.jpg" alt="">
</div>
</body>
</html>
|
|
birdbrain
|
mattdna
msg:4359581 | 5:25 pm on Sep 7, 2011 (gmt 0) |
thanks for the reply.
Nothing happened when I added this. Not entirely sure if I'm doing it right. To clarify:
I'm using Dreamweaver, and have a CSS file style sheet which each HTML page links to. In the CSS file I have the code mentioned in my first post for .image-right and .image-left. When adding an image to an HTML page I just select .image-right and image.left in the 'class' drop down box and it adds the style to the image.
I cut and paste your code into the CSS file, but nothing happened when I tried to apply the class to the images.
Can you confirm :
Should I be adding this code to the CSS file or the individual HTML page?
If CSS, this is what I did:
I deleted my current code for .image-right, .-image.left, and center and replaced with your code above starting at your line 10:
"#image-container {
min-width:782px; /* width of 3 images (746px) plus images' padding and border (36px) */" etc
down to the last piece of code for the line titled #image-center, ending "margin:auto;}
When I returned to the HTML doc to try to apply these new classes to images, they dont even appear in the class drop down box in Dreamweaver.
So where have I gone wrong?
Sorry, I told you I'd need it completely spelled out to me ;-)
|
birdbrain
msg:4359594 | 6:14 pm on Sep 7, 2011 (gmt 0) |
Hi there mattdna,
unfortunately, "Dreamweaver" is a complete mystery to me. :(
I have always used "NotePad" to create code.
Perhaps one or the more erudite members here will be able to help you with "Dreamweaver".
To see the fruits of my labour, follow these instructions...
- Open NotePad.
- Copy & Paste my code into NotePad.
- How to Copy & Paste...
- With your mouse, place cursor at the beginning of the code.
- Hold the left-mouse down and then drag the mouse down to the end of the code.
- This has the effect of highlighting the code.
- Release the left-mouse.
- Right-mouse click will bring up a small dialog box.
- Scroll down the dialog box and click Copy.
- With your mouse, place cursor over NotePad.
- Right-mouse click will bring up a small dialog box.
- Scroll down the dialog box and click Paste.
Assuming that all this has gone to plan...
- Click the File tab.
- Click Save As....
- This will bring up a dialog box.
- In the file name input type your chosen file name with the extension .html.
- Select the desired 'Directory' in Save in: .
- Click Save.
- Go to your selected 'Directory' to test your file.
- Double clicking the some_name.html file will open it in your default browser
- Finally have a beer. ;)
I hope that this will help. :)
birdbrain
|
lucy24
msg:4359676 | 9:12 pm on Sep 7, 2011 (gmt 0) |
All floats should have an accompanying clear: {left}, {right} or {none} depending on which effect you want. You are not the first person who wished there existed a {float: center;} ;)
Does it behave the same in all browsers? I recently had a pretty staggering result in Chrome.* Luckily floats were irrelevant to what I was testing for so I didn't have to look for a fix.
* They may simply have been ahead of the AWK curve, because Safari and the SEE preview now do the same thing. Which means I do have to fix it. Watch this space; I'm worried.
|
oldcode
msg:4360740 | 11:50 pm on Sep 9, 2011 (gmt 0) |
I very much liked Birdbrain's solution and wanted to extend the code to include 5 images. The images are clustered on the upper left instead of spread horizontally on the page. Anyone have thoughts?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<!--<base href="http://www.pubcon.com/exhibitor/gfx/"> -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title> three images in a row</title>
<style type="text/css">
#image-outercontainer {
position: relative;
padding:10px;
border:1px solid #d3d2d2;
background-color:#f0f0f0;
margin:auto;
}
#image-container {
position: relative;
width:541px;
margin:auto;
}
#image-container img {
padding:5px;
border:1px solid #d3d2d2;
background-color:#fff;
}
#image-outercontainer img {
padding:5px;
border:1px solid #d3d2d2;
background-color:#fff;
#image-right {
float:right;
width:125px;
height:35px;
}
#image-left {
float:left;
width:125px;
height:35px;
}
#image-center {
display:block;
width:125px;
height:35px;
margin:auto;
}
#image-outerright {
float:right;
width:125px;
height:35px;
}
#image-outerleft {
float:left;
width:125px;
height:35px;
}
</style>
</head>
<body>
<div id="image-outercontainer">
<img id="image-outerright" src="squaregold.png" alt="">
<div id="image-container">
<img id="image-right" src="squaregold.png" alt="">
<img id="image-left" src="squaregold.png" alt="">
<img id="image-center" src="squaregold.png" alt="">
</div>
<img id="image-outerleft" src="squaregold.png" alt="">
</div>
</body>
</html>
|
birdbrain
msg:4360805 | 8:39 am on Sep 10, 2011 (gmt 0) |
Hi there oldcode,
and a warm welcome to these forums. ;)
Try it like this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.webmasterworld.com/gfx/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>five images equally spaced in a row</title>
<style type="text/css">
body {
margin:10px;
background-color:#def;
}
#image-container {
min-width:735px; /* width of 5 images (625px) plus images' padding and border (60px) plus images' margin (50px) */
height:47px;
padding:10px 5px;
margin:0;
border:1px solid #d3d2d2;
background-color:#f0f0f0;
list-style-type:none;
}
#image-container li {
width:20%;
float:left;
}
#image-container img {
display:block;
width:125px;
height:35px;
padding:5px;
border:1px solid #d3d2d2;
margin:auto;
background-color:#fff;
}
</style>
</head>
<body>
<ul id="image-container">
<li><img src="logo.png" alt=""></li>
<li><img src="logo.png" alt=""></li>
<li><img src="logo.png" alt=""></li>
<li><img src="logo.png" alt=""></li>
<li><img src="logo.png" alt=""></li>
</ul>
</body>
</html>
|
|
birdbrain [edited by: alt131 at 10:58 am (utc) on Sep 10, 2011]
[edit reason] Side Scroll [/edit]
|
oldcode
msg:4361165 | 7:19 pm on Sep 11, 2011 (gmt 0) |
Much appreciated, birdbrain! The code works great.
|
birdbrain
msg:4361168 | 7:31 pm on Sep 11, 2011 (gmt 0) |
No problem, you're very welcome. ;)
|
|
