CSS Menu... with images, NO WRAP? 2

[tqeonline]

I have created a few DIV's as follows.
1. A div for the background of the menu to span 100%
2. A div for the MENU that holds the items that float left
3. A div that holds the images that float right

however I can't get the two last DIV's that stay as one line when the page is minimized. i'm newer to CSS so can someone help?

	<div id="background">
	    <div id="menu">
		    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" ItemWrap="False" >
                    <DynamicItemTemplate>
                        <%# Eval("Text") %>
                    </DynamicItemTemplate>
                    <Items>
                        <asp:MenuItem Text="HOME" Value="HOME"></asp:MenuItem>
                        <asp:MenuItem Text="ADMIN" Value="ADMIN"></asp:MenuItem>
                        <asp:MenuItem Text="AUTOMATION" Value="AUTOMATION"></asp:MenuItem>
                        <asp:MenuItem Text="COMPLIANCE" Value="COMPLIANCE"></asp:MenuItem>
                        <asp:MenuItem Text="DEFECTS" Value="DEFECTS"></asp:MenuItem>
                        <asp:MenuItem Text="DOCUMENTATION" Value="DOCUMENTATION"></asp:MenuItem>
                        <asp:MenuItem Text="ICARE METRICS" Value="ICARE METRICS"></asp:MenuItem>
                        <asp:MenuItem Text="DATA STAGING" Value="DATA STAGING"></asp:MenuItem>
                        <asp:MenuItem Text="RELEASES" Value="RELEASES"></asp:MenuItem>
                        <asp:MenuItem Text="UTILITIES" Value="UTILITIES"></asp:MenuItem>
                        <asp:MenuItem Text="VIDEOS" Value="VIDEOS"></asp:MenuItem>
                    </Items>
                <StaticItemTemplate>
                <%# Eval("Text") %>
                </StaticItemTemplate>
            </asp:Menu>
        </div>
        <div id="images">
            <asp:ImageButton ID="imgPrint" runat="server" ImageUrl="~/images/Print.png" position="relative" Height="20px" Width="20px" ToolTip="Print Content" PostBackUrl="JavaScript:window.print();" />
            <asp:ImageButton ID="imgHelp" runat="server" ImageUrl="~/images/Help.png"  position="relative" Height="20px" Width="20px" ToolTip="How To's" PostBackUrl="[URL unfurl="true"]https://oneteam/Products/BOP/SQATeam/Procedures/SQA[/URL] Dashboard/" />
            <asp:ImageButton ID="imgUser" runat="server" ImageUrl="~/images/User.png"  position="relative" Height="20px" Width="20px" ToolTip="SQA Directory" />
            <asp:ImageButton ID="imgEmail" runat="server" ImageUrl="~/images/Email.png"  position="relative" Height="20px" Width="20px" ToolTip="Contact Us" PostBackUrl="~/Contact_Us.aspx" />
        </div>
    </div>

CSS:

#background
{
    width: 100%;
    background: rgb(70,130,180);
}

#menu 
{
    width:950px;
    background: rgb(70,130,180);
}
    
#menu a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	text-transform: uppercase;
}

#menu a:hover {
	text-decoration: underline;
}

#images 
{
    float:right;
    width:95px;
}

- Matt

"If I must boast, I will boast of the things that show my weakness"

- Windows 2003 Server, 98 SE, XP
- VB.NET, VSTS 2010, ASP.NET, EXCEL VBA, ACCESS, SQL 2008

 

[snitin78]

Avoid using pixel widths in your styles. Fixed pixel widths may or may not work depending on the screen resolution, browser/client width etc. It's better to use %age widths. That way, the browser can readjust the content based on the available client width. For example, try this in your styles:

#menu
{
    width:50%;
    background: rgb(70,130,180);
}
    
#images
{
    float:right;
    width:45%;
}

Of course, you will have to change the %age based on your needs. If that does not work, then post your generated HTML here. That might help us debug a little further. You have posted asp tags which some of us (at least I can not) render on our end.


Nitin

 

