|
CSS - Positioning Not Working?
Similar TutorialsI have been working on this design for awhile after following a tutorial. Design Web Page Working CSS Field I'm having 2 problems. 1. When I view this in Firefox 1.5.0.3 everything works out fine. Firefox v1.5.0.3 Web Page Looks Fine When I view this in IE 6.0.29 my content is near the bottom of the screen and not next to the left column and the footer is completely wrong. Top view of IE 6 Bottom view of IE 6 2. Second Problem (happens in both browsers) For my left column, how to I make it run all the way down to the footer properly. Write now I just have a bunch of "Enters" to stretch the ID to add the bg image tiled to the bottom? Anyone know how to fix these? Hey guys, at sev<dot>nj-webdesigner<dot>com/firm/profile.html - on the bottom of the page if you mouse over the first couple ticks (by "1928"), a hidden div displays above the tick mark. The positioning works as expected in Firefox and IE7, but the positioning is off in IE6. Any ideas why there is a difference and how to fix it? Thanks. Hello, I've almost got this css image gallery done for my website, but I can't seem to get the main image to be positioned where the gallery thumbnails are. The main image seems to be only position-able from the top of the page. I'm trying to get the image to line up with the top of the first thumbnail image, the thumbnails being arranged in a column to the left of the main image. The page where you can view this is: WWW OLDFOUNDRY DOT COM - I'm a new user, and am not allowed to post links yet. You'll see the gallery in the new product called "Bugatti Test" That link is on the left hand side of the page. And I'll place the code in the next post, Thank you for any ideas, Jason I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ 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">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo thanks for taking the time to read my question. I have a div that I want to float right, but it is staying on the left side, and I can't figure out why. HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Warren Persowich Humour Facilitator - Stand-Up Comedian Winnipeg Manitoba. Comedic entertainment performances laughter and insight. Fun professional development. A decade of stand-up experience." />
<meta name="keywords" content="Warren Persowich, Comedian, Comedic, Stand Up, Stand-Up, Comedy, Business, Winnipeg, Manitoba, Cancer, Entertainment, Funny, Hilarious, Interactive, Laughter, Psychology, Professional, Development" />
<meta name="Revisit-After" content="7 Days" />
<meta name="Robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ongXn98vPdWEemx2Lu5qZozNxw3CDdugXLIpK9XzOr4=" />
<title>2 Nations Female Hockey League:::::</title>
<script type="text/javascript" src="Javascript/coolmenu.js"></script>
<script type="text/javascript" src="Javascript/menu_items.js"></script>
<link rel="stylesheet" type="text/css" href="menu_styles.css">
<link rel="stylesheet" type="text/css" href="2NFHL.css">
</head>
<body>
<script type="text/javascript">var m1 = new COOLjsMenu("menu1", MENU_ITEMS)</script>
<div class="LogoDiv"><a href="Index.htm"><img class="Logo" src="Images/WOMENSHOCKEY CHOICE 1Small2.jpg" alt="Two Nations Female Hockey League"></a></div>
<div class="NavDiv">
<p class="TeamsNav">Teams: <a href="Team1">Coyotes</a> | <a href="Team2">Extreme</a> | <a href="Team3">Ice Cats</a> | <a href="Team4">Saints</a> | <a href="Team5">Mustangs</a> | <a href="Team6">Lightening</a> | <a href="Team7">On Edge</a></p>
</div>
<div class="ContentDiv">
<div class="prop"></div>
<div class="Welcome">
<p class="FirstLine">Welcome to the Two Nations Female Hockey Leage web site.</p>
<p>The Two Nations Female Hockey Leage is a Spring - Summer league that is comprised of female hockey teams hailing from both Canada and United States.</p>
<p>To learn more about the Two Nations Female Hockey League, click <a href="AboutUs.htm">here</a> or use the About Us link in the navigation bar above.</p>
</div>
<div class="TNFHLTW">
<p class="TNFHLTWP">This week in the TNFHL the Coyote's and On Edge faced off in Winnipeg, Manitoba. The teams skated to a 3 all tie.</p>
</div>
<div class="Banners">
<div class="BannerCont"><img src="Images/ChampWeekend.gif" /></div>
<div class="BannerCont"><img src="Images/ChampWeekend.gif" /></div>
</div>
<div class="clearprop"></div>
</div>
<div class="BottomNavDiv">
<div class="BottomNavDivCont">
<p class="BottomNavLinkP"><a href="Index.htm" class="BottomNavLink">Home</a> | <a href="Index.htm" class="BottomNavLink">About Us</a> | <a href="Index.htm" class="BottomNavLink">Philosophy</a> | <a href="Index.htm" class="BottomNavLink">Teams</a> | <a href="Index.htm" class="BottomNavLink">Standings</a> | <a href="Index.htm" class="BottomNavLink">Schedule</a> | <a href="Index.htm" class="BottomNavLink">Contact Us</a> | <a href="Index.htm" class="BottomNavLink">Links</a><p/>
</div>
</div>
</body>
</html>
CSS: Code: html, body {
height: 100%;
padding: 0;
margin: 0;
}
.LogoDiv {
/*background-image:url("Images/WOMENSHOCKEY CHOICE 1Small2.jpg");
background-repeat: no-repeat;
background-position: top left;*/
margin: 2px auto;
padding: 0px;
height: 87px;
width: 800px;
display: block;
}
img.Logo {
border: 0px;
}
.Banners {
float: right;
width: 300;
margin: 20px 20px 0px 0px;
padding: 0px;
background-color: red;
/*clear: both;*/
}
.BannerCont {
width: 300;
height: 50px;
margin: 5px 0px 0px 0px;
padding: 5px 0px 0px 0px;
background-color:#362161;
}
.NavDiv {
background-image: url(Images/N2NavBar2.jpg);
background-repeat: repeat-x;
background-position: top left;
padding: 10px 0px 0px 0px;
margin: 0px 0px -13px 0px;
height: 80px;
width: 100%;
display: block;
}
.TeamsNav {
padding: 0px;
margin: 0px 0px 0px 400px;
font-size: 12px;
}
/*.prop and .clearprop are in here to create a min height of 400px*/
.prop {
height: 400px;
width: 1px;
float: right;
background-color: yellow;
}
.clearprop {
clear: both;
height: 1px;
overflow: hidden;
background-color: yellow;
}
.ContentDiv {
width: 800px;
/*height: 400px;*/
overflow: hidden;
background-image:url(Images/Background-Blue3.jpg);
background-repeat: no-repeat;
background-position: top left;
margin: 0px auto;
padding: 0px;
display: block;
position:static;
z-index: -1;
}
.TNFHLTW{
width: 212px;
overflow: hidden;
background-image:url(Images/TNFHLThisWeekShortNarrow.gif);
background-position: top left;
background-repeat: no-repeat;
margin: 50px 0px 0px 30px;
padding: 50px 0px 0px 0px;
}
.Welcome {
float: right;
margin: 10px 20px 0px 0px;
overflow: hidden;
width: 450px;
background-color: aqua;
}
.FirstLine {
font-size: 20px;
margin: 0px;
padding: 0px;
text-align: center;
}
.COC1 {
padding: 2px;
margin: 50px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}
.COC {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}
.OLHolder {
margin: 10px 0px 0px 30px;
padding: 2px;
float: left;
width: 700px;
}
.COCOL li {
margin-bottom: 10px;
}
.COCTitle {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-align: center;
font-weight: bold;
text-decoration: underline;
font-size:18px;
}
.LinkList li {
margin-top: 10px;
list-style-type:none;
}
p.TNFHLTWP {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 4px;
margin: -20px 0px 0px 0px;
font-size: 12px;
background-color: #ffffff;
}
.BottomNavDiv {
padding: 0px;
height: 72px;
width: 100%;
display: block;
border-top: 4px solid red;
margin: 0px;
height: 25px;
}
.BottomNavDivCont {
margin: 0px auto;
width: 800px;
overflow: hidden;
display: block;
height: 25px;
padding: 0px 0px 0px 20px;
}
/*.BottomNavDivCont ul li {
display: inline;
padding: 0px 10px 0px 0px;
font-size: 10px;
color: #ff0000;
margin: 0px;
}*/
.BottomNavLinkP {
font-size: 10px;
color: #ff0000;
display: block;
}
.BottomNavLink {
font-size: 10px;
color: #ff0000;
}
a.BottomNavLink:link{
text-decoration: none;
}
a.BottomNavLink:visited{}
a.BottomNavLink:hover{
text-decoration: underline;
}
a.BottomNavLink:active{}
p.TeamsNav a:link{
text-decoration: none;
color: #000099
}
p.TeamsNav a:visited{}
p.TeamsNav a:hover{
text-decoration: underline;
}
p.TeamsNav a:active{}
.LinkList li a:link {
text-decoration: none;
color: #000099;
}
.LinkList li a:visited {}
.LinkList li a:hover {
text-decoration: underline;
}
.LinkList li a:active {}
I put clear:both on .Banners but then it moves to the bottom under .prop I'd like .Banners to be under .Welcome The page displays the same in FF and IE7, but in IE6 .Banners stretches across most of the .ContentDiv help? Can somebody help me. I have been dealing with IE6 bugs for awhile, and I know that IE6 has trouble with floating divs. I have listed the code below. It would be easier to look at the page on the website because it is very simple, but I am not allowed to post a URL Why does IE6 push the "main" div (yellow) down below everything. If I make the width 874px it takes its normal place just under the red "top" div, but it does not stretch all the way to the edge of the blue "container" div. It looks perfect in IE7, Firefox. Can anybody tell me why? Thanks so much in advance, Mike Code:
<style type="text/css">
body {background-color: #CCCCCC;}
#container {width:980px;height:1000px;margin:0px auto 0px auto;background-color:#0000FF;padding:0;}
#top {height:81px;width:980px;background-color:#FF0000;padding: 0px;}
#leftColumn {float:left;background-color:#8781bd;height:5001px;width:103px;z-index: 20;border-bottom:1px solid #000;}
#main {margin:0;padding:0;float:left;height:500px;width: 877px;background-color:#FFFF00;}
</style>
</head>
<body>
<div id="container">
<div id = "top"></div>
<div id = "leftColumn">
</div> <!--end of #leftColumn-->
<div id="main">
</div>
</div>
Hi all.. I just stumbled onto this site via a google search. I'm having a problem with some "div" work and postitioning of a graphic. I'm working on a site and have decided to do all the positioning via CSS. The positioning shows fine in Firefox but the last portion is shifted down 10 or so pixels in Internet Explorer. Here's a quick show of the error: URL Here's the HTML with CSS below: Code: <div id="Table_01"> <div id="hdr-main_"> <img id="hdr_main" src="images/hdr_main.jpg" width="557" height="161" alt="" /> </div> <div id="hdr-mnu-left_"> <img id="hdr_mnu_left" src="images/hdr_mnu_left.jpg" width="5" height="20" alt="" /> </div> <div id="hdr-mnu-bg_"> <img id="hdr_mnu_bg" src="images/hdr_mnu_bg.jpg" width="547" height="20" alt="" /> </div> <div id="hdr-mnu-right_"> <img id="hdr_mnu_right" src="images/hdr_mnu_right.jpg" width="5" height="20" alt="" /> </div> <div id="hdr-mnu-bottom_"> <img id="hdr_mnu_bottom" src="images/hdr_mnu_bottom.jpg" width="557" height="5" alt="" /> </div> </div> </body> </html> I've also pasted the CSS code: Code: #Table_01 {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
}
#hdr-main_ {
position:absolute;
left:228px;
top:41px;
width:557px;
height:161px;
}
#hdr-mnu-left_ {
position:absolute;
left:228px;
top:202px;
width:5px;
height:20px;
}
#hdr-mnu-bg_ {
position:absolute;
left:233px;
top:202px;
width:547px;
height:20px;
}
#hdr-mnu-right_ {
position:absolute;
left:780px;
top:202px;
width:5px;
height:20px;
}
#hdr-mnu-bottom_ {
position:absolute;
left:228px;
top:222px;
width:557px;
height:5px;
}
Does anyone know why my graphic is turning out the way it is in IE and not in Firefox? This is my first serious attempt at positioning with CSS.. so bear with me Thanks all... Jason I'm starting to create a new site, and I'm having some issues deciding how to create it. I want a header, footer, and 3 columns. This is the CSS I have created, but have some issues with it. Should I use absolute positioning for all elements? The bottom bar isn't lining up at all. Also, for the middle content, how do I get my info into there easily? I will be using the main page as a php page that I will include on all my pages. Should I not use a middle content section? #content { margin-left: 199px; margin-right: 199px; border-top: 1px solid Black; border-bottom: 1px solid black; height:450px; position:absolute; top:59px; width:585px; } #titleBar { background-color: #333399; text-align: center; font: bold large Courier New; height: 40px; padding: 8px; border-top: 1px solid Black; border-left: 1px solid Black; border-right: 1px solid Black; color:#FF9933; } #bottomBar { background-color: #333399; text-align: center; font: normal x-small Courier New; height: 20px; padding: 4px; border-bottom: 1px solid Black; border-left: 1px solid Black; border-right: 1px solid Black; color: #FF9933; } #navleft { background-color: #FF9933; border: medium double; text-align: center; height: 450px; position: absolute; left:10px; top:59px; width:200px; border:1px solid #000; } #navright { background-color: #FF9933; border: medium double; text-align: center; width:200px; height:450px; position: absolute; right:10px; top:59px; width:200px; border:1px solid #000; } I have a select menu that I want to sit on the bottom of the page regardless of the length of the page. How can this be achieved? Height of menu is 235px and width is 150px. can somebody help me align this UL to the bottom right of this table. i put valign="bottom" and align="right" but it didn't work, i tried to put padding and margins in the CSS to move it over and it just won't work. any help would be greatly appreciated. HTML Code: <table id="products_page" border="0" cellpadding="0" cellspacing="0" width="800"> <tr id="upper_nav" height="198"> <td valign="bottom"> <ul class="navlist"> <li> <a href="index.html">Home</a></li> <li><a href="about_us.html">About Us</a></li> <li><a href="contact_us.html">Contact Us</a></li> <li><a href="contact_us.html">Contact Us</a></li> <li><a href="contact_us.html">Shipping Information</a></li> <li><a href="contact_us.html">Return Policy</a></li> <li style="border-right:none;"><a href="showcart.cfm">ViewCart</a></li> </ul> </td> </tr> </table> Code: .navlist li { font-size: 12px; font-family: Helvetica, Times, serif; display: inline; list-style-type: none; padding: 0px 10px; border-right: 1px solid black; float: left; position: relative; } #upper_nav { background-image:url('http://lonepineprairiepillows.com/Cart/cw3/Assets/cart_images/base_page.jpg'); background-repeat: no-repeat; } Hi, I am a newbie to CSS and I need some help. Unfortunately I have not got a domain name for the site as yet, so I am unable to show you the actual site. However I have pasted the relevant CSS and HTML for the index page below. I want to position the two items in red at the bottom of the side bars. The first image is on the left (sidebar) and the other is on the right (sidebar b) Many thanks Dave. **** CSS **** /*LEFT CONTENT*/ #sidebar { float : left; width: 140px; margin : 0 0 0 0; padding: 10px; color : #000000; background : #ffffff; } /*RIGHT CONTENT*/ #sidebar-b { float : right; width : 140px; margin : 0; padding : 10px; background : #ffffff; color : #000000; } HTML <div id="sidebar" style="height: 372px"> <p> </p> <p> </p> <p> </p> <div><img alt="Help for Heroes" height="51" src="img/helpforheroes_logo.jpg" width="120" /></div> <p> </p> <p> </p> <p> </p> <p> </p> <div> <a href="no url"> <img style="border:0;width:88px;height:31px" src="vcss.gif" alt="Valid CSS!" /> </a></div> </div> <div id="sidebar-b" style="height: 372px"> <script type="text/javascript"> /* Live Date Script- For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, */ var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday") var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December") function getthedate(){ var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym<10) daym="0"+daym var hours=mydate.getHours() var minutes=mydate.getMinutes() var seconds=mydate.getSeconds() /*var dn="AM" if (hours>=12) dn="PM" if (hours>12){ hours=hours-12 }*/ var dn = ""; /*if (hours==0) hours=12*/ if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds //change font size here var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn +"</b></font></small>" if (document.all) document.all.clock.innerHTML=cdate else if (document.getElementById) document.getElementById("clock").innerHTML=cdate else document.write(cdate) } if (!document.all&&!document.getElementById) getthedate() function goforit(){ if (document.all||document.getElementById) setInterval("getthedate()",1000) } </script> <span id="clock"></span> <p> </p> <p> </p> <h2>Squadron News</h2> <div class="scroll"> <script type="text/javascript"> //new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds) new pausescroller(pausecontent, "pscroller1", "someclass", 3000) document.write("<br />") </script> </div> <div> <img src="img/next_gen.jpg" alt="Next Generation" title="Next Generation" height="80" width="136"/> </div> <p> </p> <p> </p> <p> </p> </div> Due to popular demand, I have decided to bite the bullet and make the switch from tables to css and divs in layout designs. Obviously, since I am unfamiliar with this practice, I have run into an issue. I am trying to add a link to the right side of my title div, which has a bottom border of 1px...I am not sure how to go about doing this without going down a line or the link not positioning itself to the right... Here is what I have so far: HTML Code: Code: <div class="title" align="left"> <div style="display: inline;"><b>News Updates:</b></div> <!-- The below link needs to align to the right side --> <div style="display: inline;" class="font" align="right"><a href="javascript:void(0);">Add News</a></div> </div> CSS Code: Code: .font { font-size: 0.7em; }
.title {
font-size: 1.6em;
color: #0033FF;
border-bottom: 1px solid #0033FF;
}
I have no idea how to go about this and it seems like it would be so simple. Any help is appreciated. Okay I need help with this CSS, I am very new with CSS I am having trouble positioning this Navigation Bar to the right, it is stuck to the left, and I need it to be so it will always stay on top of everything. My HTML Page The Code. Code: <head><noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script SRC="http://mytubeforum.webs.com/jquery-1.3.2.min.js"></SCRIPT>
<script type="text/javascript">
function nav(){
$('div#nav ul li').mouseover(function() {
$(this).find('ul:first').show();
});
$('div#nav ul li').mouseleave(function() {
$('div#nav ul li ul').hide();
});
$('div#nav ul li ul').mouseleave(function() {
$('div#nav ul li ul').hide();;
});
};
$(document).ready(function() {
nav();
});
</script>
<style type="text/css">
/*NAVBAR CODE*/
#nav{
width: 460px;
padding:460px;
float: right;
align: right;
position: absolute;
background:url(http://i34.tinypic.com/5bzbmd.png);
background-repeat: no-repeat;
height:38px;
line-height:32px;
padding:0 10px;
}
#nav ul,
#nav ul li
{
margin:0;
padding:0;
list-style:none;
}
#nav ul li{
float:left;
display:block;
}
#nav ul li a:link,
#nav ul li a:visited{
color:#000000;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 30px 0 10px;;
margin-top:3.5px;
display:block;
}
#nav ul li a:hover{
color:#3b414c
}
#nav ul li ul li{
float:none;
display:block;
}
#nav ul li ul li a:link,
#nav ul li ul li a:visited{
color:#444;
font-size:12px;
font-weight:bold;
text-decoration:none;
padding:0 20px;
clear:both;
border-bottom:solid 1px #DEDEDE;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
#nav ul li ul li a:hover{
color:#3b414c;
background:#EBEFF7;
}
.submenu {
position: absolute;
width: 140px;
background: #efefef;
padding:20px;
border:solid 1px #b2b2b2;
border-top:none;
z-index: 1000;
display:none;
line-height:26px;
padding: 15px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">MyTube</a>
<ul class="submenu">
<li><a href="/forum.htm">Home</a></li>
<li><a href="/portal.htm">Portal</a></li>
<li><a href="/arcade-f12/">Arcade</a></li>
<li><a href="/calendar.htm">Calendar</a></li>
<li><a href="/search.forum">Search</a></li>
<li><a href="/faq.htm">FAQ</a></li>
<li><a href="/memberlist.forum">Members</a></li>
<li><a href="/groupcp.forum">Groups</a></li>
<li><a href="/MyTube-Chat-h2.htm">Chatbox</a></li>
</ul>
</li>
<li><a href="#">Messages</a>
<ul class="submenu">
<li><a href="/msg.forum?folder=inbox">Inbox</a></li>
<li><a href="/msg.forum?folder=sentbox">Sentbox</a></li>
<li><a href="/msg.forum?folder=outbox">Outbox</a></li>
<li><a href="/msg.forum?folder=savebox">Saved Mail</a></li>
</ul>
</li>
<li><a href="#">Profile</a>
<ul class="submenu">
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile">Information</a></li>
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=preferences">Preferences</a></li>
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=signature">Signature</a></li>
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=avatars">Avatar</a></li>
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=friendsfoes">Friends & Foes</a></li>
</ul>
</li>
<li><a href="#">Log In | Out</a>
<ul class="submenu">
Under Construction<hr>
<li><a href="/profile.forum?mode=register">Register</a></li>
<li><a href="/login.forum?connexion">Login</a></li>
</ul>
</li>
</div>
Please Help Me, Thank you. G'day all, I am hoping some here can help me with a problem I am having with positioning. I have a content div with dynamically generated text, next I have a side-bar div that i'd ideally like to centre vertically but this seems to be bad practice so my other thought, if possible would be to have the side-bar position itself relative, x position from top with the dynamic text to wrap around the side-bar div. What I have currently is: Code:
<div id="main-content">
<div class="side-bar">
<div class="side-bar_header">Content Header</div>
<div class="side-bar_content">
<ul>
<li>Side-bar info</li>
</ul></div>
</div>
{dynamic_content_tag}
</div>
Code:
#main-content {
height: auto;
width: 630px;
}
.side-bar {
background-color: #CCC;
float: left;
width: 180px;
position: relative;
top: 50%;
margin-right: 10px;
margin-bottom: 20px;
}
.side-bar_header {
background-color: #666;
text-align: center;
padding: 5px;
}
.side-bar_content {
padding-left: 5px;
}
Any help would be much appreciated. I've created a site with a static background.gif "body" element, then a container (div) where I'm putting my stuff. I want the container to roll up and down against the nice static background in the body margins.(there is an example of what I'm trying to do at CSS garden http://www.csszengarden.com - check out Gothica #027)The problem is that when I use absolute positioning for the elements - the container ignores the content and doesn't size properly. But when I use relative positioning, I can make everything work out OK - except it generates tons of extra space that gets dumped at the bottom of the pages. So my question is - does anyone know how to get rid of the space? BTIA ok Hey guys, I am in need of a bit of help. The following URL incurs some pretty bad busts in IE (Mac and PC), that busts differently depending on the version. If I could get some feedback on what is happening and if possible maybe some posting of the code that fixes the problems. URL: http://clients.gravitydigital.com/pure_excitement/welcome.html Thanks for your help in advance, Collin I'm trying to build an example layout that I plan to use in a website. My goal is simple, I want a content section to grow as the the content gets bigger and place a footer after that division that is as wide as the page. Here's the code I'm currently using: (the problem I'm having right now is that the footer section is rendering at the top.. How can I get this to be placed at the bottom of the page, after the content section?) Help me please <html> <head> <title>TESTING 1 2 3</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; } #mrbig { background: #f0f; width: 800px; } #header { position: absolute; background: #0f0; width: 800px; height: 100px; } #leftcol { position: absolute; background: #f00; top: 100px; width: 150px; height: 500px; } #content { background: #fff; position: absolute; float: left; width: 650px; top: 100px; left: 175px; height: 500px; } #footer { position: relative; left:111px; background: #00f; width: 800px; height: 100px; } --> </style> </head> <body> <div id="mrbig"> <div id="header">Header Section</div> <div id="leftcol">Left Section</div> <div id="content">Content SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent Section Content SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent Section</div> </div> <div id="footer">Footer Section</div> </body> </html> Hello, I have a flash movie that keeps moving out of place when the browser size is altered. How can I make it so the movie stays in one spot no matter what the browser size? http://www.drowninginmytears.org/invalid/ it works in internet explorer, however in firefox, it is i believe 3px off (the main header and navigation), can anyone figure out why? i've been stumped now for hours. thanks my css is: http://www.drowninginmytears.org/invalid/css.css |
|||||||