|
CSS - Horizontal Positioning Issues
I am trying to position two buttons on a line. They should each sit in the middle of one half of the line. Here's my code:
Code: <html>
<head>
<style type="text/css">
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('http://www.oscaralexander.com/tutorials/img/bg_button_a.gif') no-repeat scroll top right;
color: #33C;
display: block;
float: left;
font: bold 16px arial, sans-serif;
height: 24px;
margin:0 auto;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('http://www.oscaralexander.com/tutorials/img/bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
a.button:active {
background-position: bottom right;
color: #22B;
outline: none; /* hide dotted outline in Firefox */
}
a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}
</style>
</head>
<body>
<div>
<div style="float:left; width:50%; background-color:#EEE">
<a class="button" href="#" onclick="this.blur();"><span>Learn More</span></a>
</div>
<div style="float:right; width:50%; background-color:#DDD">
<a class="button" href="#" onclick="this.blur();"><span>Buy Now!</span></a>
</div>
</div>
</body>
</html>
And here's a link to the test page: http://rentalocal.thad.com/test Does anyone know what I've done wrong? Thanks, Thad Similar TutorialsI've been working on a site and have a problem with the horiztonal positioning of a div. At http://www.alphaworks.co.uk/problems/nicewag1/ I would like the position of the div with the id "page_footer" to move to the leftmost position. Can someone point out the mistake I'm making? Thanks, Geoff I have a small problem and I can't figure out what it is that's causing it as the CSS used to replicate the issue doesn't really give any insight as to why things are getting ****ed up. My site is: ( jump for joy I got my routers firewall to forward port 80 ) http://24.224.254.115/~wayne/moorhousehome.ca/NEW The CSS in question will work, but I have comments after the two lines that cause issues. Code: css
#inner-wrap{/*there is no outer-wrap*/
position:absolute;
top:0;
left:50%; /*causes the main body to clear the navigation*/
margin-left:-400px; /*causes the main body to clear the navigation*/
}
If I comment out both lines the issue goes away, but the horizontal centering disappears too. If I uncomment either of them the issue reappears. I will leave the issue live on my website while people have a look. And once I fix this I will be fixing the two images in the bottom left corner with the text beneath each one. There won't be a hover over effect as there is in Firefox. I have a couple divs using percentage columns. The issue I am having is that when the page is displayed (in IE or FireFox) I am getting the horizontal scrollbar. It scrolls an extra ~15%. I am learning CSS (slowly) so any help would be greatly appreciated. -K html Code:
<div id="wrapper">
<div id="content">
<p>
text
</p>
</div>
</div>
<div id="navigation">
<p>text</p>
</div>
<div id="extra">
<p>text</p>
</div>
Code:
div#wrapper{float:right;width:100%;margin-right:-33%;
display:block;}
div#content{
margin-right:33%;
border-left:2px solid #FFFFFF;
border-left-color:#660000;
padding-left:10px;
padding-right:10px;
}
div#navigation{
float:left;
width:32.9%;
}
div#extra{
float:left;
clear:left;
width:32.9%
}
p{margin:0 10px 10px}
Thanks for taking the time to read my question. I am trying to make a new page layout. I have one main box on the left [float: left;], and 3 stacked smaller boxes on the right [float: right;] I would like 2 lines joining the box on the left to the center box on the right. I'm trying to do this with a container that only has top and bottom borders. I don't know how to get the horizontal lines centered vertically. Also, the page layout works great in FF but not in IE. Not really sure why. Any suggestions on how to do this? oh and the green and red colors are only for development so they stand out. Thanks, Brad HTML: Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="piercedjunkmail@hotmail.com"> <meta name="generator" content="AceHTML 5 Freeware"> <link href="TestLayoutCSS.css" rel="stylesheet" type="text/css" /> <title>Test Layout 1</title> </head> <body> <div id="HeaderContainer">hi</div> <div id="RightTopContainer">hi</div> <div id="PageTitle">This is the title of the page</div> <div id="MajorLeftMainContainer"> <div id="LeftMainContainer">hi</div> <div id="HorizontalLines"></div></div> <div id="RightCenterContainer">hi</div> <div id="RightBottomContainer">hi</div> </body> </html> CSS: Code: @charset "iso-8859-1";
body {
font-family: Foo, times, serif;
margin: 0px;
background-color: #4F9FC5;
}
#HeaderContainer {
height: 50px;
width: 100%;
/*border-color: green;
border-style: solid;
border-width: 2px;*/
}
#MajorLeftMainContainer {
/*border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;*/
float: left;
margin-top: 90px;
margin-left: 10px;
width: 67%;
height: 310px;
background-color: green;
}
#LeftMainContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: left;
/*margin-top: 90px;
margin-left: 10px;*/
width: 80%;
height: 300px;
background-color: #EAEAEA;
}
#RightTopContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: right;
margin-top: 30px;
margin-right: 10px;
width: 30%;
height: 150px;
background-color: #EAEAEA;
}
#RightCenterContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: right;
margin-top: 50px;
margin-right: 10px;
width: 30%;
height: 150px;
background-color: #EAEAEA;
}
#RightBottomContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: right;
margin-top: 50px;
margin-right: 10px;
width: 30%;
height: 150px;
background-color: #EAEAEA;
}
#PageTitle {
font-size: 25px;
font-family: arial, times, serif;
/*border-color: green;
border-style: solid;
border-width: 2px;*/
width: 340px;
height: 35px;
margin-top: 40px;
margin-left: 25px;
color: black;
font-variant: small-caps;
}
#HorizontalLines {
border-top-size: 2px;
border-top-color: red;
border-top-style: solid;
border-bottom-size: 2px;
border-bottom-color: red;
border-bottom-style: solid;
float: left;
width: 124px;
height: 30px;
vertical-align: middle;
}
I am making a horizontal menu with dropdown submenus. It is partly coded using Dreamweaver and partly by hand. The menu works fine under IE but in Firefox it is off by a few pixels. I searched the forums and found that the problem was with the way IE rendered <div> versus the way Firefox does, but I wasn't able to solve the problem. Could somebody also tell me how to switch from Quirk mode to standard? for complete code visit http://www.ithaca.edu/students/sgarg1/website Any help is appreciated **************************************** index.html Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sustainable Tompkins</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function start()
{
document.getElementById('layer1').style.visibility="hidden";
document.getElementById('layer2').style.visibility="hidden";
document.getElementById('layer3').style.visibility="hidden";
document.getElementById('layer4').style.visibility="hidden";
document.getElementById('layer5').style.visibility="hidden";
}
function changeOver(theNode)
{
theNode.style.background="#ffffff";
theNode.style.color="#666666";
}
function changeOut(theNode)
{
theNode.style.background="#666666";
theNode.style.color="#ffffff";
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v;}
}
//-->
</script>
<style type="text/css">
<!--
.style11 {font-family: "Times New Roman", Times, serif}
.bullet {list-style-type: disc;}
-->
</style>
<!-- InstanceEndEditable -->
<link rel="stylesheet" href="css/mainStyles.css" type="text/css">
</head>
<body onLoad="start();">
<center>
<table width="801" border="1" cellpadding="0" cellspacing="0" onMouseOut="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer 5','','hide')">
<!--DWLayoutTable-->
<tr>
<td height="132" colspan="3" valign="middle"><div align="center"><span class="style3">SUSTAINABLE TOMPKINS</span>
</div>
<div align="center"></div></td>
</tr>
<tr>
<td height="29" colspan="3" valign="top" class="above_menu"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="48" colspan="3" valign="top"><!-- InstanceBeginEditable name="Menu" -->
<table width="800" border="1">
<tr bgcolor="#FFFFFF">
<td width="70" id="mi0" class="menu" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer5','','hide','Layer3','','hide');chang eOut(document.getElementById('mi0'));" onMouseOut="changeOver(document.getElementById('mi0'));">
Home
</td>
<td id="mi1" class="menu" width="89" onMouseOver="MM_showHideLayers('Layer1','','show','Layer2','','hide','Layer5','','hide','Layer3','','hide');chang eOut(document.getElementById('mi1'));" onMouseOut="changeOver(document.getElementById('mi1'));">About St
<div id="Layer1" onMouseOut="MM_showHideLayers('Layer1','','hide')">
<table width="200" border="1" cellpadding="0" cellspacing="0" >
<tr>
<td id="mi1_1" onMouseOver="changeOver(document.getElementById('mi1_1'));" onMouseOut="changeOut(document.getElementById('mi1_1'));">* Mission</td>
</tr>
<tr>
<td id="mi1_2" onMouseOver="changeOver(document.getElementById('mi1_2'));" onMouseOut="changeOut(document.getElementById('mi1_2'));">* Coordinators</td>
</tr>
<tr>
<td id="mi1_3" onMouseOver="changeOver(document.getElementById('mi1_3'));" onMouseOut="changeOut(document.getElementById('mi1_3'));">* Sponsors/Partners</td>
</tr>
<tr>
<td id="mi1_4" onMouseOver="changeOver(document.getElementById('mi1_4'));" onMouseOut="changeOut(document.getElementById('mi1_4'));">* History</td>
</tr>
</table>
</div>
</td>
<td id="mi2" class="menu" width="141" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','show','Layer5','','hide','Layer3','','hide','Layer 4','','hide');changeOut(document.getElementById('mi2'));" onMouseOut="changeOver(document.getElementById('mi2'));">
ST Initiatives
<div id="Layer2" onMouseOut="MM_showHideLayers('Layer2','','hide')">
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td id="mi2_1" onMouseOver="changeOver(document.getElementById('mi2_1'));" onMouseOut="changeOut(document.getElementById('mi2_1'));">Salons</td>
</tr>
<tr>
<td id="mi2_2" onMouseOver="changeOver(document.getElementById('mi2_2'));" onMouseOut="changeOut(document.getElementById('mi2_2'));">Surveys</td>
</tr>
</table>
</div>
</td>
<td id="mi3" class="menu" width="143" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer5','','hide','Layer3','','show','Layer 4','','hide');changeOut(document.getElementById('mi3'));" onMouseOut="changeOver(document.getElementById('mi3'));">
Helpful Links
<div id="Layer3" onMouseOut="MM_showHideLayers('Layer3','','hide')">
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td id="mi3_1" onMouseOver="changeOver(document.getElementById('mi3_1'));" onMouseOut="changeOut(document.getElementById('mi3_1'));">Grouped</td>
</tr>
<tr>
<td id="mi3_2" onMouseOver="changeOver(document.getElementById('mi3_2'));" onMouseOut="changeOut(document.getElementById('mi3_2'));">Annotated</td>
</tr>
</table>
</div>
</td>
// Two More instances of the sub menus.
</tr>
</table>
</tr>
</table>
</center>
</body>
</html>
css file Code:
<!--
.style2 {font-size: x-small; color:#666666}
.above_menu{background-color:#0066CC}
.Common{background-color:#0099FF}
.Variable{background-color:#0099ff}
.background {background-color: #93AA39}
.footer {border-bottom-color:#000000}
.content {background-color:#E6FF80}
.style3 {font-size: 36px}
.style5 {color: #666666}
.style6 {color: #FFFFFF}
.style7 {font-size: 9px}
.style8 {font-size: 14px;color: #FFFFFF;}
.style9 {font-size: 14px}
#Layer1 {position:absolute; width:143px; height:74px; z-index:1; left: 180px; top: 207px;}
#Layer2 {position:absolute; width:143px; height:24px; z-index:2; left: 276px; top: 207px;}
#Layer3 {position:absolute; width:143px; height:36px; z-index:3; left: 423px; top: 207px;}
#Layer4 {position:absolute; width:200px; height:145px; z-index:4; left: 572px; top: 207px;}
#Layer5 {position:absolute; width:143px; height:36px; z-index:3; left:736px; top: 207px;}
#mi1_1 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi1_2 {background-color:#666666; text-align:left;color:#ffffff;margin:0}
#mi1_3 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi1_4 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi2_1 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi2_2 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi3_1 {background-color:#666666; text-align:left; color:#ffffff}
#mi3_2 {background-color:#666666; text-align:left; color:#ffffff}
#mi4_1 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_2 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_3 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_4 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_5 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_6 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_7 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_8 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi5_1 {background-color:#666666; text-align:left; color:#ffffff}
#mi5_2 {background-color:#666666; text-align:left; color:#ffffff}
a:hover {color: #666666;text-decoration:none;}
a{text-decoration:none; color:#FFFFFF}
td:hover{color: #666666}
.menu{text-align:center; color: #666666}
websitewebsite Hi all, I'm a newbie on spry coding and was hoping for some help. I tried to search the forum for a similar probem, but couldn't find one. Here's the basic problem: I have a spry horizontal menu bar and my main menu items are displaying just fine when the browser screen is maximized. However, when I make the browser screen smaller on the screen, the last menu item gets pushed down to a second line. Here's what I mean: With maximized browser screen: [Item 1][Item 2][Item 3][Item 4][Item 5] With smaller browser screen: [Item 1][Item 2][Item 3][Item 4] [Item 5] Is there any way that I can use CSS, or any other method you might know, to force the items to stay on the same line, regardless of the screen size? Thanks so much for any info! HTML Code: <div id="nav"> <ul> <li class="first"><a title="#" href="#">About Company</a></li> <li><a title="#" href="#">RRR News</a></li> <li><a title="#" href="#">Apartment Communities</a></li> <li><a title="#" href="#">Commercial Properties</a></li> <li><a title="#" href="#">Current Developments</a></li> <li class="last"><a title="#" href="#">Resident Login</a></li> </ul> </div> CSS Code: /*** Main Navigation Styling ***/
#nav {
border-top: 1px solid #897409;
border-bottom: 1px solid #897409;
background:#fff url(../images/nav_off_back.jpg) repeat-x center;
height: 29px;
}
#nav ul{
font-size: 17px;
margin:0;
float:left;
text-align:center;
width:100%;
}
#nav li {
display:inline;
margin:0;
float:left;
list-style: none;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
min-height: 27px;
height: 27px;
line-height:27px;
padding:1px 0;
}
#nav li.first {
background:url(../images/nav_bars.gif) left center no-repeat;
padding-left:2px;
_margin-left:24px;
}
#nav li.first a,
#nav li.first a:link{
border-left:0;
}
#nav li.last {
border-right:1px solid #fff;
}
#nav li a {
color: #000;
text-decoration: none;
text-align:center;
min-height: 27px;
height:27px;
padding:6px 17px 6px 17px;
border-right:1px solid #b49f36;
border-left:1px solid #fff;
}
#nav li a:hover {
text-align:center;
background: url(../images/nav_on_back.jpg) repeat-y center;
color:#fff;
min-height:27px;
height: 27px;
padding:6px 17px 6px 17px;
}
This code produces a centered horizontal navigation menu in FireFox Mac and IE6 PC. However, in FireFox PC the whole menu is shifted a bit to the right off-center (about 15 px). In IE7 PC, the menu sits on the left and is not centered at all. I am willing to use a browser sniffer to fix the IE7 problem, but I'm not sure what to do for Firefox. The PC and Mac versions of Firefox usually play nice, but not this time. I'd rather not use both a platform AND browser sniffer, but I'm running out of ideas. The addition of a pixel-specific line-height for #nav li { helped some earlier issues, but did not fix them all. Hi all! I'm trying to make a horizontal menu with vertical drop downs.. However, the dropdowns don't go where they're supposed to. The menu is more or less at hybrid between a horizontal menu and a drop-down menu, so it's probably all more or less messed up You can check out the site at: cleopatra.gebodesign.no The files are at: gebodesign.no/cleopatra/menu.php gebodesign.no/cleopatra/stylesheet.css Thanks for any input Hi all, I have a page that is generated through PERL, but I cannot get the positioning right. There are graphics, 1 - 9 depending on what the user chooses, that I need to display at the top of the page. Below this, I need to place text descriptions of the graphics. However, the text is displaying under the graphics. The code that I am using for the CSS is: Code:
.MainWindow{
position: absolute;
max-width: 800px;
width: expression(document.body.clientWidth > 800? "800px": "100%" );
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:Medium;
color:#AF31F4;
background-color:white;
Height: auto;
margin: 0 auto ;
}
.ShowCards {
position: absolute;
vertical-align: top;
margin: 0 auto;
top: 2px;
width: 640px;
height: auto;
Left: 200px;
COLOR: #AF31F4;
FONT-FAMILY: Verdana, Helvetica, sans-serif;
FONT-SIZE: 11pt;
FONT-WEIGHT: bold;
border-color:Red;
border-style:solid;
}
.Location2_3 {
position: absolute;
top: 110px;
left: 160px;
width: 85px;
height: 110px;
text-align: center;
}
.Location2_5 {
position: absolute;
top: 110px;
left: 310px;
width: 85px;
height: 110px;
text-align: center;
}
.Location3_4 {
position: absolute;
top: 220px;
left: 235px;
width: 85px;
height: 110px;
text-align: center;
}
.Text1 {
position: absolute;
top: 100px;
top-margin: 20px;
left: 10px;
width: 500px;
}
This of course is not the complete CSS file, it is only representative. If you need/want to see the complete file, you can go here And the HTML that gets generated is: Code: <Body> <DIV CLASS="MainWindow"> <div id="printReady"> <DIV CLASS="ShowCards"> <DIV CLASS="Location1_4"> 1<BR> <img src="../tiles/thumbs/ansuz.jpg"> </DIV> <DIV CLASS="Location2_5"> 2<BR> <img src="../tiles/thumbs/daeg-r.jpg"> </DIV> <DIV CLASS="Location2_3"> 3<BR> <img src="../tiles/thumbs/fehu.jpg"> </DIV> <DIV CLASS="Location3_4"> 4<BR> <img src="../tiles/thumbs/nauthiz.jpg"> </DIV> </DIV> <DIV CLASS="Text4"> Rune 1<BR> <font color="#0000FF">Name: Ansuz</font><BR> <font color="#0000FF">Position 1</font>: Past feelings and desires<br> <font color="#FF0000">Keywords:</font> ... Text deleted for space ...<BR> <font color="#FF0000">Meaning:</font> ... Text deleted for space ...<P> Rune 2<BR> <font color="#0000FF">Name: Fehu</font><BR> <font color="#0000FF">Position 3</font>: Present feelings and desires<br> <font color="#FF0000">Keywords:</font> ... Text deleted for space ...<BR> <font color="#FF0000">Meaning:</font> ... Text deleted for space ...<P> Rune 3<BR> <font color="#0000FF">Name: Daeg Reversed</font><BR> <font color="#0000FF">Position 2</font>: Feelings and desires of others<br> <font color="#FF0000">Keywords:</font> ... Text deleted for space ...<BR> <font color="#FF0000">Meaning:</font> ... Text deleted for space ...<P> Rune 4<BR> <font color="#0000FF">Name: Nauthiz</font><BR> <font color="#0000FF">Position 4</font>: Your heart's deepest desires. If this rune is positive these desires will come to fruition in the next four months <br> <font color="#FF0000">Keywords:</font> ... Text deleted for space ...<BR> <font color="#FF0000">Meaning:</font> ... Text deleted for space ...<P> </DIV> </DIV> </BODY> If you would like to see an example of this, go here Choose a layout in the drop down on the top left and follow the instructions. Will only take a few seconds, it is not a long process...... Thanks for any help or suggestions. Jim I'm having some issues with the positioning of a link in my header. For some reason in IE 7, it does not line up below the search box like it shows in IE 8, Firefox, Chrome and Safari. I cannot figure out for the life of me, what's wrong. http://trinebay.net/cart/ is the site. You can see in the header the advanced search is the link that wont align in IE7 and probably IE6 as well. Thanks for the help guys Hello I've been developing a new website for my dad.. Unfortunatly i cant seem to get some of the things to look how i want them. so i was wondering if you could help, as some of you have been a great help to me on previous websites. the pages in question are the following: http://visitours2london.com/v2/ (in internet explorer) the middle conent drops below the sidebars. (in firefox its fine) http://visitours2london.com/v2/tours2.html (both in i.e. and firefox doesnt come out right) i cant get the titles of the dt tags to align to the right hand side.. and in i.e. the back to top text jumps to the far right, overlaying onto side bar two.. All pages are xhtml valid... link to check is on bottom of the page... Ignore everything else on the website, its simply those two pages that im working on.. other aspects of the website will either not load or not work properly as ive not finished them. Using Firefox, the current state of the site I am working looks like I want it to look, yet in IE 6 it does not look correct, surprise. (IE7 looks great). I've tried several things, and I am completely lost as to a solution, I'd love some help, or suggestions, thanks. UTC Site Hi, Just wondering it anyone can help... I am trying to get my left hand navigation to sit at the top of the cell and no matter what I change it won't budge! You can see what I am working on at www. freedomwhalewatch .com.au /Stirling /index.html as you can see the left hand navigation is sitting towards the bottom... anyone have any suggestions as to how I would move it up to be directly underneath the logo? To see my working files just use the right click and view page source. Any help or suggestions would be much appreciated. I am a newbie to css! Cheers, Jen ** UPDATE - sorry guys i spelt the url incorrectly! http://www. freedomwhalewatch .com.au/Stirling /index.html Hi, First off, I've tried a quick search to see if anyone else has posted this problem, but didn't come up with anything. So, if I am repeating, apologies :-) Anyway, I've got a problem that hopefully someone will be able to help me with. It's probably quite simple, but my CSS is a bit hit and miss ;-) Anyway, firstly, here's the CSS: Code:
body {
margin: 0;
padding: 0;
background: #FFFFFF url(images/img01.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #8E959B;
}
#header {
width: 100%;
height: 225px;
margin: auto;
padding: 12px 0 0 0;
}
#logo {
float: left;
width: 208px;
height: 208px;
margin: 0px 0 0 14px;
padding: 0 15px 0 0;
border: 3px solid #EB850C;
}
#logo h1 {
padding: 120px 0 0 0;
text-align: center;
letter-spacing: -3px;
font-size: 2em;
font-weight: normal;
}
#logo h2 {
margin-top: -10px;
text-align: center;
font-size: medium;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
}
#logo a:hover {
color: #990000;
}
#splash {
position: absolute;
left: 250px;
margin-right: 10px;
top: 100px;
border: 3px solid #EB850C;
width: 73%;
max-width: 73%;
height: 115px;
}
#menu {
float: right;
padding: 0 0 0 0;
}
#menu ul {
height: 55px;
margin: 0;
padding: 41px 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
border: 3px solid #EB850C;
display: block;
float: left;
width: 80px;
height: 22px;
padding-top: 12px;
text-align: center;
text-decoration: none;
text-transform: lowercase;
letter-spacing: -1px;
font-size: 1em;
}
#menu a:hover, #menu .active a {
color: #FFFFFF;
}
And the HTML: Code: <body> <div id="header"> <div id="logo"> <h1><a href="#">Company Logo Image</h1> <h2></a></h2> </div> <div id="menu"> <ul> <li ><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Calendar</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div id="splash">This is the page heading montage image</div> </div> </div> </body> The problem is, I need the splash div to resize depending on the width of the screen. The idea being a cheat so depending on different resolutions, the different the size of the div and with a background-image set, the image will appear to expand/contract depending on the width of the screen. It's gonna be a repeating montage image. If the window is over, say, 80% wide, then it works fine. Thing is, if you shrink the width of the window past about 80%, then the div starts to go off the right hand side of the screen... Hopefully I've made myself reasonably clear? Any ideas? Thanks! For a search tool, I have a "results toolbar", horizontally across the top of the results page. Within this toolbar (position: relative) I have a span containing the current page, absolutely positioned at top: 8px; left: 5px; What I get when rendering however, is the following: Right: http://tim.komta.com/images/css/Firefox.gif Wrong: http://tim.komta.com/images/css/IE.gif More accurately, I should say that I get what I expect in Firefox, and not what I expect in IE, which is not overly surprising. Anyway, what am I doing wrong? If I change the text-align of the box from right (current) back to left, it's still overlaid on top of the images, but on the left, like it's supposed to be. It kinda seems like IE is making the images the bounding box for absolute positioning. Any thoughts? MPEDrummer I am recoding the site jthensley dot com (The forum wouldn't let me list the site needing assistance) to HTML 5 and CSS. I've redesigned some features, which are basically already in the new layout, at jthensley dot com / 2012alpha The 2 horizontal neon lines and the vertical line are simply repeated outside of the header by the CSS. However, one problem I have is that the vertical line that is repeating becomes unaligned with the header if the browser window is expanded. Is there anyway to have it as a repeating background, set to begin at a certain pixel position, and move to the right to maintain alignment with the header as the page is expanded? Secondly, at the bottom, you have the copyright line, which I plan to use as a repeating background or image, as well, and my picture to the right, standing on top of the copyright line. Idealy, I would like the picture of myself to be in a certain area, and push down as page contents make the page longer, but maintain it's "link" with the footer. Any suggestions on how to achieve that? Thanks for your help! This is quite a refresher/learning experience for me! The CSS I have already written is below. * { margin: 0 auto; padding: 0; } body { font-size: 62.5%; font-family: Helvetica, sans-serif; color: white; background-color: #000000; background-image: url(images/horzneon.png), url(images/horzneon.png), url(images/verneon.png); background-position: 0px 137px, 0px 172px, 250px 0px; background-repeat: repeat-x, repeat-x, repeat-y; } ul#nav { height: 185px; width: 1024px; margin: 0 auto; background: url(images/header.jpg) no-repeat; } height: 185px; width: 1024 px; EDIT: OK, I've worked out all of the issues except the fourth one, which doesn't really have to do with CSS specifically. Why do line breaks insert gaps? The problem is especially prevalent in IE. First issue: I'm trying to position one image over another image and its inserting this big gap! As seen on http://www.zacwittedesign.com/olive/pool.html we have the "about the pool" image position on top of the big image to the left side, but you can see there is a big gap above the big image. If I simply comment out the 'about the pool' image, the gap goes away and all is fine. I thought relatively placed elements were not supposed to affect the flow of elements beneath them? Can you see anything wrong in my code? Second Issue: There are two issues with the layer on the top of the page where the dots should be coming out of 'new projects' (id=projects_layer). It should be positioned over top.jpg as seen in hotstuff.html. In that page I manually moved it down by adding an additional 60px to the relative offset, but the space where it would have occupied remains and pushes the whole page down. Everything should look like it does in portfolio.html which doesn't currently use layers. You can see a version without my manually shifting it down and demonstrating the third issue at pool-valign.html. Third Issue: The vertical-align of all the images inside the projects layer. For the layout to be correct, the images need to be top-aligned or they won't line up with the dots and they'll slightly cover the button images beneath them. I have a style property set vertical-align:top; but it doesn't seem to do anything. Do I misunderstand the vertical-align property? There's also a small gap beneath the images when viewed with IE. I've changed the background color of the layer so you can more easily see the problem. Fourth issue: You've probably noticed in my code that I insert and HTML comment for every line break. That is because if I don't, IE reads the line beaks as non-whitespace and inserts both vertical or horizontal gaps between the images. Whats the deal there? Fifth Issue: In IE there is a one or two pixel gap above right.jpg where the tim olive logo is. This doesn't happen on firefox and it doesn't happen on pages that don't use layers like portfolio.html. ...And I haven't even tried it on a mac browser yet... Hello, I'm relatively new to using CSS as the foundation of a site, as i've only ever built sites for family/work etc using tables. I have used it previously for styling and so on, but not as intensively as i now am. It's great, but a couple of issues are giving me a headache - the fun of web design, hey?... I'm experiencing two problems, and have spent a lot of time describing them (with examples and images) on the following page - fnb4wd.com.au/4x4wh/help/help.htm - not wanting to clutter up the forum with my explanations and too many images. The first is to do with the 100% height trick - my "wrapper" div is not expanding with my "content" div - but i do not believe faux columns are possible for my design (if someone proves me wrong, great!) as i don't have two full height columns, but one content column and a vertical menu div... The second issues is with a Horizontal menu i am using as main navigation. In both FireFox & Chrome, the menu shifts down so the text links are unreadable unless hovered over. In IE, it's positioned as i want (with Comp View Settings turned on for IE8). So, if anyone could shed come light on my problems, i'd love to hear some ideas. The full explanation, complete with working examples and images (as well as my code) can be seen at fnb4wd.com.au/4x4wh/help/help.htm. Thanks in advance, Azerus85 I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> |
|||||||