logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 01-20-2015, 05:56 PM   #1
RedFinch
 
Join Date: Dec 2014
Posts: 10
Default How can I put text on the same line as my image?

Hi everyone.

I've been trying to align a div to the right of an image with no luck. I've tried float:right, text-align:right; in the parent containers but the text always ends up being at the bottom and right of the image. Here's my code block:

<div id="tab1" class="tab_content" >

<p id= "tab1_image_p" ><img id="tab1_image" src="images/playerPlaceHolder.gif" alt=""/>


<div id="tab1_content" class="fluid ">
<strong>
Contents of tab 1
Contents of tab 1
Contents of tab 1
</strong>

</div>

</p>

</div><!-- #tab1 -->

How can I make the text between <strong> next to the image on the same line and to the right?
RedFinch is offline   Reply With Quote
Old 01-21-2015, 12:58 AM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

post the styles for your divs
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 01-21-2015, 04:53 PM   #3
RedFinch
 
Join Date: Dec 2014
Posts: 10
Default

Here's my style sheet:

@charset "utf-8";

#tab1_image{

float:left;



}
#tab1_content{

width:100%;




}
#tab1_image_p{

width:24%;


}

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;

width: 100%;

}
ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 21px ;
height: 31px;
line-height: 31px;

border-left: 1px solid #999999;
border-top:2px solid #a1a1a1; border-radius:10px; margin:1px; padding:5px;
font-weight: bold;
background: #EEEEEE;
overflow: hidden;
position: relative;
}
ul.tabs li:hover {
background: #CCCCCC;
}
ul.tabs li.active{
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.tab_container {

clear: both;
float: left;
width: 100%;
background: #FFFFFF;





}
.tab_content {
padding: 5px;
font-size: 1.2em;
display: none;

}
#container {
width: 60%;
margin: 0 auto;

border:2px solid #a1a1a1; border-radius:10px; margin:1px; padding:5px;
}
#ad{
background:black;

}

#tab1{


}
#aside{
border:2px solid #a1a1a1; border-radius:10px; margin:1px; padding:5px;



}
RedFinch is offline   Reply With Quote
Old 01-22-2015, 12:21 AM   #4
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

try this ( i put styles inlibe for tedting purpose only.
i moved the closing p tag and also the comma between id and class in the tab
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style>#tab1_image{float:left;}
#tab1_content{width:100%;}
#tab1_image_p{width:24%;}

ul.tabs {margin: 0;padding: 0;float: left;list-style: none;height: 32px;
width: 100%;}
ul.tabs li {float: left;margin: 0;cursor: pointer;padding: 0px 21px ;
height: 31px;line-height: 31px;border-left: 1px solid #999999;
border-top:2px solid #a1a1a1; border-radius:10px; margin:1px; padding:5px;
font-weight: bold;background: #EEEEEE;overflow: hidden;
position: relative;}
ul.tabs li:hover {background: #CCCCCC;}
ul.tabs li.active{background: #FFFFFF;border-bottom: 1px solid #FFFFFF;}
.tab_container {clear: both;float: left;width: 100%;background: #FFFFFF;}
.tab_content {
padding: 5px;font-size: 1.2em;display: none;}
#container {width: 60%;margin: 0 auto;border:2px solid #a1a1a1; border-radius:10px; margin:1px; padding:5px;
}
#ad{background:black;}
#tab1{}
#aside{border:2px solid #a1a1a1; border-radius:10px; margin:1px; padding:5px;
} </style>
</head>
<body>
<div id="tab1 class="tab_content" >

<p id= "tab1_image_p" ><img id="tab1_image" src="images/lotus.png" alt=""/></p>
<div id="tab1_content" class="fluid ">
<strong>
Contents of tab 1
Contents of tab 1
Contents of tab 1
</strong>

</div>
</div><!-- #tab1 -->
</body>
</html>
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 01-24-2015, 03:01 PM   #5
RedFinch
 
Join Date: Dec 2014
Posts: 10
Default

Thanks...that did it!
RedFinch is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:58 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com