[Geates]

No server-side code please. It tends to be irrelavant.

I believe your menu must float as well.

#menu
   [red]float: left;[/red]
   width:50%;
   background: rgb(70,130,180);
}

-Geates

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding

"There are seldom good technological solutions to behavioral problems."
- Ed Crowley, Exchange guru and technology curmudgeon

 

[tqeonline]

I'm at home right now but if I let it be percentages it will wrap the lines. My end goal is to have the menu and the images on one line and I'm not sure percentages or the float left will work. However I will try it in the morning.

- Matt

"If I must boast, I will boast of the things that show my weakness"

- Windows 2003 Server, 98 SE, XP
- VB.NET, VSTS 2010, ASP.NET, EXCEL VBA, ACCESS, SQL 2008

 

[vacunita]

Basically with floats what you want is to make sure there is enough space to accommodate them all.

However nowhere in your CSS is your menu div floated.

If you want 2 divs to be in the same line, both need to be floated, and enough space has to exist to accommodate them.

Float your menu div left, and it should work.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[Geates]

I think they will wrap when the window is resized. Instead, the parent container needs to be a fixed width (the example below incorporates a containing div - appropriately named, "container"). Then set the menu to float left.

Instead of using a div as the background, simply use the element already there, <body>.

Say.

<body>
   <div id="container">
      <div id="menu">
         Stuff
      </div>
      <div id="images">
         Pictures
      </div>
   </div>
</body>

CSS

/* Basic Element */

body {
   width: 100%;
   backgound-color: #000000;
}

/* Specific DIVs */

#container {
   width: 800px;
   background-color: #444444;
}

#menu {
   float: left;
   width:600px;
   background-color: #999999;
}

#images {
   width: 200px;
   background-color: #CCCCCC;
}

-Geates

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding

"There are seldom good technological solutions to behavioral problems."
- Ed Crowley, Exchange guru and technology curmudgeon

 

[vacunita]

They will wrap when there is not enough space. As long as no margin, padding or border are defined the above example will work. Otherwise padding, margin and border also take space, so you need to take those into consideration as well.

By the way setting it to percentages helps when dealing with resizing windows. Because the width will change depending on the window size.

body {
   width: 100%;
   backgound-color: #000000;
}

/* Specific DIVs */

#container {
   width: 100%;
   background-color: #444444;
}

#menu {
   float: left;
   width:60%;
   background-color: #999999;
}

#images {
   width: 20%;
   background-color: #CCCCCC;
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[tqeonline]

ok so Vacunita your method works. However, i would like for the Menu to be left and the images to be at the right.

Meaning is there a way to have a minimum width of say

800px and then if the width is greater than that the menu stays on the left of the page and the images stay on the right of the page? So the ability to grow and shrink but once it gets so small it doesn't wrap.

Having the "Container" makes it one width.

- Matt

"If I must boast, I will boast of the things that show my weakness"

- Windows 2003 Server, 98 SE, XP
- VB.NET, VSTS 2010, ASP.NET, EXCEL VBA, ACCESS, SQL 2008

 

[Geates]

min-width: 800px;

-Geates

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding

"There are seldom good technological solutions to behavioral problems."
- Ed Crowley, Exchange guru and technology curmudgeon

 

[tqeonline]

Geates - that solved it.

final CSS:

#container 
{
    width: 100%;
    min-width:975px;
    background: rgb(70,130,180);
}

#menu 
{
    width:875px;
    float:left;
}
   
#images 
{
    float:right;
    width:100px;
}

- Matt

"If I must boast, I will boast of the things that show my weakness"

- Windows 2003 Server, 98 SE, XP
- VB.NET, VSTS 2010, ASP.NET, EXCEL VBA, ACCESS, SQL 2008

 

[vacunita]

Glad it worked.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[Geates]

actually, I think vacunita told me about 'min-width:' last week or so.

-Geates

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."
- Martin Golding

"There are seldom good technological solutions to behavioral problems."
- Ed Crowley, Exchange guru and technology curmudgeon