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 IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

trouble positioning div...

Status
Not open for further replies.
rrmcguire

rrmcguire

Programmer
Oct 13, 2010
304
US
Hello at I have a div called addociationscontent which Im trying to position so its at the bottom of the news/events section and to the right of the about our company, but when I shrink my page in IE or Firefox, Safari, the div doesn't stay in place....below I've attached my code. I initially tried sticking it within another div and another ad div but doesn't seem to work..any help would be appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<style type="text/css"

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meadow Lark Agency</title>
<style type="text/css">
<!--
body {
background-image: url(images/test%20background.png);
}
#equipavail {
color: #000;
font-size: 8px;
width: 205px;
right: 0px;
position: absolute;
height: 180px;
background-image: url(images/bigstockphoto_Red_Truck_1970809_cropped_new.png);
text-align: center;
margin-top: -20px;
vertical-align: bottom;
}
#support_text {
width: 300px;
margin-left: 150px;
margin-top: 35px;
height: 100px;
}
#equipavail #equipavailtext {
width: 180px;
padding-left: 10px;
padding-right: 10px;
margin-top: 90px;
font-size: 9px;
}
#banner {
background-image: url(images/gettycropped2.jpg);
width: 900px;
margin: auto;
height: 400px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
overflow:hidden;
}
#content #contentcompany {
height: 485px;
width: 488px;
background-image: url(images/leftcolumn_background2_new.png);
position: relative;
z-index: 2;
top: -50px;
text-align: left;
text-indent: 0em;
color: #FFF;
}
#content #contentcompany #missionstatement {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
width: 300px;
left: -20px;
position: relative;
z-index: 2;
overflow: hidden;
margin-top: -20px;
}
#content #contentcompany #transportationserv {
font-size: 20px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
margin: 0px;
}
#banner #bannertext3 {
text-align: right;
padding-right: 50px;
color: #FFF;
vertical-align: top;
padding-left: 425px;
}
#banner #bannertext {
text-align: right;
padding-left: 300px;
color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
padding-right: 10px;
font-size: 24px;
}
#banner #bannertext2 {
text-align: right;
color: #FFF;
padding-right: 200px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
padding-top: 0px;
}
#navigation {
margin: auto;
width: 900px;
background-image: url(images/testbanner2.png);
background-repeat: no-repeat;
height: 100px;
vertical-align: bottom;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}

#navigation #homebutton {
height: 31px;
width: 91px;
margin-top: 60px;
margin-left: 190px;
}
#navigation #container {
height: 50px;
}
#navigation #container2 {
height: 50px;
width: auto;
padding-left: 100px;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
color: #5A7E66;
font-weight: bold;
}
#content {
margin: auto;
width: 900px;
height: 435px;
}
#footer {
width: 900px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
background-color: #98B6A2;
height: 100px;
}
.bold {
font-weight: bold;
}
#content #contentcompany{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 20px;
z-index: 2;
border-right-style: solid;
border-left-style: solid;
border-right-color: #5A7E66;
border-left-color: #5A7E66;
}

a {
color:#46873A;
padding-left: 10px;
}
#navigation #container2 #social {
height: 26px;
width: 100px;
margin-left: 670px;
margin-top: -15px;
padding-left: 60px;
overflow: hidden;
padding-top: 7px;
padding-right: 20px;
margin-right: 0px;
}
#content #newsevents {
width: 410px;
margin-left: 490px;
overflow: hidden;
}

#content #associations {
width: 410px;
margin-left: 490px;
overflow: hidden;
}
#content #associations #apDiv2 #associationscontent {
height: 115px;
width: 486px;
background-color: #FF0;
}
#content #newsevents #apDiv1 #newsswf {
width: 410px;
margin-top: 75px;
margin-right: 0px;
margin-bottom: 75px;
margin-left: 0px;
height: 278px;
}

-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:410px;
height:435px;
z-index:3;
background-image: url(images/rightcolumn_background2.png);
}
#apDiv2 {
position:absolute;
width:486px;
height:115px;
z-index:4;
left: 632px;
top: 806px;
background-color: #FFFF00;
}


