|
CSS - Alignment Problems
Hi Guys,
I'm trying to create a simple search form. It will be a set of horizontal links seperated by pipes '|' with a simple form field search box below the set of links. I've it pretty much laid out how I want, but the links above the search box are not alinging with the search box correctly. I want the links pushed up against the text box. Here is a pic showing how I want it to look. The first search box is how my code display now. The second box is what I am trying to achieve. http://i617.photobucket.com/albums/...aderexample.jpg Here is the code I have. I'm hoping to create a div that will wrap around this code and contain it well. I have a div defined in the code, but it doesn't have any attributes. Any advice on how to change this to get it to display how I want? Please note, the span/class attributes found in the code relate to a style sheet I have defined elsewhere. However, it doesn't affect the alignment so I didn't include the stylesheet. There is no other CSS defined yet. My guess is I need to define a class for the DIV and parameterize that class to smash the two elements (links and search box) together. Code: <div> <a href="http://www.company.com" class="active" title="Cars for Sale"> <span class="headersearchlink">Vehicles</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" class="active" title="Aircraft"> <span class="headersearchlink">Aircraft</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" title="Homes for Sale or Rent"> <span class="headersearchlink">Homes</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" title="Apartments"> <span class="headersearchlink">Apartments</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" title="Jobs & Resumes"> <span class="headersearchlink">Jobs</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" title="Pets for Sale"> <span class="headersearchlink">Pets</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" title="Items for Sale"> <span class="headersearchlink">Items for Sale</span></a><br> <form method="post" action="" name="search-form"> <INPUT class="headersearchinput" type="Text" name="postal" size="85"> <INPUT class="headersearchinput" type="submit" name="search" value="search"> </form> </div> Similar TutorialsI have a joomla site that i have install joomla with autostand all works fine but when i turn on the slider it mess the hole design up how can i sort this. It also w3c validator show errors after i turn it on. Any help would be great my site here my page apears perfectly in safari and mac ie but it incorrectly in pc ie. the div 'container' is centered in safari and mac ie but left aligned in pc ie. here is the css and html that effects it: css: Code: body {
background: repeat-y center url(bgglow.gif);
margin-top:0;
}
#container {
background: no-repeat url(bg.jpg);
width: 788px;
height: 427px;
border: solid;
border-width: 1;
margin-left: auto;
margin-right: auto;
}
#links {
position: absolute;
top: 5px;
width: 180px;
border: solid;
border-width: 1;
}
html: Code: <html>
<body>
<head>
<style type="text/css" title="currentStyle">
@import "style.css";
</style>
</head>
<div id="container">
<div id="links">
...
</div>
<div id="content">
<p>
..
</p>
</div>
</div>
i have attached a screenshot from safari of how it is meant to look, and a screen shot from pc ie. thanks for any help! I am currently working on a site with a content section and a menu to the right of it. Im using CSS to do this and it seems to work in firefox, but not IE. What I mean is that the menu that is suppose to be to the right is all the way at the bottom and it should be right next to the content section. Do I have my index.php right? Example: <div id="content"> </div> </div id="rightMenu"> </div> I tried using float: left; on the rightMenu section, but it doesnt seem to work. Any hacks to make this work in IE? Hi Guys, I'm having trouble with some alignment. I have a main div called 'left_sidebar' that has a few elements contained within it. At the top is a div that contains a user's profile pic, their name, and a link to edit their profile. Below that will be some navigation links, and some other items that will be dynamically populated depending on the page. The div that contains the photo, name, and profile edit link is giving me some trouble. Here's a pic of how it is currently Here's what I'm hoping to get. Below is the code I have. Nothing is being inherited that should affect how it's laid out or presented. Thoughts? I'm racking my brain and can't get this right. Also.. I need the border div to expand since the height of the image will not be set in stone. Code:
#left_sidebar
{
float: left;
margin: 0 0 .5em .5em;
width: 160px;
}
#left_sidebar_border
{
border: 1px solid #e87b02;
overflow: auto;
height: 100%;
margin: 0em 0em 1em 0em;
}
#left_sidebar_pic
{
margin: .5em .5em .5em .5em;
}
#left_sidebar_name_action_container
{
margin: 0em 0em 0em 0em;
}
#left_sidebar_name_action
{
}
#left_sidebar_name
{
}
<div id="left_sidebar">
<div id="left_sidebar_border">
<div id="left_sidebar_pic">
<a href="http://details.at/members/members.cfm?q=mpv1&url=jasonallenking">
<img style="float:left"src="http://details.at/imagehost/profiles/539/xs_IMAG0513.jpg">
</a>
</div>
<div id="left_sidebar_name_action_container">
<div id="left_sidebar_name">
<span class="mediumboldtext">
<a href="http://details.at/members/members.cfm?q=mpv1&url=jasonallenking">
Jason King
</a>
</span>
</div>
<div id="left_sidebar_name_action">
<span class="mediumtext">
<a href="http://details.at/members/members.cfm?q=pbi">edit profile</a>
</span>
</div>
</div>
</div>
</div>
I can't get the Sidebar and Content divs to line up with each other. I tried floating sidebar left and content right but that only made it worse. What am I missing? http://ror.twisted-delusions.net/template/brc.html http://ror.twisted-delusions.net/template/style2.css Actually, I just realized I was trying to float and position relatively. But when I removed the positioning and just used floats it would not stretch my container div, howcome? I added clear all but that didn't do anything. http://ror.twisted-delusions.net/template/brc2.html http://ror.twisted-delusions.net/template/style3.css -------------------------------------- OK, NVM, I needed a div below the floats to clear them >.< you can close this topic. Almost got my layout sorted, however i am having a really anoying alignment issue in Ie6, firefox works fine. The right-content div is off by 3px, i cant work out why. I am having to use two divs as opacity is inherited by child content in each div - i get round this by overlaying a 'content div' with absolute positioning. Page can be seen he www.monsterserve.net/new.htm and code is below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{
padding:0px;
margin:0px;
}
#container
{
position:relative;
width: 900px;
height: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 10px; /* offset 10px from page top */
text-align:left;
border: 1px solid black;
/*background-image: url('car.jpg');
background-repeat: no-repeat;
background-position:bottom right;*/
}
#left
{
width:500px;
float: left;
border-right: 1px solid black;
height: 500px;
background-color: gray;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
#right
{
margin-left:600px;
width:200px;
height:500px;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: gray;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
#left-content
{
position:absolute;
width: 500px;
left:0px;
top:0px;
}
#right-content
{
left: 603px;
\left: 602px;
l\eft: 603px;
position:absolute;
background-color:#0066CC;
position:absolute;
width:200px;
top:0px;
border: 1px solid black;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="left-content"></div>
<div id="right-content">right content</div>
</div>
</body>
</html>
Thanks in advance, PS> note that i have tried doing that \ thing for positioning (i saw someone doing that for width so i thought it may work for positioning too ) If you take a look at http://www.babbnet.com/dev/test_2.html you'll see that I'm trying to float images in text. I'm seeing a couple of problems with this. Both problems are evident on the first image. Firstly the text is overlapping the image slightly. Secondly the clear:left property is causing the first image to position itself below the menu block on the left. The image's should actually be level with the start of the text. Can anyone suggest what might be done? Thanks, Geoff I have created my first tableless layout with CSS. I have the layout done. All my divs align how I would like them too. However, when I add the XHTML doctype the DIV alignment suddenly goes out of place. The doctype I used was: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> In an attempt to solve the problem, I used the XHTML validator at the W3C site. I was able to fix all the errors to make it valid XHTML 1.0 Strict. I also validated my CSS style sheet; no errors where returned. However, it said that in order for it to work properly, I must add a parse tree. (What are they talking about?) After all this validation my div alignments are still incorrect. Could someone show me what I did wrong? With Doctype http://www.depiction.net/beta/index.php Without Doctype http://www.depiction.net/beta/index2.php In Firefox, my text will align perfectly. However, IE will not show the text in the proper spot and I can't come up with a way to over come this. Heres my css document: /* CSS Document */ #header { margin: auto; background-image:url(images/header.jpg); width:800px; height:158px; left: auto; top: auto; right: auto; bottom: auto; background-position: center; } #headernav { font-family: "Times New Roman", Times, serif; font-size: 14px; font-style: normal; color: #4B60AF; font-weight: normal; word-spacing: 12px; margin-top: -42.5px; margin-right: auto; margin-bottom: auto; margin-left: auto; any suggestions? BTW the text is in headernav Hey, I have a drop down menu that when i view it in Internet Explorer is aligned fine but isnt working properly in firefox. I think the problem lies in the white spaces either side of the page. If the page fits the screen snug there isn't an alignment problem, this is better explained when viewing the site on different resolutions. I'm pretty sure the problem lies in the css but i don't know enough pinpoint it. I can't post the address on the forum because of the rules but its www northsidestageschool com (where spaces are dots). Sorry if this breaks rules but my problem really doesn't make any sense with out the link! Any ideas? Mike http://members.journeyon.net/index.php You can only view the homepage...and I know the source is messy but I'm curious why the header image isn't lining up. I know i can use negative margins but I think I'm just missing something elsewhere that would allow me to use 0px margins, etc. Thanks in advance for the help! Here's the relevant css: Code:
body
{
text-align: center;
}
#main
{
background: #FFFFFF;
width: 800px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
text-align: left;
border: 2px solid #677617;
}
#header
{
width: 800px;
height: 200px;
margin-top: 0px;
margin-left: 0px;
padding-bottom: 5px;
border-bottom: 2px solid #677617;
}
OK, I am pulling my hair out on this one. Since new users are banned from posting url's in the body of a post you will have to get my domain out of my user profile and add "/wordpress" for the page and "/wordpress/wp-content/themes/Rancho%20Vista%20Theme/style.css" for the css). There are three areas that I am having a problem with. For reference, if you view this in Safari 3, you will get an idea of what it should look like. 1. In a Mozilla browser (Flock), the main menu is lower than it should be, and the size of the box in "Upcoming Events" is a couple pixels too small (you will see it cuts off the triangle at the bottom 2. In IE6 the "Last Blog Post" and "Upcoming Events" boxes' sizes are way too big. The white space between the logo and the green nav bar is too large. 3. In IE7 the "Last Blog Post" and "Upcoming Events" boxes' sizes are too small. Can somebody help please? CSS & HTML validate as well. I am relatively new to css, and I am having a hard time designing cross-browser code. There has to be an easier way. FMI (For My Information) - is there any information out there that shows a listing of what css is not recognized by each of the browsers? Need assistance determining the cause of the various display issues in IE as indicated by this screen shot from 'browsershots.org': http://www.mandgweb.net/efw_php/cbc/bs_ss1.png particularly a) the pushing down of the main content and obstruction of the background image b) the explosion occurring in the 'free trial' sidebar (excessive padding, non-centered) I am not properly set up to test all platforms/browsers and have reviewed and attempted various solutions and reloading to 'browsershots' to try them. Actual site pages he http://www.mandgweb.net/efw_php/emp...rds_program.php CSS: http://www.mandgweb.net/efw_php/css/efw.css Pages display as intended on: Mac OSX 10.6.8 on Firefox/3.6.19 Safari Version 5.1 (6534.50) Chrome 13.0.782.112 Windows XP Pro (Version 2002) Firefox/4.01 Chrome 11.0.696.65 Thank you in advance for your assistance. Ok, I've completed w3c validation, there were about 33 errors and it now shows green, saying the page was validated. However, the website is not aligned properly, I'm not sure if it's css or html. Can you guys help me further to getting it aligned and proper? Site: aspekt.blogdns.com/ahs/layout2/index2.php Thanks again for all the help guys. //index2.php Code:
<?php
include 'header.php';
include 'blocks.php';
?>
<div id="maincontent">
<table width="875" cellspacing=0 cellpadding=0 border=0>
<tr>
<td valign="top" bgcolor="#e5e5e5">
<strong>Welcome</strong>
<p>
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</p>
</td>
</tr>
</table>
</div>
</body>
</html>
// header.php Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>AHS v2</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="css/menu-style.php" type="text/css">
<script type="text/javascript" src="css/menu.php"></script>
</head>
<div id="pagewrapper">
<div id="header">
<a href="/"></a>
</div>
<table border='0' cellspacing='0' cellpadding='0'width="875">
<tr>
<td colspan="2">
<div id="nav">
<ul id="udm" class="udm">
<li><a tabindex="10" title="Students" class="nohref">Students</a>
<ul>
<li><a tabindex="10" title="Alumni" href="">Alumni</a></li>
<li><a tabindex="10" title="Blue Pride" href="">Blue Pride</a>
<ul>
<li><a tabindex="10" title="Overview" href="">AHS Music</a></li>
<li><a tabindex="10" title="Overview" href="">Athletics</a></li>
<li><a tabindex="10" title="Overview" href="">Boosters Club</a></li>
<li><a tabindex="10" title="Overview" href="">Community Service</a></li>
</ul>
</li>
<li><a tabindex="10" title="Student Work Drop Down" class="nohref">Student Work</a>
<ul>
<li><a tabindex="10" title="AHS Music" href=""><i>Eagles Eye</i></a></li>
<li><a tabindex="10" title="Athletics" href="" target="_blank">Jewelry</a></li>
<li><a tabindex="10" title="Boosters" href="">Multimedia</a></li>
</ul>
</li>
</ul>
</li>
<li><a tabindex="10" title="Parents" class="nohref">Curriculum</a>
<ul>
<li><a tabindex="10" title="" href="">AHS Rubrics</a></li>
<li><a tabindex="10" title="" href="">Career and Technical Programs</a></li>
<li><a tabindex="10" title="" href="" target="_blank">Guidance</a></li>
<li><a tabindex="10" title="" href="">NEASC</a></li>
<li><a tabindex="10" title="" href="">Program of Studies</a></li>
</ul>
</li>
<li><a tabindex="10" title="Community" class="nohref">Information</a>
<ul>
<li><a tabindex="10" title="" href="">Announcements</a></li>
<li><a tabindex="10" title="" href="">Blue Notes</a></li>
<li><a tabindex="10" title="" href="">Calendar</a></li>
<li><a tabindex="10" title="" href="">Contact Information</a></li>
<li><a tabindex="10" title="" href="">Directions</a></li>
<li><a tabindex="10" title="" href="">Handbook</a></li>
<li><a tabindex="10" title="" href="">Health Center</a></li>
<li><a tabindex="10" title="" href="">Mission Statement</a></li>
<li><a tabindex="10" title="" href="">Parent Connection</a></li>
<li><a tabindex="10" title="" href="">Summer Reading</a></li>
</ul>
</li>
<li><a tabindex="10" title="Utilities" href="">Contact</a></li>
</ul>
</div>
</td>
</tr>
</table>
</div>
// blocks.php Code:
<div id="blockcontent">
<table align="right">
<tr>
<td valign="top" width="200">
<table cellspacing=0 cellpadding=4 border=0>
<tr bgcolor="#cccccc"><td>
<strong>Account Login</strong>
<p align="left">
<form name="login" method="post" action="login.php">
<br>
<div align="left">
Username: <input name="myusername" type="text" id="myusername">
<br>
Password: <input name="mypassword" type="text" id="mypassword">
<br></div><br>
<input type="submit" name="Submit" value="Login">
</form>
</td></tr>
<tr><td><img src="/Graphics/blank.gif" height=1 width="200" ALT=""></td></tr>
<tr bgcolor="#cccccc"><td>
<a style="font-weight:bold;" href="/calendar/">Calendar of Events</a><p />
<center>
<table class="calendar">
<tr>
<td align="center" valign="top"> </td>
<td align="center" valign="top" class="calendarHeader" colspan="5">December 2006</td>
<td align="center" valign="top"> </td>
</tr>
<tr>
<td align="center" valign="top" class="calendarHeader">S</td>
<td align="center" valign="top" class="calendarHeader">M</td>
<td align="center" valign="top" class="calendarHeader">T</td>
<td align="center" valign="top" class="calendarHeader">W</td>
<td align="center" valign="top" class="calendarHeader">T</td>
<td align="center" valign="top" class="calendarHeader">F</td>
<td align="center" valign="top" class="calendarHeader">S</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"><a class="calendar" onMouseOut="kill();" onMouseOver="popup('<strong>Events on
12/1/2006</strong>03:00 pm Testing javapopup event <br/>','#ddd','0');">1</a></td>
<td align="center" valign="top" class="calendar">2</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar">3</td>
<td align="center" valign="top" class="calendar">4</td>
<td align="center" valign="top" class="calendarToday">5</td>
<td align="center" valign="top" class="calendar">6</td>
<td align="center" valign="top" class="calendar">7</td>
<td align="center" valign="top" class="calendar">8</td>
<td align="center" valign="top" class="calendar">9</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar">10</td>
<td align="center" valign="top" class="calendar">11</td>
<td align="center" valign="top" class="calendar">12</td>
<td align="center" valign="top" class="calendar">13</td>
<td align="center" valign="top" class="calendar">14</td>
<td align="center" valign="top" class="calendar"><a class="calendar" onMouseOut="kill();" onMouseOver="popup('<strong>Events on
12/15/2006</strong>11:00 am Testing javapopup event <br/>','#ddd','0');">15</a></td>
<td align="center" valign="top" class="calendar">16</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar">17</td>
<td align="center" valign="top" class="calendar">18</td>
<td align="center" valign="top" class="calendar">19</td>
<td align="center" valign="top" class="calendar">20</td>
<td align="center" valign="top" class="calendar">21</td>
<td align="center" valign="top" class="calendar">22</td>
<td align="center" valign="top" class="calendar">23</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar">24</td>
<td align="center" valign="top" class="calendar">25</td>
<td align="center" valign="top" class="calendar">26</td>
<td align="center" valign="top" class="calendar">27</td>
<td align="center" valign="top" class="calendar">28</td>
<td align="center" valign="top" class="calendar">29</td>
<td align="center" valign="top" class="calendar">30</td>
</tr>
<tr>
<td align="center" valign="top" class="calendar">31</td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
<td align="center" valign="top" class="calendar"> </td>
</tr>
</table>
<br />
<a href="/eventRequest/">Submit an Event</a>
</center>
</td></tr>
<tr><td><img src="/Graphics/blank.gif" height=1 width="200" ALT=""></td></tr>
<tr bgcolor="#dddddd"><td>
<strong>Box number 2</strong>
<br><br>
Loreum Ipsum
</td></tr>
<tr><td><img src="/Graphics/blank.gif" height=1 width="200" ALT=""></td></tr>
<tr bgcolor="#cccccc"><td>
<strong>Site Statistics</strong>
<p align="left">
<a href="/visiting/">Visitors:</a><br />
<br />
</p>
<p align="left">
<strong>Session Information:</strong><br />
0 minute, 0 second<br />
Language: English<br />
</p>
<p align="left">
<strong>Page Generation:</strong><br />
Generated in 0 seconds
</p>
</td></tr></table>
<p />
</td>
</tr>
</table>
</div>
Hey guys, I'm trying to aling my menu in my new website. I'm trying to align the buttons on the bottom of the dark div on the top of the page. Its not working at all, and FF en IE are showing different stuff: So, in both browsers, I cant get it to work. I want the two buttons to be aligned on the bottom of the dark part, like tabs. Next to eachother. Any (bright) ideas? Thanks! This is the complete code I'm using: html Code: Original - html Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <style> .shadowbox {margin-bottom:4px;background: #dfdfdf; border: 1px solid #f5f5f5; position: relative;top: 2px;left: 2px;} .lightyellow {padding:10px;background: #FFFFCC;border: 1px solid #B6B6B6;color: #242424;} .shadowbox div.normal {position: relative;top: -2px;left: -2px;} #content {width: 90%; margin-top: 15px; padding: 15px; margin-left: 5%; background: #FFFFFF; border: 1px solid #000000; text-align: left;} #header {margin: 0px; padding: 0px; padding-left: 5%; background: #333333; height: 65px; text-align: left; } #logo { padding-top: 10px} body {padding: 0px; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80%; background-image: url('images/back.gif'); background-repeat: repeat; } h1 { font-size: 150%; padding: 0px; margin: 0px; padding-bottom: 5px; padding-left: 2px; } #copyright { text-align: center; font-size: 10px; margin-top: 25px; color: #7D7D7D; } </style> </HEAD> <BODY> <div id='header'> <div id='logo'> <img src='images/logo.png' alt='InvenI'> </div> <img src='images/zoeken_inactive.gif'> <img src='images/zoeken_inactive.gif'> </div> <div id='content'> <h1>Mijn Verlanglijstje</h1> <div class='shadowbox'> <div class='normal lightyellow'> hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br /> </div> </div> <div class='shadowbox'> <div class='normal lightyellow'> hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br /> </div> </div> </div> <div id='copyright'> Geen enkele advertentie wordt gehost op InvenI, InvenI is dus ook niet verantwoordelijk voor hun inhoud.<br /> InvenI.nl is niet verantwoordelijk voor (gevolg)schade ontstaan door het gebruik van deze site.<br /> Geregistreerde namen zijn eigendom van hun eigenaren.<br /> Meer informatie over uw Privacy.<br /> </div> </BODY> </HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
.shadowbox {margin-bottom:4px;background: #dfdfdf;
border: 1px solid #f5f5f5; position: relative;top: 2px;left: 2px;}
.lightyellow {padding:10px;background: #FFFFCC;border: 1px solid #B6B6B6;color: #242424;}
.shadowbox div.normal {position: relative;top: -2px;left: -2px;}
#content {width: 90%; margin-top: 15px; padding: 15px; margin-left: 5%; background: #FFFFFF; border: 1px solid #000000; text-align: left;}
#header {margin: 0px; padding: 0px; padding-left: 5%; background: #333333; height: 65px; text-align: left; }
#logo { padding-top: 10px}
body {padding: 0px; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80%; background-image: url('images/back.gif'); background-repeat: repeat; }
h1 { font-size: 150%; padding: 0px; margin: 0px; padding-bottom: 5px; padding-left: 2px; }
#copyright { text-align: center; font-size: 10px; margin-top: 25px; color: #7D7D7D; }
</style>
</HEAD>
<BODY>
<div id='header'>
<div id='logo'>
<img src='images/logo.png' alt='InvenI'>
</div>
<img src='images/zoeken_inactive.gif'>
<img src='images/zoeken_inactive.gif'>
</div>
<div id='content'>
<h1>Mijn Verlanglijstje</h1>
<div class='shadowbox'>
<div class='normal lightyellow'>
hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />
</div>
</div>
<div class='shadowbox'>
<div class='normal lightyellow'>
hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />
</div>
</div>
</div>
<div id='copyright'>
Geen enkele advertentie wordt gehost op InvenI, InvenI is dus ook niet verantwoordelijk voor hun inhoud.<br />
InvenI.nl is niet verantwoordelijk voor (gevolg)schade ontstaan door het gebruik van deze site.<br />
Geregistreerde namen zijn eigendom van hun eigenaren.<br />
Meer informatie over uw Privacy.<br />
</div>
</BODY>
</HTML>
Hi! I'm working on a design for an art gallery client that calls for a primary image of variable width with static alignment to the right and bottom, with a row of thumbnails below that align with the left edge of the image. This is working fine in FF and Chrome, but I can't seem to get IE to constrain the containing div by the image width. The thumbnails, floated left, go all the way to the edge of the layout... I've tried different combinations of positioning on the containing div (you can see the comments in my CSS), but can't seem to get it to go. The URL in question is here . Any help would be mightily appreciated! -BBD I'm having a problem with my drop menu
Code: #nav ul a:focus being too wide. It's set at 100%, and will shrink if I set it to 50%, but can't match the different sizes of my menus. Here is the link to the page so you can see when the menu drops, then you hover mouse over one of the links in the list, the image is wider than the box. http://www.alliancemonterey.org/temp/ Here is the drop menu css. Any help would be appreciated Code: #nav,
#nav ul { background-image:url(images/button.gif); list-style: none; margin: 0; padding: 0; z-index: 20000; }
#nav { font-family: Arial, Helvetica, sans-serif; font-size: 0.855em; /* 14px / 16px */ font-weight: bold; height: 2.286em; /* 32px / 14px */ line-height: 1.5em; /* 21px / 14px */ width: 760px; margin: 0; }
#nav li { background-image:url(images/button.gif); float: left; height: 2.286em; /* 32px / 14px */ margin: 0; padding: 0; position: relative; z-index: 10000; }
#nav a { color: #c7d0d9; display: block; padding: 0.286em 5px 0.5em; /* 4px 30px 7px */ text-decoration: none; }
#nav a:hover,
#nav a:focus { color: #fff; background-image:url(images/button_over1.gif); }
#nav ul { background-image:url(images/button_over2.gif); left: 0; font-size: 0.857em; /* 12px / 14px */ line-height: 1.5em; /* 18px / 12px */ position: absolute; top: 2.667em; /* 32px / 12px */ width: 100%; }
#nav ul li { background: none; float: none; height: auto; width: 100%; }
#nav ul a { background: none; padding: 0.083em 30px 0.25em; /* 1px 30px 3px */ width: 70%; }
#nav ul ul { font-size: 1em; }
#nav ul a:hover,
#nav ul a:focus { background-image:url(images/button_over1.gif); width: 100%; }
#nav ul.hover { background-image:url(images/button_over1.gif); width: 100%; }
#nav ul ul { left: 0px; top: 0.5em; /* 6px / 12px */ }
#nav ul,
#nav :hover ul ul,
#nav .hover ul ul { margin-left: -9999px; }
#nav li:hover>ul,
#nav li.hover>ul,
#nav a:focus>ul,
#nav ul ul,
#nav .hover a:focus { margin-left: 0; }
#nav ul a:focus { margin-left: 0; }
its not so much of a problem because i have "thought" of a remedy (at the end of the post) but i was looking for perhaps a more css'esque solution? if you go here http://www.zahra-zahra.com/fullpage.html you will see menus in the middle somewhere and you will see when the lis go on the second line they are mismatched.. is there a way to match them up precisely? now the solution which i was thinking was is that to have four arrays and then put them in four divs and then place them side by side. btw: the menu will be stored in database On this page: http://www.prioritypie.f2s.com/tremaer/_location/location.htm I have a rollover menu (courtesy of Bon Rouge's tutorial) that nicely runs in a line when viewed in FF, but in IE it reverts to a vertical list. Is there a way to stop this? And why doesn't the background for the containing div show up in FF when it does in IE? I had hoped a glass of red wine would help.... I'm trying to have a logo in a div next to a navigation menu that can align at a specific height in my logo. but im having a problem with my li background images staying within the ul background image. Can someone help me fix my code to align this properly? HTML CODE: 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- load the typeface.js library and typeface.js fonts -->
<script src="js/typeface-0.14.js"></script>
<script src="fonts/haettenschweiler_regular.typeface.js"></script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">
<div id="navigation" class="menu">
<ul id="top-nav">
<li class="item4"><a href="#" title="Contact">Contact</a></li>
<li class="item3"><a href="#" title="About">About</a></li>
<li class="item2"><a href="#" title="Ideas">Ideas</a></li>
<li class="item1"><a href="#" title="Portfolio">Portfolio</a></li>
</ul>
</div>
<div id="logo"><span><a href="http://www.nadesignstudio.com/" title="NA Design Studio" rel="home">NA Design Studio</a></span></div>
<div class="clear"></div>
<!-- end #header --></div>
<div id="mainContent"><h1 class="typeface-js">Main Content </h1>
<div class="typeface-js">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. </p>
</div>
<!-- end #mainContent --></div>
<div id="footer">
<p>na design inc, new york :: all right reserved 2010</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
CSS CODE: Code: body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
margin: 0;
padding: 0;
text-align: center;
color: #FFFFFF;
}
.oneColFixCtrHdr #container {
width: 800px;
background-image: url(images/bg-stripe.png);
background-repeat: repeat;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.oneColFixCtrHdr #header {
padding: 10px 10px 0 10px;
background: #000000;
}
.oneColFixCtrHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.oneColFixCtrHdr #mainContent {
padding: 0 10px;
}
.oneColFixCtrHdr #footer {
padding: 0 10px;
background: #000000;
font-family: "Courier New", Courier, monospace;
font-style: italic;
font-size: 8pt;
}
.oneColFixCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}
.typeface-js {
font-family: Haettenschweiler;
font-style: italic;
letter-spacing: 1px;
color: #FFFFFF;
}
#logo {
display: inline;
float: right;
text-align: left;
}
#logo a{
background-attachment: initial;
background-clip: initial;
background-color: initial;
background-image: url(images/logo.png);
background-origin: initial;
background-position: 0 0;
background-repeat: no-repeat no-repeat;
display: block;
height: 118px;
margin-bottom: 10px;
text-indent: -9000px;
width: 296px;
}
.msie #blog-title a {
margin-bottom: -10px;
position: relative;
}
#navigation {
background-image: url(images/bg-nav.png);
background-position: 0 0;
background-repeat: no-repeat no-repeat;
float: right;
height: 22px;
width: 474px;
margin-top: 75px;
}
#navigation ul {
}
#navigation li {
float: right;
height: 22px;
position: relative;
list-style: none;
}
#navigation li a {
font-family: Haettenschweiler;
font-style: italic;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
color: #FFFFFF;
font-size: 0.95em;
font-weight: bold;
background-image: url(images/bg-nav-btn.png);
background-repeat: no-repeat no-repeat;
height: 22px;
display: block;
width: 69px;
overflow: auto;
}
#navigation li a:hover {
background-image: url(images/bg-nav-btn.png);
background-position: 50% -22px;
background-repeat: no-repeat;
color: #000000;
}
#navigation li.item1 a {
font-family: Haettenschweiler;
font-style: italic;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
color: #FFFFFF;
font-size: 0.95em;
font-weight: bold;
background-image: url(images/bg-nav-btn1.png);
background-repeat: no-repeat no-repeat;
height: 22px;
display: block;
width: 69px;
overflow: auto;
}
#navigation li.item1 a:hover {
background-image: url(images/bg-nav-btn1.png);
background-position: 50% -22px;
background-repeat: no-repeat;
color: #000000;
}
.clear {
height: 0;
font-size: 1px;
margin: 0;
padding: 0;
line-height: 0;
clear: both;
}
Example of problem If Image doesnt show below, view it he http://nadesign.pisigmachi.com/wp-content/uploads/2010/02/example.jpg URL |
|||||||