CSS Drive forums | Displaying images in line

Displaying images in line

Posted: 26 September 2007 07:06 PM

[ Ignore ]

Newbie

Total Posts: 7

Joined 2007-09-16

Hi. I want to display two images next to each other but I can’t seem to make this work. I’ve tried the inline css style but that didn’t work. It worked with text but not with images. Any help on this would be much appreciated!

Profile

DCFactory

Posted: 29 September 2007 10:19 AM

[ Ignore ] [ # 1 ]

Newbie

Total Posts: 16

Joined 2007-08-21

Can you please provide an example?

Profile

taliets

Posted: 29 September 2007 10:28 AM

[ Ignore ] [ # 2 ]

Newbie

Total Posts: 7

Joined 2007-09-16

I have actually now managed to get the images in-line by just inserting the img tag in the html without any div tag applied to it. The problem now is how do I edit those images individually (eg the padding, margin etc) because as soon as I apply the div tag to them it all goes wrong again even with the in-line style in css applied to the div. What I have done now is add styles to the img tag in css but that means that that will be applied to all images in the site which I don’t neccessarily want to happen. Any help on this? Here is the code:

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Silvia & Daniel's Wedding Website" />
<title>Silvia & Daniel's wedding</title> 
<link href="css/main.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<!-- Site navigation menu -->
<div id="container">
<div id="content">
<div id="header">
</div>

<ul class="navbar">
  <li><a href="index.php">Home</a></li>
  <li><a href="Standesamtliche Hochzeit Thalwil.php">Standesamtliche Hochzeit Thalwil</a></li>
  <li><a href="musings.html">Kirchliche Hochzeit Namibia</a></li>
  <li><a href="town.html">Reiseziele in Namibia</a></li>
  <li><a href="links.html">Fotos von Farm Danube</a></li>
  <li><a href="Hochzeitsfotos.php">Hochzeitsfotos</a></li>
  <li><a href="links.html">Sonstiges</a></li>
  <li><a href="links.html">Kontakt</a></li>
  <li id="navbar2"><img src="images/sunflowersmall_03.jpg" alt="Home" width="72" height="80" border="0"/></li>
</ul>

<!-- Main content -->
<div id="text"><h1>Standesamtliche Trauung Thalwil 
</h1>

<p>Wir heiraten <strong>Freitag, den 4.4.2008 um 16h in Thalwil</strong>, 
mit anschliessenden Apèro in der alten Trotte ab 17h!
</p>

<p><strong>Adresse:</strong> alte Trotte, Alte Landstrasse 102, 8800
Thawil
Wir freuen uns mit Euch anzustossen.
</p>

<img src="images/left_06.jpg" alt="image number one" width="345" height="234" />

<img src="images/right_03.jpg" alt="image number two" width="346" height="234" />
</div>
</div>
</div>
</body>
</html> 

CSS code:

/* CSS Document */

body {
    margin: 0 auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    height:100%;
    background: #993333;
    
}

#container {
margin: 0 auto;
background: #993333;
padding: 0px;
width: 100%;
height: 100%;
}

#content {
    width: 760px;
    height: 550px;
    margin: 0 auto;
    color: #b5420c;
    font-size: 85%;
    background-color: #FFCC66;
    border-bottom: 1px solid #FFFFCC;
    border-right: 1px solid #FFFFCC;
    border-left: 1px solid #FFFFCC;
    padding: 15px;
}


#header {
    background:#FFCC66 url(../images/header_03_03.jpg) no-repeat top;
    padding: 0px;
    height: 130px;
    margin: 0px 0px 2.5em;
    
    
}   
  
ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    right: 0em;
    width: 10em;
    text-indent: 0px;
    text-align: center;    
 }
 
#text {
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
    padding-top: 0em;    
    font-style: normal;
    padding-left: 30px;    
 }
 
p { font-style: normal;
}
 
h1 {
  font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
  text-decoration:underline;
  font-size: 1.5em;
  padding-top: 0em;
  
  
}

h2 {
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
    text-decoration:none;
    font-size: 1.5em;
    text-align: center;
    padding-top: 0em;
}

        
ul.navbar li {
  background: #FF9933;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black; 
  border: thin solid #FFFFCC;
 }
 
  
ul.navbar a {
  text-decoration: none; 
}


ul.navbar a:link {
  color: #b5420c; 
 } 
 
ul.navbar a:hover {
  color: #FFCC66;
  text-decoration: none;
  border-bottom: 2px dotted}
  
ul.navbar a:visited {
  text-decoration: none;
  color: #b5420c;
  
}

#navbar2{
    background: none;
    margin: 0.5em 0;
    padding: 0.3em;
    border: none;

     
  }

img {
    padding-top: 0em;
    padding-right: 0.5em;
    padding-bottom: 0.5em;    
    
}

#main {
    background: url(/Silvia/images/main_03.jpg) no-repeat center;
    height: 350px;
    
} 

Profile

DCFactory

Posted: 29 September 2007 10:51 AM