-->
</style>
</head>
<body background="images/test background.png">
<div id="navigation">
<div id="container2">
<p><a href=" Your Equipment</a> <a href=" Quote Request</a> <a href=" Booking</a> <a href=" Loads</a> <a href=" Services</a> <a href=" <div id="social"><a href=" target="_blank"><img src="images/facebooksmall.jpg" width="15" height="15" alt="meadow facebook" /></a> <a href=" target="_blank"><img src="images/twitter.jpg" width="15" height="15" alt="meadow twitter" /></a></div social>
</div container2>
<div id="container">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Services</a>
<ul>
<li><a class="MenuBarItemHover" href="#">Flatbed</a></li>
<li><a class="MenuBarItemHover" href="#">Van</a></li>
<li><a class="MenuBarItemHover" href="#">Heavy Haul</a></li>
<li><a class="MenuBarItemHover" href="#">Global</a></li>
<li><a class="MenuBarItemHover" href="#">LTL</a></li>
<li><a class="MenuBarItemHover" href="#">Cross Border</a></li>
</ul>
<li><a href="#">Customers</a>
</li>
<li><a href="#">Logistics</a></li>
<li><a href="#">Agents</a></li>
<li><a href="#">Contractors</a></li>
<li><a href="#">Logistics</a></li></ul>
</div container>

</div navigation>
<div id="banner">
<div id="bannertext">
<p>&nbsp;</p>
<p>A FRESH NEW LOOK AT TRANSPORTATION</p>
</div bannertext>
<div id="bannertext2"> &quot;No Bad Deals&quot;</div bannertext2>
<div id="bannertext3">
<h2 class="bold">Welcome to Our Website </h2>
<p>With over two decades of service, Meadow Lark has offered innovative solutions to any transportation need with on-demand operation services and advanced technology. Customers, Contractors, and agents alike benefit from association with our company. Family owned and operated, Meadow Lark is the premier choice for your shipping requirements.</p>
<p>&nbsp;</p>
</div bannertext3>
</div banner>
<div id="content">
<div id="newsevents">
<div id="apDiv2">
<div id="associationscontent"></div associationscontent>
</div apDiv2>
<div id="apDiv1">
<div id="newsswf">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="410" height="278" id="FlashID" title="news">
<param name="movie" value="scrollingnews_new_2.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="scrollingnews_new_2.swf" width="410" height="278">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href=" src=" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>
</div newsevents>
<div id="contentcompany">About Our Company
<h5>Mission Statement</h5>

<div id="equipavail">
<div id="equipavailtext">HAVE AVAILABLE EQUIPMENT YOU NEED LOADS FOR? LET US LOAD YOUR TRUCKS WITH OUR FREIGHT TODAY!! PLEASE CALL OR EMAIL YOUR AVAILABLE TRUCK LIST TO: 406-237-0811 OR equipmentavailable@meadowlarkco.com</div equipavailtext>
</div equipavail>
<div id="missionstatement">
<ul>
<li>No Bad deals. All players benefit from association with our company.</li>
<li>We are constantly in pursuit of excellence in our image and operations</li>
<li>We do not compare ourselves to any other business, only to how WE were yesterday.</li>
<li>Our Word is our bond.</li>
</ul>
</div mission>

<div id="support_text"><strong>SUPPORT</strong> CENTER<BR /> 24 Hours / 7 days a Week<br />
1-800-736-5233</div>
<div id="transportationserv">Transportation Services</div>

<div id="dropdown">
<form id="form1" name="form1" method="post" action="">
<label>
<select name="maindropdown" id="maindropdown">
<option>..open for online services</option>
<option value="index.htm">Home</option>
<option value="flatbedservices.htm">Flatbed Services</option>
<option value="vanservices.htm">Van Services</option>
<option value="heavyhaulservices.htm">Heavy Haul Services</option>
<option value="globalservices.htm">Global Services</option>
<option value="ltlservices.htm">LTL Services</option>
<option value="crossborderservices.htm">Cross Border Services</option>
</select>
</label>
<label>
<input type="submit" name="Go" id="Go" value="Go" />
</label>
</form>
</div>
</div contentcompany></div content>
<div id="footer"></div footer>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>
 
Sort by date Sort by votes
Also, is it possible to align the links which are within my top menu to the top of the div which its within?
 
Upvote 0 Downvote
I would do it like this where the top menu, spry menu and header text are in separate divs within the header div.
You have too much text for the width of the div.
To get all of the top menu on one line either use a smaller font or shorten the link descriptions.

