Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Newbie, trying to position images 1

Status
Not open for further replies.
lucasm

lucasm

IS-IT--Management
Feb 13, 2002
114
US
I've just started developing a website for a friend:
and I have been having a lot of trouble getting the two bear images on the upper left and upper right, and the logo image centered in between them. Should they all be in the same div (width 100%) and then somehow distributed where I want them, or is there some way to make three divs spanning the top of the page and positioned to float in the upper left, centered, and upper right, respectively? I want them to stay that way no matter what, so when the page gets resized to be narrower than the combined images' width they still stay in place and a horizontal scroll bar appears.

Thanks
 
Sort by date Sort by votes
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Welcome!</title>
<style type="text/css">
body{
font-family: Tahoma, Verdana, sans-serif;
font-size: 12pt;
}
DIV#centerdiv{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
DIV#leftdiv{
position: absolute;
top: 0px;
left: 0px;
width: 55px;
height: 79px;
float:left;
text-align:left;
}
DIV#rightdiv{
position: absolute;
top: 0px;
right: 0px;
width: 55px;
height: 79px;
float:right;
text-align:right
}
</style>
</head>
<body bgcolor="#bfebea">
<div id="leftdiv">
<img align="left" src="bearfacingright2.png">
</div>
<div id="rightdiv">
<img src="bearfacingleft2.png">
</div>
<div id="centerdiv">
<img src="header2.png" alt="Walking Bear Crafts">
</div>

<br>
<br>
<br>
<div align="center"> Page Under Construction - Please Check Back Later </div>
</body>
</html>

Clive
 
Upvote 0 Downvote
that did it - thank you very much! I was learning a lot about css during this simple quest, but was getting very frustrated along the way. Now onto the next element - a menu that doesn't use javascript, but looks like it does.

The one thing I don't think I tried, or at least in the right way, was using the "position: absolute" along with "float: right" to get that upper right bear where I wanted it - and I couldn't find anything after long searching on google that looked like what you came up with. Thanks again.
 
Upvote 0 Downvote
i too am a bit of a newbie, would you use this code for putting one lump of text to the left and one to the right?

thanks

Ben
 
Upvote 0 Downvote
is it text within a div or other container?
 
Upvote 0 Downvote
inside a div, just wondering what other containers are you thinking of

Ben
 
Upvote 0 Downvote
well, a <p> for example

anyway, I think you need to get the div placed where you want it, and then the text align should work for that too (it did when I just tested it replacing my img tags with text)
 
Upvote 0 Downvote
Thats great thanks.

ok i have a problem

i have a div with a div inside it. How do i get the div inside it to sit at the bottom of the other div?

Thanks

Ben
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
816
pmonett
pmonett
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
759
bdwilcox
bdwilcox
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
642
PeDa
PeDa
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top