|
CSS - "pulling Up" Floats Off Of Newlines
Hey, everyone.
Currently I have a 4 column layout contained in a fixed with, centered container div. This is behaving perfectly, but I'd like the ability to add content inside a div, spanning the width of the first two columns without pushing the last two onto a new line lines. Any Ideas? Thanks. Example: Here is the code I have so far: 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" lang="en" xml:lang="en">
<head>
<title>3 Contained Column Skeleton.</title>
<style type="text/css">
body
{
margin: 0; /* asthetic */
padding: 0; /* asthetic */
background-color: gray; /* asthetic */
}
#top
{
width: 955px; /* core structure */
margin: 0 auto; /* core structure */
}
#bottom
{
clear: both; /* core structure */
width: 955px; /* core structure */
margin: 0 auto; /* core structure */
}
#content
{
width: 955px; /* core structure */
margin: 0 auto; /* core structure */
overflow: hidden; /* core structure */
}
#content .column
{
float: left; /* core structure */
width: 260px; /* core structure */
padding-bottom: 20010px; /* core structure */
margin-bottom: -20000px; /* core structure */
position: relative;
border-right: 5px solid yellow; /* asthetic */
}
/** This is just a skinny column with no border-right **/
#content .skyscrape
{
float: left; /* core structure */
width: 160px; /* core structure */
padding-bottom: 20010px; /* core structure */
margin-bottom: -20000px; /* core structure */
position: relative;
}
#content .skyscrape img
{
border: none; /* asthetic */
}
</style>
</head>
<body>
<div id="top" style="background-color: purple">
HEADER
</div>
<div id="content">
<div style="background-color: brown">
<img style="border:1px solid yellow;border-right:4px solid yellow;" src="http://img120.imageshack.us/img120/1418/imgou3.gif" alt="image" />
<p style="width:523px;margin:0;padding:3px;background-color:white;">
Etiam mattis. Sed gravida gravida massa. Etiam posuere est sed orci! Curabitur porttitor egestas turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed magna.
</p>
</div>
<div class="column" style="background-color: pink;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin faucibus justo a tellus. Donec quis tortor? In bibendum pretium metus. Vestibulum vehicula risus a enim. Cras libero lacus; egestas in, commodo eget, dictum eu, mi! Proin eget erat. Nullam elementum dignissim leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque enim erat, adipiscing nec, lacinia a, porta in, ipsum.
</p>
<p>
Curabitur quam risus, condimentum ut, viverra vestibulum, pulvinar a, lorem? Duis dolor. Suspendisse nibh. Donec eu sapien. Proin ornare nulla et nibh! Morbi nunc felis, tristique et, cursus non, mollis eget, sapien. Quisque tristique ante vitae pede. Ut venenatis commodo velit. Curabitur dignissim enim eget ante. Donec nisl? Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<p>
Duis in dolor. Vestibulum venenatis. Integer vulputate odio vel nisl. Proin malesuada tellus sed sapien pharetra blandit. Curabitur eget nibh sit amet odio mattis condimentum. Aliquam erat volutpat. Vivamus blandit accumsan nibh. Nulla imperdiet aliquet leo. In nulla. Maecenas sed erat sit amet diam venenatis pharetra. Pellentesque egestas nisl a est! Suspendisse vulputate viverra felis. Pellentesque malesuada rhoncus augue. Cras id mi at magna aliquam mattis. Cras elementum lacus at diam. Suspendisse id nunc sed nunc semper laoreet. Pellentesque suscipit, pede et ultricies ullamcorper, dolor felis tincidunt ipsum, quis ullamcorper purus diam vitae nisl! Etiam congue interdum ipsum. Donec eros nisl, pulvinar ultricies; semper id, bibendum eu, enim! Nulla scelerisque ornare purus!
</p>
</div>
<div class="column" style="background-color: orange">
<p>
Sed nec risus. Praesent sit amet enim. Cras sed ipsum a dui vehicula luctus. Ut dui. Quisque pulvinar elementum odio. Integer non sapien! Nam tincidunt velit non sem. Suspendisse sollicitudin, nisi varius vulputate volutpat, tellus erat volutpat pede, quis luctus mauris lorem sit amet augue. Quisque placerat turpis eu erat. Donec posuere ultricies orci. Sed vitae ligula. Phasellus quis ipsum. Nam et eros. Vivamus risus libero; vehicula eu, convallis non, adipiscing vitae, velit! Integer faucibus lorem et augue! Duis consequat mauris. Sed sed nibh quis nisi accumsan ornare. Praesent lectus. Aenean consequat augue sit amet purus.
</p>
<p>
Cras eu augue a elit auctor congue. Curabitur a enim ut turpis placerat porta? Suspendisse eu urna. Vestibulum tincidunt aliquam augue. Pellentesque vel urna. Phasellus euismod turpis in purus. Vivamus viverra, magna eget egestas aliquet, libero libero venenatis mauris, non laoreet purus pede blandit massa. Quisque pulvinar tempus metus! Nullam metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque enim nibh, interdum eu, gravida eu, tristique id, elit. Fusce quis odio? Nam dui. Duis a ante eget lorem mattis euismod. Morbi non lectus. Vestibulum aliquet risus porttitor tortor. Nam ultrices.
</p>
<p>
Sed sed turpis et velit facilisis viverra. Nam adipiscing metus commodo diam. Aenean placerat viverra tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer elementum libero et ipsum rhoncus egestas. Vivamus felis. Fusce dapibus, quam in sagittis ullamcorper, pede tortor iaculis nibh, at pharetra ante massa quis elit. In condimentum, neque et ultricies gravida, dolor est bibendum metus, in cursus sapien quam at erat. Etiam condimentum. Suspendisse fermentum. Vestibulum ullamcorper rutrum urna. Sed convallis, sapien quis sagittis porttitor, enim tortor mattis lacus, vitae interdum neque urna ut purus. Duis porta tincidunt orci. Maecenas porta ullamcorper magna! Sed eu est vel felis tincidunt dictum! Nullam vitae neque ac arcu porttitor convallis? Phasellus gravida rutrum tellus. Donec quis nisl.
</p>
</div>
<div class="column" style="background-color: blue">
<p>
Ut ultrices ultrices nisi. Sed ultrices ultricies lectus. Proin est. Integer massa. Cras imperdiet! Sed ante? Aliquam in urna. Pellentesque iaculis, magna ut ullamcorper sagittis, urna ante aliquet enim, et convallis erat elit et turpis. Integer interdum mauris in augue. Integer velit dolor, pharetra et, mattis sed, cursus eget, arcu. Phasellus facilisis, ante et bibendum ullamcorper, arcu elit fringilla augue, quis pellentesque nibh dolor in metus. Duis venenatis felis quis est. Vestibulum tristique porta nibh! Nulla vitae leo vel diam molestie venenatis. Cras a mi id sem volutpat convallis.
</p>
<p>
Nunc imperdiet vulputate arcu. In venenatis mauris at nunc dignissim euismod. Integer mattis. Etiam pede purus, imperdiet non; molestie quis, lobortis ut, risus. Ut quis eros. Pellentesque elementum vulputate urna! Praesent ac mi. Duis felis lectus, vestibulum ac, posuere vitae, dignissim id, leo. Sed nisl lectus; consequat vel, consectetur in, mattis id, dui. Maecenas quis dolor. Proin eu dui. Aenean interdum? Donec vel pede vel mauris laoreet lobortis. Integer vehicula, neque nec elementum posuere, magna erat tristique tellus, eu consectetur leo magna vitae eros. Quisque erat pede, lobortis id, gravida non, pretium id, enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras lacus nibh, semper non, laoreet quis, placerat in, ante. Vivamus porttitor eros et erat.
</p>
<p>
Aenean eget orci non orci vulputate sodales. Cras pede sapien, scelerisque ac, dapibus in, aliquam sit amet, sem. Donec feugiat. Duis aliquam mauris vel erat. Integer quam. Pellentesque vitae lacus! In molestie augue id nibh. Curabitur non leo non metus convallis molestie! Curabitur imperdiet. Etiam laoreet rhoncus nisi. Maecenas pharetra lorem iaculis dui. Ut eu est sed eros feugiat malesuada! Nullam sit amet purus vitae eros posuere aliquam.
</p>
</div>
<div class="skyscrape" style="background-color: lightgrey;">
<a href="#"><img src="http://img515.imageshack.us/img515/7244/img2bk8.gif" alt="image"/></a>
<a href="#"><img src="http://img530.imageshack.us/img530/6606/img3mm0.gif" alt="image"/></a>
</div>
</div>
<div id="bottom" style="background-color: purple">
FOOTER
</div>
</body>
</html>
Similar TutorialsI'm taking over a departmental web page that has a whole bunch of Code: <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> in the web pages. Does anyone know how to put this in a stylesheet so that I don't have to put this code in every <body> tag when I create a new page? I've searched all over and can't find a reasonable resolution. Thanks what is the equivilant to <table border="1" cellpadding="2" cellspacing="0"> in css? i've tried PHP Code: table { border-spacing: 0px; padding: 0px; border-colapse: colapse; border-style: solid; border-width: 1px; } td { border-style: solid; border-width: 1px; padding: 2px; } That makes the width 2px wide though. I want it to only be one. And the padding seems to be messed up as well. I'm using the CakePHP framework to build my site. I hope I'm not asking an impossible question and being since I'm new an all.. Anyways I finished a simple design well I thought it was simple anyway until I tried to make the content box to be a fluid width. Here's what it's supposed to look like. http://planet-rpg(dot)com/PR_style.png // yes I know I'm a new user.. Here's what I currently have. http://planet-rpg(dot)com Here's my coding. html Code:
<?php echo $html->docType('xhtml-trans'); ?>
<html>
<head>
<title>Planet RPG::. Imagine a creative universe : <?php echo $title_for_layout; ?></title>
<?php echo $html->css('styles'); ?>
</head>
<body>
<div id="top_bar">
<p>top bar</p>
</div>
<div id="body">
<div id="header">
<p>Header</p>
</div>
<div id="page-wrap">
<ul id="navigation">
<li class="first"><a href="/games/">Games</a></li>
</ul>
<div id="frame">
<div id="container">
<div id="main_content">
<p>Content area</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>footer coding</p>
</div>
</body>
</html>
css Code:
html {
background: #2b435d;
}
html, body {
margin: 0;
}
body, table {
color: #303030;
}
img { border: 0; }
#body {
background: #d8dde8;
padding: 0 0 16px;
}
#page-wrap {
min-width: auto;
margin: 10px auto;
}
#frame {
margin: 0 auto;
padding: 0px 1170px 0px 220px;
margin-top: -17px;
}
#main_content {
background-color: #fff;
}
#header {
background: url("../img/header.png") repeat-x bottom left;
height: 64px;
margin-top: 36px;
}
#navigation {
background: url("../img/navigation.png") repeat-x bottom left;
height: 31px;
margin-top: -20px;
font-family: "Arial", sans-serif !important;
font-size: 14px;
color: #fff;
text-shadow:-1px -1px 0 black;
list-style-type: none;
padding:1px 5px 1px 220px;
}
#navigation li {
float: left;
}
#navigation li a {
border-left: 2px solid #303030;
text-shadow:-1px -1px 0 black;
color: #D0D0D0;
font-size: 14px;
font-weight: bold;
text-decoration: none;
display: block;
height: 21px;
padding: 6px 12px 1px;
}
#navigation li a:hover {
color: white;
text-shadow:-1px -1px 0 black;
}
#navigation li.first {
padding-left: 236px;
margin-left: -236px;
text-shadow:-1px -1px 0 black;
}
#navigation li.first a {
background: url("../img/cursor.png")bottom center no-repeat; height:24px;
color: #6193c7;
border: 0;
text-shadow:-1px -1px 0 black;
}
#logo {
width: 166px;
height: 50px;
margin-top: -32px;
margin-left: 20px;
position: absolute;
z-index: 2;
}
#footer {
background: #607080 url("../img/footer.png") repeat-x;
height: 60px;
padding: 30px 0;
clear: both;
}
#top_bar {
background: url("../img/top_bar.png") repeat-x bottom left;
height: 36px;
font-family: "Arial", sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
height: 36px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
}
I haven't used CSS/html in awhile but if anyone can help me either "fix" the content box so it appears like mockup which would be centered on my screen as my resolution is 2560X1600(30") and just repeat the <div's> when needed. Hope someone can help me with my question. http://stuweb.cms.gre.ac.uk/~as234/full/full.htm some problems: in IE the menu at the top is "block" level but i want it to be in a line? whereas in ff its ok! in ff, one of the menu image (called "main" on the left of review) doesnt appear but if u hover over it, u will see the rollover image! the background colour should be grayish however that DOESNT happen! (I originally posted this at the end of another of my topics but I don't think it was seen). I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen. Example Picture The site itself. Any ideas? Hi guys, For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ? Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html). Thank you Hi, I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser. Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important. I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML Here is my Html PHP Code: <DIV id="nav"> <ul> <li id="1"><a href="Home">Home</a></li> <li id="2"><a href="About-us">About us</a></li> <li id="3"><a href="FlexNews">FlexNews</A></li> <li id="4"><a href="Careers">Careers</A></li> <li id="5"><a href="Contact">Contact</A></li> </ul> </div> Pretty straight forward, now my css PHP Code: #nav { width:1005px; vertical-align: middle; text-align: left; } #nav ul { list-style: none; padding: 0; margin: 0; } #nav li { float: left; text-align: left; } #1 a{ line-height: 20px; float: left; width: 215px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #1 a:hover { line-height: 20px; float: left; width: 215px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a{ line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a { line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a { line-height: 20px; float: left; width: 184px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a:hover { line-height: 20px; float: left; width: 184px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #5 a { line-height: 20px; float: left; width: 183px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; } #5 a:hover { line-height: 20px; float: left; width: 183px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; } Here is an exmple link http://dev.121design.co.uk/flextrade2/ Works fine in IE but not in Firefox, heres hopling someone can help. Thanks in Advance, tried so many different methods and none seem to work. Cheers, Stuart that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently. However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image. If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall. (URL address blocked: See forum rules)/cv/cv.html This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work? I have a very simple question: I have this html code: Code: <div id="text"> <p><a>text</a></p> <p><a class="red">text</a></p> <p><a>text</a></p> </div> And this CSS style: Code: .red { color: red; }
#text a{ color: blue; }
I would like to apply the .red class, but it does not work, because the #text a overrides it. How can I solve that? It is just an example because it is a cause of a problem generated by a CMS, and I can only play with the CSS, not with the HTML side. Hi guys! Let's say I have this IN BODY directly: Code: <div id="top_section"> ... </div> <ul id="menu"> ... </ul> Or should I do it like this: Code: <div id="top_section"> ... </div> <div id="menu"> <ul> ... </ul> </div> UL and DIV are both block elements so I think the first is acceptable (combining block elements whatever their sort is logical or am I completely wrong here??) Thank you Is there by chance a feature of MS Front Page that helps us out by changing height and width attributes to upper case, which CSS does not recognize? If so, is there a way to disable this feature? What is the popular alternative (among those in the know) to MS FP? The "normal-html-preview" screen format in FP is great. Or, can we simply get rid of the height and width calls in "img src=" links? Thank you for any attention to this. Ed Hello, I am currently making a site, and this is my first experience using css, and so far I love it. Now I have a page with multiple links on it, and this page has its css info stored in a seperate css file. Now I want some of the links to show up in all satus's (hover, visited ect)with one color, size ect, and some links to show up with a different color. I know i can modify all the links on the page color by adding this to the css page... ------------------------ A:LINK {font-family: Arial, Helvetica, sans-serif; color:#000000; text-decoration:none; font-size:12pt; font-weight:bold;} ----------------------- but how can i make it so each class has a differnt a:link, a:visited, ect. Thanks! http://cheers-sendai.com/fluidframe.htm has a great and simple example of 3 cols (OK, 2 cols in the middle section makes "4 cols"), header and sticky footer, where the middle col has overflow:auto so it can be scrolled. GREAT example, I think (due to the use of bg colors, etc.). The left/right/width values of the divs are manipulated so that the middle section runs from 10% to 90% and the left/right divs fill in accordingly. I'd like to be able to set, for example, the left and right divs to be 150 px wide (NO percentages!) and have the middle section stretch between them (regardless of viewport width) and be able to be scrolled, too. The problem I see is that most examples use percentages. I can set the left div to be a fixed width, then set the middle section left coord. to be, say, 150px, but then I need to set its width to stretch to "150 to the left of the right side of the viewport" and I don't know how to do this. Thanks. I am using the following code. In firefox the input box (including the border) fits a nice box of 83 by 15. In IE it seems to not be so well, and is bothering things near it. Any ideas on how to rectify this? Code:
<td><input type="text" class="loginbox" size="13" /></td>
.loginbox
{
border: 1px;
border-style: solid;
border-color: #9AA8C3;
padding: 0;
margin: 0;
text-decoration: none;
font-size: 11px;
color: #40668C;
}
Hi there, I've read that for using decorative images in web design its preferred that you apply them as background images instead of using the <img> tag, as using the <img> tag stops the page from displaying until all the images have fully loaded in the browser, where as using a css background image will output the page completely, then start to load in the images (users can start reading the text whilst the images load in). I was just wondering really if anyone else has used this method and gone to the extreme measure if replacing all <img> tags with css background images to dramatically improve their page load speeds? So for example... before Code: <img src="my_thumbnail.jpg" alt="Thumbnail Graphic" title="Thumbnail Graphic" width="100" height="70" /> after Code: .thumb {
background-repeat: no-repeat;
width: 100px;
height: 70px;
}
<div class="thumb" style="backgound-image: url('my_thumbnail.jpg");"></div>
Just an idea really, not sure on how standard compliant it is but I might test it out later to see what speed improvements it brings. I'd be very interested in anyones thoughts Hello! Im Using Joomla to build my website. Im using a module and im changing the css styling. There only one problem im having. The tabs on the module align to the left and because i dnt have enough tabs to fill out the space it leave a blank space on the right. I just want to know how to edit the CSS to make the taps justify / spread out evenly. The makers of the module say any question on customization will be ignored that why i post this question here to see if i could get some help. Its "Tabs Manager GK3" from Gavick Heres the CSS. Can any1 just make the changes for me please and post it below Thanks in advance! Code: .clearfix-tabs{
clear: both;
}
.gk_tab_item_space{
padding: 10px;
}
div.gk_tab-style3 {
position: relative;
}
div.gk_tab_wrap-style3 {
margin: 0 auto;background: #171717;
border: 4px solid #822864;
}
div.gk_tabmenu-style3 {
overflow:hidden;
}
ul.gk_tab_ul-style3 {
list-style-type: none;
margin: -1px 0 0;
padding: 0;
}
ul.gk_tab_ul-style3 li {
background: none;
padding: 0;
float: left;
cursor: pointer;
margin: 0;
position: relative;
}
ul.gk_tab_ul-style3 li span {
background: url('../../images/horizontal/style3/bg_tab.png') repeat-x 0 0;
display: block;
height: 28px;
line-height: 27px;
padding: 0 10px;
font-size: 10px;
color: #000;
text-transform:uppercase;
border: 1px solid #e1e1e1;
border-left: none;
}
ul.gk_tab_ul-style3 li.active span {
background: url('../../images/horizontal/style3/bg_tab-active.png') repeat-x 0 0;
color: #171717;
border: 1px solid #b32784;
}
div.gk_tab_container0-style3 {
clear: both;
}
div.gk_tab_container1-style3 {
overflow: hidden;
}
div.gk_tab_item-style3 {
float: left;
overflow: hidden;
padding: 10px;
}
div.gk_tab_button_next-style3,
div.gk_tab_button_prev-style3 {
width: 24px;
height: 24px;
background: url('../../images/horizontal/style3/b_next.png') no-repeat 0 0;
cursor: pointer;
position: absolute;
top: 43%;
right: 0;
}
div.gk_tab_button_prev-style3 {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 0 0;
left: 0;
right:inherit;
}
div.gk_tab_button_next-style3:hover {
background: url('../../images/horizontal/style3/b_next.png') no-repeat 100% 0;
}
div.gk_tab_button_prev-style3:hover {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 100% 0;
}
.gk_tab_container0-style3,
.gk_tab_container1-style3,
.gk_tab_container2-style3{
position:relative;
}
Hi, I'm still new to CSS and have been learning for the past couple of days now. I'm having trouble getting a two-column layout working correctly. Using the faux method, I have a background set so the right-column has a different background color. This works fine. But I'm having trouble placing the elements inside of the container to work correctly. When the left-column has more content than the right, instead of the container (and thus the background) moving to fit it, the column just extends down by itself. However if the right column has more content than the left, it works correctly. I think it might be because of the float: left, but I'm still new and not exactly sure what the problem is. The URL to view this is http://serve5.net/extend/ - the CSS is right in the source for you to look at. Could someone point me in the right direction as far as getting the left-column to extend down correctly? It seems to work fine in Internet Explorer - but I use Mozilla Firefox and it's having this issue. However, in Mozilla, the left-column's background extends to the border fine, but in IE, it overlaps it. What can I do to fix this also? Thanks. I'm not sure if we are allowed to post urls here or not, didn't see anything against it but I'm sure someone will inform me if we can or can't. Anyways I'm having problems getting the "current" class to work for the active page. I want the current page to use the rollover id. This is a code snippet that should be enough to figure out how I am doing my navigation. I am using a single image and shifting it depending on the state it's in. CSS Code: Original - CSS Code .nav1 {float:left; position:relative;display:block;} .nav1 li {margin:0px; padding:0px; display:inline;} .nav1 li a {height:30px; float:left; list-style:none;} a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/ #home a{ float:left; background-image: url(images/nav_main_1.png); display: block; height: 30px; width: 132px; text-decoration: none; background-position: 0px -31px; } } #home a:hover, a.current{ background-image: url(images/nav_main_1.png); background-position: 0px 0px; } #news a{ float:left; background-image: url(images/nav_main_2.png); display: block; height: 30px; width: 131px; text-decoration: none; background-position: 0px -31px; } #news a:hover, a.current { background-image: url(images/nav_main_2.png); background-position: 0px 0px; }
.nav1 {float:left; position:relative;display:block;}
html4strict Code: Original - html4strict Code <ul class="nav1"> <li id="home" class="current"><a href="#"><span>Home</span></a></li> <li id="news"><a href="#"><span>News</span></a></li> </ul> <ul class="nav1"> Any help is greatly appreciated, I would imagine I am missing something simple. It's the effect where you click on a link or a button and a new bit of content appears, pushing down everything below it. Clicking it again makes that content disappear and all the original text move back up. Google uses it in a number of places, notably at the bottom of any search result. At the very bottom, below the "Goooogle" page number thing, there's a little plus sign to the left of "Add a result". Clicking that makes new content appear. I see it in a lot of places and I love the effect! I don't know if its Ajax or CSS or whatever, so I don't know how to properly search for a tutorial, but could anyone point me in the right direction? |
|||||||