Code: 
---------------------------
|        header div         |
| ------------------------  |
| |      top menu         | | 
| ------------------------  |
|                           |
| ------------------------  |
| |      spry menu        | | 
| ------------------------  |
|                           |
|                           |
| ------------------------  |
| |      header text      | | 
| |                       | | 
| |                       | | 
| |                       | | 
| |                       | | 
| |                       | | 
| |                       | | 
| ------------------------  |
|                           |
| ------------------------  |


[/code]

Keith
 
Upvote 0 Downvote
ok, I resolved it by making by text size 14px, but is there anyway to align the text which is within the div top to the top of the div?
 
Upvote 0 Downvote
I don't understand why the 'top'div is inside the 'menu' div. If you separate them you can style the top menu on it's own.
Once separated, remove the line-height from the 'top' div.

Keith
 
Upvote 0 Downvote
should my .top CSS just be .top rather than .menu.top, or does the HTML need to be moved outside of the <menu></menu>?
 
Upvote 0 Downvote
ok, if I do that moving the top div outside of my menu its at the following URL

I removed the line height, but then I'll need to align it to the right again and cannot use float as it messes up my spry menu below, also how would I then move the spry menu back to the bottom? of the menu div
 
Upvote 0 Downvote
I always give the individual class names so style can be easily changed without affecting any other areas of the page.
Your div names are making the layout confusing.

You need to add an additional div which has your logo and the bird in the tree as it's background. Set the height of this to the height of the background image.

Code: 
<div class='wrapper'>
 <div class='header'>

  <div class='topmenu'>
     List your equipment
  </div>

  <div class='spry'>
     Home
  </div>

  <div class='headercontent'>
     <h1>A Fresh New Look
  </div>
 </div>
This is the header section which is everything above 'About Our Company'

I always find it useful to put a border round every div during testing to see just where the edges are.



Keith
 
Upvote 0 Downvote
I believe I have it setup for the most part that way as I have my:

<div class = "wrapper">
<div class = "top"> -contains list your equipment, online quote, etc.

</div> -closing top div

<div class = "menu">
<div class = "spry"> - contains Home, Services, Customers, etc.
</div> - closing spry div
</div> - closing menu div

<div class = "splash"> - contains photo of bird with text inside
</div> - closing splash div

<div class = "content">
<div class = "about"> - About Our Company
</div> - closing about

<div class = "news"> - News and Events
</div> - closing news
</div> - closing content

</div> - closing wrapper


I made the background of my wrapper the image of the logo in the upper left with the correct color. My top div is correct where I want it, but I still need my spry menu aligned at the bottom of the menu div.

basically everything is correct now except there is a gap between my menu div and top div and my spry menu isn't align to the bottom of the menu div correctly.

 
Upvote 0 Downvote
currently at is what I have with the following code: I believe this will work with my logo set as the wrapper background? A problem Im seeing in firefox is that on my services dropdown from my spry menu its not appearing in front, is this fixable with a z-index attribute in the spry rule?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meadow Lark Companies Transportation Brokerage</title>
<style type="text/css">
<!--




.wrapper {
width: 900px;
margin-right: auto;
margin-left: auto;
background-image: url(images/testbanner6.png);
background-repeat: no-repeat;
}
.menu {
background-color: acac93;
background-repeat: no-repeat;
height: 35px;
overflow: hidden;
padding-top: 15px;
}

.top a {
color: #060;
font-size: 14px;

}

.top a:hover {
color: #060;
}

.menu .top {
height: 40px;
width: 700px;
float: right;
}
.about .mission {
color: #FFF;
text-align: left;
padding-left: 25px;
font-size: 15px;
}
.about ul {
color: #FFF;
text-align: left;
padding-right: 200px;
font-size: 14px;
}


.menu .Spry {
float: right;
width: 655px;
border-top: 1px solid gray;
clear: both;

}
.top {
text-align: right;
}

.splash {
background-color: 686898;
height: 400px;
background-image: url(images/gettycropped2.jpg);
overflow:hidden;
}

