|
CSS - Cant Place Menu On Right Spot
does anyone know how i can place my menu on the right spot. this is the website
Site the menu is supposed to be placed on this spot ( this is an older version of the layout): Old Layout but i cant get the css-menu there >.< the code for its position Quote: #navcontainer ul { margin-left: 1; padding-left: ; as u can see, margin is 1 and already its too far! if its 0, then its totally on the left-side, i cant set 0.1 or something and if margin is >1 than its too far ofcourse -_- how can i place the menu on the right spot (as shown in the second link)? (it is also supposed to be a bit lower) tats the main problem. if u want u can also comment (suggest) the new layout. i have a hard time choosing which one is better. i am still planning to make changes though. Similar TutorialsHello, I have made playersnutrition.com As you can see, when you go to another page, the menu dosent stay at the top. How do I make it stay at the top???? Hi, I really help someone could help me accomplish what I need in order to finish a project for a friend I started, I am still a newb at CSS and HTML, so if you could explain to me in simple terms this would be ideal. I want to place a button located here in the menu of the website. The image will link to a booking page, I would also like a hover image too if possible. Maybe even have just text with Bold formatting then have an arrow or icon next to it, either way would be fine. If any body could help me this would be great. This is what the index.html file looks like; <body> <div id="wrapper"> <div id="topwrapper"></div> <div id="mainwrapper"> <!-- Header Start --> <div id="header"> <div class="center"> <!-- Logo Start --> <div id="logo"> <a href="./index.html"><img src="./images/logo.png" alt="logo" /></a> </div> <!-- Logo End --> <div id="headerright"> <!-- Menu Navigation Start --> <div id="mainmenu"> <div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://" class="selected">Home</a> <li><a href="./about.html">About</a> <ul> <li><a href="#">Our Company</a></li> <li><a href="#">Vision and Mission</a></li> <li><a href="#">Testomonials</a></li> </ul> </li> <li><a href="#./.html">Services</a> <li><a href="./.html">Vehicles</a> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a> </li> </ul> </li> <li><a href="./.html">Testomonials</a> <ul> </ul> <li><a href="./html">Contact</a></li> </ul> </div> </div> <!-- Menu Navigation End --> </div> </div> </div> Thanks so much in advance, I cant place an image to show you so if anyone understands this confusing posts and still wants to help, email me so I can send you an example. I'm working on a drop down menu that's entirely in CSS, and since it contains several levels and some go below the visible part of the page needing scrolling down (not good) - I need to have the sublists remain in place when the mouse is no longer over. Is there an easy way to do that without involving Javascript? Or if that is needed, how exactly? Please help!!! Thank you! I've been asked to look at the following page: http://www.nicewag.org.uk/meetings2005.htm The user has a table which for some reason has decided it wants to move miles away from everything else. If you scroll down you'll see what I mean. I can't see what is causing something to repel this table so far down. Can anyone assist? Thanks, Geoff here is a pic of my page and where I wanna put the ad code http://img155.imageshack.us/my.php?image=untitled7ko.gif here is the required adcode for hosting Code: <script type="text/javascript"><!-- google_ad_client = "pub-8531861944410416"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_type = "text"; google_ad_channel ="2267135732"; google_color_border = "660000"; google_color_bg = "7D2626"; google_color_link = "FFFFFF"; google_color_url = "DAA520"; google_color_text = "BDB76B"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> here is my overall header 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" dir="{S_CONTENT_DIRECTION}">
<head>
<script type="text/javascript"><!--
google_ad_client = "pub-8531861944410416";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text";
google_ad_channel ="2267135732";
google_color_border = "660000";
google_color_bg = "7D2626";
google_color_link = "FFFFFF";
google_color_url = "DAA520";
google_color_text = "BDB76B";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">
{META}
{NAV_LINpt>
<title>{SITENAME} :: {PAGE_TITLE}</title>
<link rel="stylesheet" href="templates/AcidTech/{T_HEAD_STYLESHEET}" type="text/css">
<script language="javascript" type="text/javascript" src="templates/AcidTech/scripts.js"></script>
<script language="javascript" type="text/javascript" src="templates/AcidTech/formStyle.js"></script>
<link rel="icon" href="templates/AcidTech/images/favicon.ico" />
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
if ( {PRIVATE_MESSAGE_NEW_FLAG} )
{
/* window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); */
}
//-->
</script>
<!-- END switch_enable_pm_popup -->
</head>
<body>
<a name="top"></a>
<img id="formStyleTestImage" src="templates/AcidTech/images/spacer.gif" />
<table width="{T_BODY_BACKGROUND}" cellspacing="0" cellpadding="0" border="0" align="center" id="maintable">
<tr>
<td valign="top" class="content-row"><table border="0" width="100%" cellspacing="0" cellpadding="0" id="logotable">
<tr>
<td align="center" class="logorow1"><div class="logorow2"><a href="{U_INDEX}"><img src="templates/AcidTech/images/logo_mid.gif" height="88" alt="{L_INDEX}" /></a></div></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" id="buttonstable">
<tr>
<td align="center" valign="middle" width="100%" id="header-buttons">
<!-- BEGIN switch_user_logged_out -->
<a href="{U_REGISTER}">{L_REGISTER}</a> •
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<a href="{U_PROFILE}">{L_PROFILE}</a> •
<a href="{U_PRIVATEMSGS}">{L_PRIVATEMSGS}</a> •
<!-- END switch_user_logged_in -->
<a href="{U_SEARCH}">{L_SEARCH}</a> •
<a href="{U_FAQ}">{L_FAQ}</a> •
<a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a> •
<a href="{U_GROUP_CP}">{L_USERGROUPS}</a> •
<a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a>
</td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="content">
<tr>
<td class="content" valign="top">
<!-- BEGIN switch_user_logged_in -->
<center><div class="pm-{PRIVMSG_IMG}"><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></div></center>
<!-- END switch_user_logged_in -->
Thanks for taking the time to read my question. I was wondering if there is a way to put a border around the <area> on an image map. They are href's, so I thought something should happen there. I know you can do an image flip, but then I have to have 2 pictures of everything. I'm just thinking on the fly here but is there something you could do in the css with map and link? I tried this in my .css: Code:
area.hborder:hover {
border-style: solid;
border-color: black;
}
and changed my <area> line to include Code: <area class="hborder" sha ... Here is an example of one of my image maps. thanks for your help, Brad Code: <map name="SBMap"> <area shape="rect" coords="9,32,270,63" href="VSADHelpUnReleased.html" title="Help: Enter New Data UnReleased"> <area shape="rect" coords="9,70,198,104" href="VSADHelpReleased.html" title="Help: Edit Data Released"> <area shape="rect" coords="9,112,85,146" href="VSADHelpPrint.html" title="Help: Print"> <area shape="rect" coords="9,150,272,188" href="VSADHelpImport.html" title="Help: Import Farm Names and Codes"> <area shape="rect" coords="9,190,171,228" href="javascript:void(0)" onclick="NewMonth(EventDesc[41])" title="Help: Herd Info"> <area shape="rect" coords="9,230,91,267" href="javascript:void(0)" onclick="NewMonth(EventDesc[42])" title="Help: Close"> </map> Hi all, I'm a beginner to floating divs etc. so I've been following a tutorial to get what I need and I'm tweaking it here and there. Trouble is I've obviously tweaked something incorrectly. The two column's in the contentHoldingDiv don't line up correctly. Does anyone feel like taking a look at my code and telling me what I've done wrong (any other comments freely welcomed - it's the only way I'll learn). Here's the HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div id="holdingDiv">
<div id="topDiv"><p>You are logged in as <strong>Guest</strong></p></div>
<div id="headerPicDiv">Header Pic</div>
<div id="navDiv">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</div>
<div id="contentHoldingDiv">
<div id="contentDiv">
<h2>Column 1</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id="rightDiv">
<h3>Column 2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
</div>
<div id="footerDiv">
<p>
Site design by <a href="mailto:Lee@LTheobald.co.uk">Lee Theobald</a>
</p>
</div>
</div>
</body>
</html>
And here's the CSS Code:
* {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
background-color: #E6E6E6;
margin: 0px;
padding: 0px;
min-width: 760px;
}
#holdingDiv {
background-color: #F8F8F8;
margin: 20px auto;
width: 760px;
}
#topDiv {
height: 25px;
background-image: url(images/gradient25.jpg);
border: 1px solid #D4D4D4;
}
#topDiv p, #topDiv strong {
line-height: 25px;
text-align: right;
padding-right: 5px;
margin: 0px;
font-size: 10px;
}
#headerPicDiv {
height: 125px;
border: 1px solid #D4D4D4;
}
#navDiv {
height: 25px;
background-image: url(images/gradient25.jpg);
border: 1px solid #D4D4D4;
line-height: 25px;
padding: 0 5px;
}
#navDiv ul {
margin: 0px;
padding: 0px;
}
#navDiv li {
display: inline;
list-style: none;
margin: 0px;
padding: 0px;
}
#contentHoldingDiv {
border: 1px solid #D4D4D4;
padding: 0px;
margin: 0px;
clear: both;
}
#contentDiv {
background-color: red;
width: 600px;
float: left;
}
#contentDiv p {
padding: 5px 3px;
margin: 0px;
#rightDiv {
background-color: orange;
width:157px;
margin-left:600px;
}
html>body #rightDiv {
width:160px;
}
#footerDiv {
height: 15px;
background-image: url(images/gradient15.jpg);
border: 1px solid #D4D4D4;
}
#footerDiv p, #footerDiv a {
line-height: 15px;
text-align: center;
font-size: 9px;
margin: 0px;
}
Cheers, Lee When I resize the browser window on this page, the text "onclick" and the Cart and Search text stay in one place while the other text and background move. Why is this happening, I need everything to move together. This only seems to be happening IE, FF and Chrome seem fine. http://makethemoviehappen.com/darix.html Hi, after having the problem with the div's in IE I got a new problem. I got a clock placed in my sidebar and under it there is some text. In FF it's placed right but in IE not again :S How can I fix this? Link: www.windmolentechnologie.tk Code: index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Windmolentechnologie</TITLE>
<LINK HREF="http://windmolentechnologie.webs.com/css/default.css" REL="stylesheet" TYPE="text/css" />
<style type="text/css">
.hiddenPic {display:none;}
</style>
<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript" src="http://windmolentechnologie.webs.com/js/nav1.js"></script>
<script type="text/javascript" src="http://windmolentechnologie.webs.com/js/klok.js"></script>
<script src="http://static.freewebs.getclicky.com/44044479.js" type="text/javascript"></script><noscript><img alt="Clicky" src="http://in.freewebs.getclicky.com/44044479-fwdb4.gif" /></noscript>
</HEAD>
<BODY>
<div id="container">
<div id="nav">
<img src="http://windmolentechnologie.webs.com/images/Nav2.png" USEMAP="#nav" border="0" name="nav1">
<map name="nav">
<area shape="rect" coords="261,40,339,120" href="home.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt1')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="341,40,419,120" href="inhoud.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt2')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="421,40,499,120" href="logboek.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt3')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="501,40,579,120" href="profielen.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt4')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="581,40,659,120" href="bedrijven.html" alt="Home" target="iframeinhoud" onMouseOver="imageChange('nav1','alt5')" onMouseOut="imageChange('nav1','alt0')" />
</map>
</div>
<div id="banner">
</div>
<div id="content">
<div id="new">
<table id="klok">
<td id="kloktd">
<img src="dg8.gif" name="hr1"><img
src="dg8.gif" name="hr2"><img
src="dgc.gif" name="c"><img
src="dg8.gif" name="mn1"><img
src="dg8.gif" name="mn2"><img
src="dgc.gif" name="c"><img
src="dg8.gif" name="se1"><img
src="dg8.gif" name="se2">
</td></table>
<p id="new1">Dit is een testlijntje</p>
<p id="new2">lolololol</p>
<p id="new2">what happens if this line is a little bit too long for the box?</p>
<p id="new3">fredje pietje ludo</p>
</div>
<div id="inhoud">
<iframe name="iframeinhoud" src="home.html" frameborder="0" height="500" width="540" scrolling="no" allowtransparency="true"></iframe>
</div>
</div>
<div id="footer">
</div>
</div>
<img src="http://windmolentechnologie.webs.com/images/InhoudHome.png" alt="InhoudHome" title="InhoudHome" height="500" width="540" class="hiddenPic">
<img src="http://windmolentechnologie.webs.com/images/InhoudLog.png" alt="InhoudLog" title="InhoudLog" height="500" width="540" class="hiddenPic">
</BODY>
</HTML>
Code: css (will make this shorter later)
html {
margin:0;
padding:0;
height: 100%;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
body {
background-color: #f2f3ed;
margin: 0px;
padding: 0px;
height: 100%;
z-index:0;
position:relative;
text-align: center;
}
#container {
position:relative;
height:auto !important;
min-height:100%;
width: 760px;
margin:0 auto;
}
#nav {
width:100%;
height:160px;
background: url(../images/Nav.png) no-repeat;
}
#banner {
width:100%;
height:101px;
background: url(../images/Banner.png) no-repeat;
}
#content {
width:100%;
height:500px;
background:transparent;
}
#new {
background: #e6e8dc url(../images/New.png) no-repeat;
width:220px;
height:500px;
float:left;
text-align: left;
}
#inhoudhome {
background: #e6e8dc url(../images/InhoudHome.png) no-repeat;
width:540px;
height:500px;
float:left;
text-align: left;
}
#inhoudlog {
background: #e6e8dc url(../images/InhoudLog.png) no-repeat;
width:540px;
height:500px;
float:left;
text-align: left;
}
#inhoudprof {
background: #e6e8dc url(../images/InhoudProf.png) no-repeat;
width:540px;
height:500px;
float:left;
text-align: left;
}
#footer {
background: url(../images/Footer.png) no-repeat;
height:50px;
width:100%;
position:relative;
}
p#inhoud1 {
margin:35px 5px 0px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#inhoud2 {
margin:0px 5px 0px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#inhoud3 {
margin:0px 5px 10px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#new1 {
margin:35px 5px 0px 25px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#new2 {
margin:0px 5px 0px 25px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
p#new3 {
margin:0px 5px 10px 25px;
font-family:Tahoma,"Times New Roman",Georgia,Serif;
font-size:14px;
}
table.tabellog {
border-collapse: collapse;
margin:37px 25px 10px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
table.tableprof1 {
border-collapse: collapse;
margin:37px 25px 5px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
table.tableprof2 {
border-collapse: collapse;
margin:5px 25px 5px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
table.tableprof3 {
border-collapse: collapse;
margin:5px 25px 10px 6px;
width:510px;
border-width: 1px;
border-style: solid;
}
td {
padding:5px;
border-width: 1px;
border-style: solid;
}
td.datlog {
text-align:center;
font-weight:bold;
width:90px;
}
td.omschlog {
font-weight:bold;
}
td.tijdlog2, td.datlog2 {
text-align:center;
}
td.tijdlog {
text-align:center;
width:100px;
font-weight:bold;
}
td.kol1 {
font-weight:bold;
width:125px;
}
td.kol1foto {
width:100px;
height:125px;
}
table {
border-color:#000;
}
table#klok {
margin:64px 5px 0px 57px;
border-width:0px;
}
td#kloktd {
height:45px;
border-width:0px;
}
Hi Everyone, I've been trying for weeks now to get my footer to sit at the bottom of my screen. I've read all of the how-to articles regarding footers and tried what seems like everything! After some investigation with Firebug I've determined that my problem seems to be some of my "wrapper" divs. My container and pagewrapper divs should be encompassing everything on the screen but they are not. If you wouldn't mind taking a look for me, I would REALLY appreciate it. Right now I have the grey footer just chillin' in the middle of the page as you can see. www.RoundtopRiders.com/v2/ THANK YOU!!! Jason Is it possible to use CSS to place one image over the top of the other? For what I mean go he celticblues dot com/test/test.html I could do the same thing via photoshop, but I want to do it with CSS as I have several to do and I am not sure of the relative sizes yet and don't want to keep redoing the photoshop thing. Ed Hi! I've got a problem thats driving me mad. i got two divs inside my Content-div. The Text-div and the Box-div at the moment they are arranged like this: data.fuskbugg.se/dipdip/thisishowitis.jpg In the Box-div i've inserted two pictures that i want vertical aligned and the Box-div should be to the right i want it to look like this data.fuskbugg.se/dipdip/howitshouldbe.jpg with the Text-div and the Box-div next to each other. NOT on top of each other PLEASE help me out / Dippah Hi I would like to know where should I go to get an easy, small script so that I can use multi-level drop down menus in my website? I googled and came up with a supposed menu framework.. it looked easy but when I tried it, it didnt work.. i have a site that if the page isn't cached, some of the content starts like, at the top of the page and then shifts in to it's positioned place. why does this happen? how can i stop it? Hi, I have a problem with creating a CSS banner div. I can't seem to get the .centeredbox to the absolute top of the page, while keeping it centered with auto margin: Code: <html>
<head>
<title>Untitled Document</title>
<style>
.wrapperbox {text-align: center; }
.centeredbox {width: 682px; margin: 0 auto 0 auto; text-align:left; background-color: #000000;BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 11px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid;}
</style>
<div class="wrapperbox"></div>
<div class="centeredbox"></div>
</head>
<body>
</body>
</html>
With this code it keeps a little space between the div and the top of the page. I don't want that space . Does anyone have a solution? I would like to have a header on my page with my logo in the top left corner, and a cloud image going the rest of the way across the top. I set up the cloud image as a background, but wanted the logo to be clickable so it is set up in the html as an image. The problem is that I want the image to be fixed in the corner so that when the visitor scrolls, it stays at the top. It looks good in Firefox and in Chrome, but in IE it is a few pixels offset from the corner and I have no idea how to fix it. See what I mean he felixairservices.com Here is my css for the logo: Code: body
{
background:#6699BB url('sky.jpg') no-repeat top right fixed;
background-size: 90% 228px contain;
}
img.logo
{
position:fixed;
top:0px;
left:0px;
margin:0;
padding:0;
border-style:none;
}
And here is the html I am using to display it: Code: <a class="logo" href="index.html" border="0"><img class="logo" src="Logo.jpg" valign="top" align="left" border="0"></a><br> Any help would be appreciated. I'm just a simple AC contractor trying to build a decent web page for my business. Hey everyone, i'm having a bit of trouble with a page i'm making, it seems no matter what i do this one div one left align some text in it. It seems to center everything and i cant stop it from doing it, also the div's inside wont all be on the same line as in one after the other it's the Latest Blog section. hxxp://24.141.168.102:8080/ar/?page=blog That's my personal web server i use so if someone could have a look at this and get back to me i'd really appreciate it. Hello. This is the first time I've tried a complete CSS layout, and I just have one bothersome problem. I have everything inside a #container div. I have a min-height set for the container, since in Firefox if I don't have that it just wraps the border around the background image. No matter where I put the footer div, it hangs over the min-height border. However, if I put footer inside another tag called content ( #content #footer { ) it does stay in. But I don't even have a content div in the css! I'm so confused. *lol* Furthermore, by using Float for the navigation div instead of absolute positioning, it shows up with several pixels difference between IE and Firefox. If anyone could help me with this, I would be much obliged. The page is he http://frenziedsilence.com/nygiml/index.php And the CSS: http://frenziedsilence.dom/nygiml/nygiml.css thanks in advance.. -kathryn Hi i am currently designing my first webby with out using frams and tables for the layout (using dreamweaver 2004mx) and i am now using layers and css for the layout but my problem is this: i used to use an iframe to link things from my nav bar to load in. but now i am not using frames is there anyway to make content load inside a layer on the page or do i have to make separate pages for each link and expect it to load a new page each time? i know that usin css is alot faster than using frames but even when linking to seperate pages you get that little blink as the pages switch.... any help what so ever would be much appreciated thanks in advance N3cr0 |
|||||||