[ Ignore ] [ # 3 ]

Newbie

Total Posts: 16

Joined 2007-08-21

<body>
<!-- Site navigation menu -->
<div id="container">
<div id="content">
<div id="header">
</div>

<ul class="navbar">
  <li><a href="index.php">Home</a></li>
  <li><a href="Standesamtliche Hochzeit Thalwil.php">Standesamtliche Hochzeit Thalwil</a></li>
  <li><a href="musings.html">Kirchliche Hochzeit Namibia</a></li>
  <li><a href="town.html">Reiseziele in Namibia</a></li>
  <li><a href="links.html">Fotos von Farm Danube</a></li>
  <li><a href="Hochzeitsfotos.php">Hochzeitsfotos</a></li>
  <li><a href="links.html">Sonstiges</a></li>
  <li><a href="links.html">Kontakt</a></li>
  <li id="navbar2"><img src="images/sunflowersmall_03.jpg" alt="Home" width="72" height="80" border="0" /></li>
</ul>






<!-- Main content -->
<div id="text"><h1>Standesamtliche Trauung Thalwil 
</h1>

<p>Wir heiraten <strong>Freitag, den 4.4.2008 um 16h in Thalwil</strong>, 
mit anschliessenden Apèro in der alten Trotte ab 17h!
</p>

<p><strong>Adresse:</strong> alte Trotte, Alte Landstrasse 102, 8800
Thawil
Wir freuen uns mit Euch anzustossen.
</p>

<img src="images/left_06.jpg" alt="image number one" width="345" height="234" border="0" class="homepageImg" />

<img src="images/right_03.jpg" alt="image number two" width="346" height="234" class="homepageImg" />
</div>
</div>
</div>
</body>
</html> 

body {
    margin: 0 auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    height:100%;
    background: #993333;
    
}

#container {
margin: 0 auto;
background: #993333;
padding: 0px;
width: 100%;
height: 100%;
}

#content {
    width: 760px;
    height: 550px;
    margin: 0 auto;
    color: #b5420c;
    font-size: 85%;
    background-color: #FFCC66;
    border-bottom: 1px solid #FFFFCC;
    border-right: 1px solid #FFFFCC;
    border-left: 1px solid #FFFFCC;
    padding: 15px;
}


#header {
    background:#FFCC66 url(../images/header_03_03.jpg) no-repeat top;
    padding: 0px;
    height: 130px;
    margin: 0px 0px 2.5em;
    
    
}   
  
ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    right: 0em;
    width: 10em;
    text-indent: 0px;
    text-align: center;    
 }
 
#text {
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
    padding-top: 0em;    
    font-style: normal;
    padding-left: 30px;    
 }
 
p { font-style: normal;
}
 
h1 {
  font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
  text-decoration:underline;
  font-size: 1.5em;
  padding-top: 0em;
  
  
}

h2 {
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
    text-decoration:none;
    font-size: 1.5em;
    text-align: center;
    padding-top: 0em;
}

        
ul.navbar li {
  background: #FF9933;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black; 
  border: thin solid #FFFFCC;
 }
 
  
ul.navbar a {
  text-decoration: none; 
}


ul.navbar a:link {
  color: #b5420c; 
 } 
 
ul.navbar a:hover {
  color: #FFCC66;
  text-decoration: none;
  border-bottom: 2px dotted}
  
ul.navbar a:visited {
  text-decoration: none;
  color: #b5420c;
  
}

#navbar2{
    background: none;
    margin: 0.5em 0;
    padding: 0.3em;
    border: none;

     
  }
/* overall img for whole site*/ 
img {
    padding-top: 0em;
    padding-right: 0.5em;
    padding-bottom: 0.5em;    
    
}

/* special one for the home page*/

.homepageImg {
    padding-top: 0em;
    padding-right: .5em;
    padding-bottom: 0.5em;    
    
}

#main {
    background: url(/Silvia/images/main_03.jpg) no-repeat center;
    height: 350px;
    
} 

You don’t need a DIV, just add a class


(class="homepageImg")

to the images, en define it in de stylesheet (see the example).

So you can define all kinds of classes for different mark up!
Succes

Profile

ExplainThat!

Posted: 29 September 2007 12:36 PM