.splash h1 {
color: #FFF;
font-size: 18px;
text-align: right;
padding-top: 75px;
padding-right: 40px;
}
.splash .welcome {
font-size: 20px;
color: white;
text-align: right;
padding-right:25px;
}
.splash .main {
text-align: right;
color: white;
padding-right: 25px;
padding-left: 350px;
}
.about .About.Us {
font-size: 20px;
color: white;
padding-left: 10px;
}
.news .News.and.Events {
font-size: 20px;
color: #000;
padding-left: 35px;
}

.splash .deals {
color: #FFF;
font-size: 16px;
text-align: right;
padding-right: 175px;
}

.content {
height: 400px;
overflow: hidden;
}

.about {
background-color: 789978;
float: left;
height: 100%
width: 400px;
background-image: url(images/leftcolumn_background2_new.png);
height: 485px;
width: 488px;
}

.news {
border: 2px solid gray;
float:right;
width:408px;
height:100%;
background-image: url(images/rightcolumn_background3.png);
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-image: url(images/test%20background.png);
}
-->
</style></head>

<body>
<div class="wrapper">
<div class="top"><p><a href=" Your Equipment</a> <a href=" Quote Request</a> <a href=" Booking</a> <a href=" Loads</a> <a href=" Services</a> <a href=" top>
<div class="menu">
<div class="Spry">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Flatbed</a>
<li><a href="#">Van</a>
<li><a href="#">Heavy Haul</a>
<li><a href="#">Global</a>
<li><a href="#">LTL</a>
<li><a href="#">Cross Border</a>
</ul>
</li>
<li><a href="#">Customers</a></li>
<li><a href="#">Logistics</a></li>
<li><a href="#">Agents</a></li>
<li><a href="#">Contractors</a></li>
<li><a href="#">Logistics</a></li>
</ul>
</div spry>
</div menu>
<div class="splash"><h1>A FRESH NEW LOOK AT TRANSPORTATION</h1><p class="deals">"No Bad Deals"</p><p class="welcome">Welcome to Our Website</p><p class="main">With over two decades of service, Meadow Lark has offered innovative solutions to any transportation needs with on-demand operational services and advanced technology. Customers, contractors, and agents alike benfit from association with our company. Family owned and operated, Meadow Lark is the permier choice for your shipping requirements</p></div>
<div class="content">
<div class="about">
<h1 class="About Us">About Our Company</h1>
<p class="mission">Mission Statement</p>
<ul>
<li>No Bad deals. All players benefit from association with our company.</li>
<li>We are constantly in pursuit of excellence in our image and operations</li>
<li>We do not compare our selves to any other cusiness, only to how WE were yesterday</li>
<li>Our word is our bond</li>
</ul>
</div about>
<div class="news"><h1 class="News and Events">News and Events</h1></div>
</div content>
</div><! wrapper ->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
 
Upvote 0 Downvote
do you think that would work to using the background of my wrapper to display the image in the correct location?
 
Upvote 0 Downvote
Not sure what you are asking there but if the header contained both the logo and the bird picture as it's background and the 3 elements were in separate divs, you can move them around individually.

Code: 
border-width:1px;
border-style:solid;
border-color:#000;



Keith
 
Upvote 0 Downvote
so my Spry menu is fine with my dropdown under Services for only IE, Safari, Chrome, and Firefox all won't display the dropdown. I believe everything in my rules for my menu is correct, any ideas?

thanks
 
Upvote 0 Downvote
ok, I've adding at padding-bottom to my .menu div and when viewing now in firefox I can see that the dropdown which is under services is there but is appearing behind my .splash div content. I don't understand why it appears fine in IE but not in firefox.
 
Upvote 0 Downvote
It is all to do with layering which I find is best avoided on a 2D medium like a web page. I tend to avoid drop down menus, I just do not like them and they are SEO and accessibility unfriendly too, which is even more of a reason to avoid them.

Keith
 
Upvote 0 Downvote
Not sure if there is a way round it as I have very little experience of the drop downs. As for whether Flash would be better, it would work but I think I said in an early post, I would give the 'Services' menu a whole page of it's own in order to sell it better.

Keith
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
546
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
157
jason.lex
jason.lex
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
105
tyutghf
tyutghf
ggriffit
  • Locked
  • Question
strange div positioning 1
Replies
9
Views
148
ggriffit
ggriffit
lupidol
  • Locked
  • Question
Positioning elements, how do I do it ?! 2
Replies
2
Views
111
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top