[ Ignore ] [ # 4 ]

Jr. Member

Total Posts: 38

Joined 2007-09-03

taliets - 26 September 2007 07:06 PM
Hi. I want to display two images next to each other but I can’t seem to make this work. I’ve tried the inline css style but that didn’t work. It worked with text but not with images. Any help on this would be much appreciated!

The best long term approach for your site will be to define the image characteristics you want in an external stylesheet and then apply the correct CSS selector to individual images by setting the class= attribute in the img tag. Here is some example code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.im1{padding:5px;background-color:green}
.im2{border:5px solid blue}
</style>


</head>
<body>
<img class="im1" src="/images/im1.png" height=100 width = 100><img class="im2" src="/images/im2.png" height=100 width =100>
</body>
</html> 

Copy this code and paste it into the left hand frame on this page

Live Test

im1.png and im2.png are available on the explainth.at site. Click on the Execute button. You should see the two images next to one another. The first one uses the im1 CSS selector


class="im1"

while the second one uses the im2 CSS selector


class="im2"

. The result - you see the first image with a 5 pixel padding with the green background color showing through. The second appears with a solid, blue 5 pixel border.

It goes without saying, you can do a great deal more to style your images this way. Inline styling should be used very very sparingly or else you will end up with an unmanageable site.

If you are creating a clickable thumbnail style of page to show off your wedding photos you might find it useful to check out the links from here

Thumbnails, Floats, Multiple Columns etc

Hope this helps.

Profile

taliets

Posted: 29 September 2007 02:37 PM

[ Ignore ] [ # 5 ]

Newbie

Total Posts: 7

Joined 2007-09-16

Hi. Thanks for your help. I tried that with the class and it works well. Is the best way to display images next to each other to just insert them like that and apply the styles to each image or can you use a div to insert the images? I will have a page with lots of wedding thumbnail pics so would like to know the best way to do that. I tried the link you emailed me but can’t find the thumbnail pics page.

Profile

ExplainThat!

Posted: 30 September 2007 05:09 AM

[ Ignore ] [ # 6 ]

Jr. Member

Total Posts: 38

Joined 2007-09-03

taliets - 29 September 2007 02:37 PM
Hi. Thanks for your help. I tried that with the class and it works well. Is the best way to display images next to each other to just insert them like that and apply the styles to each image or can you use a div to insert the images? I will have a page with lots of wedding thumbnail pics so would like to know the best way to do that. I tried the link you emailed me but can’t find the thumbnail pics page.

You don’t need a div merely to show your images. However, what you might find useful is to create a div, assign it a CSS selector and define a nested img style for that selector. This ensures that all the images inside that div are shown with the desired CSS style. If as you say you have 100s of pictures to show it will not be long before you simply forget to assign the right style to one of your images if you go down the route of styling individual img tags. Using nested CSS styling and putting all of your images inside one suitably style div reduces that risk. You can read up on CSS nesting here

Nesting

As you are doing a wedding photo site you probably want to show thumbnails with a brief description/caption and give the user the ability to hover over a thumbnail to see a larger version of the image. The link I sent you has further links at the bottom of the page showing how this can be done. Here they are

Thumbnail Viewer

A possible layout for images with a description is like the one here

Thumbnails with captions

Profile

taliets

Posted: 30 September 2007 12:58 PM

[ Ignore ] [ # 7 ]

Newbie

Total Posts: 7

Joined 2007-09-16

You don’t need a div merely to show your images. However, what you might find useful is to create a div, assign it a CSS selector and define a nested img style for that selector. This ensures that all the images inside that div are shown with the desired CSS style. If as you say you have 100s of pictures to show it will not be long before you simply forget to assign the right style to one of your images if you go down the route of styling individual img tags. Using nested CSS styling and putting all of your images inside one suitably style div reduces that risk.

Could you please post an example code here of what you mention above with the nested img style and selector. Please could you provide an example of the css and how its applied to the images in the html.

Thanks.

Profile

ExplainThat!

Posted: 01 October 2007 05:21 AM

[ Ignore ] [ # 8 ]

Jr. Member

Total Posts: 38

Joined 2007-09-03

taliets - 30 September 2007 12:58 PM
You don’t need a div merely to show your images. However, what you might find useful is to create a div, assign it a CSS selector and define a nested img style for that selector. This ensures that all the images inside that div are shown with the desired CSS style. If as you say you have 100s of pictures to show it will not be long before you simply forget to assign the right style to one of your images if you go down the route of styling individual img tags. Using nested CSS styling and putting all of your images inside one suitably style div reduces that risk.

Could you please post an example code here of what you mention above with the nested img style and selector. Please could you provide an example of the css and how its applied to the images in the html.

Thanks.

Paste this code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.im1 {border:5px solid #7A4B9B}
.idiv {padding:10px;border:2px double red}
.idiv img{border:5px solid #7A4B9B}
</style>



</head>
<body>
<img class="im1" src="/images/im1.png" height=100 width=100>
<img class="im1" src="/images/im2.png" height=100 width=100>
<div class="idiv">
<img class="im1" src="/images/im1.png" height=100 width=100>
<img class="im1" src="/images/im2.png" height=100 width=100>
</div>
</body>
</html> 

into the lefthand frame of

ExplainThat! LiveTest

and click the Execute button.

The first two image tags are individiually assigned the im1 class selector and they appear - as expected - with a violet border, solid and 5 pixels wide. As you can imagine doing this for each and every image you show can get tedious. Using nested CSS styles avoids the problem. The idiv style defines all images inside the div to have the desired border. As a result the two images we show inside the div styled with idiv don’t need to have any CSS selector assigned to them in order to get the desired border effect. This has three benefits

a. It actually makes your code shorter - i.e. better for your bandwidth
b. It makes it a whole lot easier for you to selectively alter the look and feel of parts of your webpage - make good use of nesting with divs and all you need to change in order to get elements nested in a given div to appear differently is to change the CSS selector (class) for that div alone and bingo!
c. It prevents errors arising from you fortetting to assign a CSS class or mistyping it etc.

Please click on the links in my previous messages - I am merely repeating information that has already been put out there.

Profile

‹‹ IE.6? 3px bug? + html bug? I dont get it CSS change Image ››