|
CSS - Floating An Image Within A Td.
Hi,
I'm getting very frustrated trying to float in image to the right and vertically aligned in a TD cell. This is a actually a vBulletin Forum Home Page and I want to display an image in the forum description. With the inline CSS below I keep getting a new line which I don't want. I want the text "Forum description goes here" with the image vertically aligned on the right hand side of the TD cell. Code: <td class="alt1Active" align="left" id="f34"> <div> <a href="http://www.myurl.co.uk/forums/test_forum/"><strong>Test Forum</strong></a> </div> <div class="smallfont"> Forum description goes here. <!-- *** THIS IS THE BIT I HAVE CONTROL OVER *** --> <div align="right" valign="top" style="float:right;"> <a href="http://www.myurl.co.uk"> <img src="http://www.myurl.co.uk/picture.jpg" style="border:0px;"> </a> </div> <!-- ****** --> </div> </td> Similar TutorialsI want "alternate views" text and thumbimage stand on the same line. I dont understand why the image moves a line below. Please advise. PHP Code: html: #product .productimage .thumb { float:left; width: 250px; border-bottom:1px dotted #ece7d1; } #product img#thumbimage { float:right; width: 16px; height: 16px; border: 0px; } css: <div class="thumb"> alternate views : <img src="http://www.refinethetaste.com/html/THEMES/default/images/pictures.png" id="thumbimage" /> </div> Ok the problem is hard to explain but here it goes: I have news items that are divs, inside that div i have a floating left image, then i have the news content. The problem comes when I view it in Firebird. It seems the next news item starts at the bottom of the floating image. This causes serious problems with the text. I tried this .clear css style: clear: both height: 0 line-height: 0 but it just seemed to help with one (bringing the second one below the bottom of the page). Does anyone know what might be the problem? Here is the link: http://www.cjweed.com/porttest As you can see IE displays everything like a champ, mozilla likes to mash it together. Please help Hi, first of all i'm a bit new to this, but not a Compleet noob. pls be kind Ok, so my issue is i have a type of image gallery made with spans. I have the span tags enclosed by the <a href> tag. Spans are floating. The reason for this is that I want to have the border change colors on hover, wherever the pointer might be located in the span. It works great in firefox and IE8, but i just discovered this morning, much to my dismay, that it doesn't work in IE7 or below. of course it was the person i'm making the web page for that pointed this out, go figure. The problem is that eventhough IE shows that it is a link, when clicking on the image, nothing happens. text works find, the area around image and text works fine, just not the image. I tried searching google for a couple hours and could not find a fix that didn't involve javascript. I'm trying to avoid JS as much as possible, and so far all has gone well. Ok down to the nitty gritty. I stripped down the html so that it just shows one of the spans, so if you drop the code into notepad and save as htm you can play with it. css link is complete to my hosted css file. honestly im not sure why im using that doc-type, i don't completely unerstand the mechanics, i just thought for no sound reason at all that it would be better than html doc type. xhtml 1.0 validates and css validates as 2.1. Code:
<?xml version="1.1" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Bella Luna Gifts for the Soul - Wands</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.bellalunagifts.net/main.css" />
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;}
#menu ul {text-align:left;}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 12px/16px arial, "lucida console", sans-serif; padding: 3px 2px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-container">
<div id="content">
<a href="http://www.bellalunagifts.net/rose_quartz_healing_wand.htm">
<span class="thumbnailleft"><img class="image" src="products/tn/rose_quartz_healing_wand.gif"
alt="Rose Quartz Healing Wand" width="150" /><br/><br/>Rose Quartz Healing Wand<br /></span></a>
</div>
</div>
</body>
</html>
If you just wanna glance at the css affecting the span and image, here it is. Code:
.thumbnail {
float: left;
width: 150px;
height: 210px;
margin: 0 20px 15px 0px;
padding: 5px;
text-align: center;
border-style: ridge;
border-color: #3333FF;
text-decoration:none;
}
a {text-decoration: none;color: #000000;}
a:link .image {border-style: none;}
a:active .image {border-style: none;}
a:hover .thumbnailleft {
border-color: #00CCFF;}
a:hover .thumbnail {
border-color: #00CCFF;}
a:visited {text-decoration: none;color: #000000;}
a:visited .image {border-style: none;}
and i dont know why my docs are .htm instead of html.....long time ago i had a reason that may or may not have been valid but i should probably change to .html, yeah? well the link to the page im working on is http://www.bellalunagifts.net/wands.htm this is the last immediate piece of foundation code that i need to figure out to start rolling out the rest of the website. this is the first time i've posted for help, i really do try to figure out stuff on my own, but am ready to throw my head through the screen right now. and hell, if i'm goin about this in a silly way, pls tell me. i always welcome criticism. any help would be much much appreciated. i'm gonna keep trying to figure this out, but i'm hoping that one of you already knows what i'm doing wrong. i know my css code is probably redundant in places, but for now i'm just working on getting things to work. thx in advance for any reply. Here's the html and css for http://www.pxgo.com/lifepak-prime.php - What I really need help with is aligning the footer (I know absolute positioning is bad for me, but relative doesn't work either) and floating my image (which for some reason vanished once I added the floatleft class). Thanks in advance for any help! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD><TITLE>Lifepak Prime</TITLE>
<LINK rel="stylesheet" type="text/css" href="style.css"></HEAD>
<BODY>
<?php
include ("include/head.txt");
?>
<?php
include ("include/menu.txt");
?>
<div id="content"><h2>Lifepak Prime</h2><img class="floatleft" src="graphics/lifepak-prime.bmp" width="192" height="192" alt="Lifepak Prime" />
Lifepak Prime contains all the nutrition in Lifepak anti-aging formula <i>and more</i>. Add quality years to your life by providing the vitamins, minerals, and trace elements your body needs to protect and regenerate cells.
<br><br>Lifepak Prime all-natural dietary supplements addresses the specific needs of men over 40 and post-menopausal women with BioGinkgo 27/7 extract (ginkgo biloba), milk thistle, glutathione, alpha-lipoic acid, coenzyme Q10, and grape seed extract.
<br><br>Lifepak Prime provides 150 IU, or 500 % daily value, of vitamin E, increased levels of B6, B12, and zinc for optimal nutrition intake. Lifepak Prime also provides unique dietary components for bone health, as well as those that support memory and circulation.
<br><br>My family uses Lifepak so I'll be happy to answer questions about Lifepak on the <a href="http://www.pxgo.com/discuss/viewforum.php?f=9">Lifepak message board</a>. We'd also love to hear from other people who are using Lifepak.
<br><h2>Lifepak information</h2>Lifepak Prime is optimized for men over 40 and post-menopausal women. There is also a Lifepak for pregnant and lactating women (Lifepak PreNatal), Lifepak for woomen from 18-menopause (<a href="lifepak-women.php">Lifepak Women</a>), and adults from 18 to 40 (<a href="lifepak.php">Lifepak anti-aging formula</a>).
<br><br>Lifepak is a vitmain, mineral, phytonutrient supplement. Lifepak is much more than a multiple although it does address common deficincies:
<ul><li>Vitamins A, E, and B6
<li>Zinc, iron, calcium, and magnesium for healthy bones
<li>Alpha-lipoic acid, vitamins B9 (folic acid), B12, C, E, flavinoids, and carotenoids for the anti-aging processes of cellular protection and cellular regeneration.
</ul></div>
<br><br>
<?php
include ("include/ads.txt");
?><br><br>
<?php
include ("include/footer.txt");
?>
</BODY></HTML>
Code: BODY { margin-left: 0%; margin-right: 0%; margin-top: 0%; font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR:#000000; BACKGROUND-COLOR:#ffffff; }
A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
FONT {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 13px; FONT-FAMILY: verdana, arial, sans-serif}
.titular {COLOR: #000000; background-color:#238c13;}
.negro {background-color:#000000; color: #FFFFFF; FONT-SIZE: 12px; FONT-FAMILY: verdana, arial, sans-serif; font-weight:bold;}
.floatleft {float: left; border=1; padding=1; margin: 4px;}
a {
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}
#head {
font-family:verdana, arial, sans-serif;
color:#000000;
font-size:16px;
font-weight:800;
background:#238c13;
padding:0px;
}
#head h1 {
margin:0px 0px 0px 0px;
padding:20px;
color:#000000;
font-size:18px;
font-weight:800;
z-index:1;
}
#head a,
#head a:link,
#head a:visited,
#head a:active,
#head a:hover {
margin:0px 0px 0px 0px;
padding:20px;
color:#000000;
font-family:verdana, arial, sans-serif;
font-size:18px;
font-weight:800;
text-decoration: none;
}
/* All the content boxes belong to the content class. */
#content {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:200px;
margin:30px 170px 20px 220px;
border:0px;
background-color: #ffffff;
padding:10px;
color: #000000;
font:bold 15px verdana, arial, sans-serif;
z-index:5;
}
#content h2 {font:bold 16px verdana, arial, sans-serif; padding:15px;}
#content a:link { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:visited { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:active { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:hover { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
#navi {
position:absolute;
width:200px;
top:120px;
left:20px;
border-right:#238c13 2px dotted;
background-color:#ffffff;
padding:0px;
color:#238c13;
font:bold 13px verdana, arial, sans-serif;
z-index:2;
}
#navi A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
#ads {
position:absolute;
width:130px;
top:100px;
right:10px;
border-left:#238c13 2px dotted;
background-color:#ffffff;
padding:10px;
z-index:3;
}
#footer {
position:absolute;
width:100%;
top:730px;
margin:10px 0px 0px 0px;
padding:10px 0px 0px 0px;
border-top:#238c13 2px dotted;
background-color:#ffffff;
z-index:4;
}
#footer A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
i want to have organized game boxes. the way i want it organized is for the image to be on the left, and the text to the right of the image. however, i want the image to be in the vertical middle of the div and the text to also be in the vertical middle. the problem with what i have now is that the image is always at the top of the game box div and so is the text. ALSO, i want the WHOLE GAMEBOX to act as an <a>, and not just the image and the game title. is that possible? Code: if ($a == 2) {
echo "
<div class='gamebox clearboth floatleft halfwidth'>";
$a = 0;
} else {
echo "
<div class='gamebox floatleft halfwidth'>";
}
$a++;
$game['desc'] = str_replace("'", "'", $game['desc']);
$game['desc'] = "<span class='gdesc'>".$game['desc']."</span>";
$link = get_game_link("id="._sp($game['id']));
echo "<a href='".$link."' class='gamelink'>";
// display game
echo "
<div class='floatleft'>
<img src='[imgdir]".$game['nameid'].".png' alt='Play ".$game['name'].
"' title='Play ".$game['name']."' class='gamethumb' />
</div>
<div class='floatleft wordwrap' style='width:75%'>
<h3 class='nomargins'><a href='".$link."' class='gamelink'>".$game['name']."</a></h3>";
$rating = round($game['rating']/2);
echo "
<img class='nomargins' style='border: 0px' src='[themedir]/ratings/".$rating."stars.gif' alt='".$game['name']." Rating' />";
echo "
<p class='nomargins'>".html_entity_decode($game['desc'], ENT_QUOTES);
if (theme_is_admin()) {
echo "<small>";
echo theme_admin_link("Manage Games", "darklink", "games", "manage");
echo " - ";
echo theme_admin_link("Edit This Game", "darklink", "games", "editgame-form", "id=".$game['id']);
echo "</small>";
}
echo "
</p>
</div>
</a>
</div>";
I'm trying to have a logo in a div next to a navigation menu that can align at a specific height in my logo. but im having a problem with my li background images staying within the ul background image. Can someone help me fix my code to align this properly? HTML CODE: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- load the typeface.js library and typeface.js fonts -->
<script src="js/typeface-0.14.js"></script>
<script src="fonts/haettenschweiler_regular.typeface.js"></script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">
<div id="navigation" class="menu">
<ul id="top-nav">
<li class="item4"><a href="#" title="Contact">Contact</a></li>
<li class="item3"><a href="#" title="About">About</a></li>
<li class="item2"><a href="#" title="Ideas">Ideas</a></li>
<li class="item1"><a href="#" title="Portfolio">Portfolio</a></li>
</ul>
</div>
<div id="logo"><span><a href="http://www.nadesignstudio.com/" title="NA Design Studio" rel="home">NA Design Studio</a></span></div>
<div class="clear"></div>
<!-- end #header --></div>
<div id="mainContent"><h1 class="typeface-js">Main Content </h1>
<div class="typeface-js">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. </p>
</div>
<!-- end #mainContent --></div>
<div id="footer">
<p>na design inc, new york :: all right reserved 2010</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
CSS CODE: Code: body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
margin: 0;
padding: 0;
text-align: center;
color: #FFFFFF;
}
.oneColFixCtrHdr #container {
width: 800px;
background-image: url(images/bg-stripe.png);
background-repeat: repeat;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.oneColFixCtrHdr #header {
padding: 10px 10px 0 10px;
background: #000000;
}
.oneColFixCtrHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.oneColFixCtrHdr #mainContent {
padding: 0 10px;
}
.oneColFixCtrHdr #footer {
padding: 0 10px;
background: #000000;
font-family: "Courier New", Courier, monospace;
font-style: italic;
font-size: 8pt;
}
.oneColFixCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}
.typeface-js {
font-family: Haettenschweiler;
font-style: italic;
letter-spacing: 1px;
color: #FFFFFF;
}
#logo {
display: inline;
float: right;
text-align: left;
}
#logo a{
background-attachment: initial;
background-clip: initial;
background-color: initial;
background-image: url(images/logo.png);
background-origin: initial;
background-position: 0 0;
background-repeat: no-repeat no-repeat;
display: block;
height: 118px;
margin-bottom: 10px;
text-indent: -9000px;
width: 296px;
}
.msie #blog-title a {
margin-bottom: -10px;
position: relative;
}
#navigation {
background-image: url(images/bg-nav.png);
background-position: 0 0;
background-repeat: no-repeat no-repeat;
float: right;
height: 22px;
width: 474px;
margin-top: 75px;
}
#navigation ul {
}
#navigation li {
float: right;
height: 22px;
position: relative;
list-style: none;
}
#navigation li a {
font-family: Haettenschweiler;
font-style: italic;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
color: #FFFFFF;
font-size: 0.95em;
font-weight: bold;
background-image: url(images/bg-nav-btn.png);
background-repeat: no-repeat no-repeat;
height: 22px;
display: block;
width: 69px;
overflow: auto;
}
#navigation li a:hover {
background-image: url(images/bg-nav-btn.png);
background-position: 50% -22px;
background-repeat: no-repeat;
color: #000000;
}
#navigation li.item1 a {
font-family: Haettenschweiler;
font-style: italic;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
color: #FFFFFF;
font-size: 0.95em;
font-weight: bold;
background-image: url(images/bg-nav-btn1.png);
background-repeat: no-repeat no-repeat;
height: 22px;
display: block;
width: 69px;
overflow: auto;
}
#navigation li.item1 a:hover {
background-image: url(images/bg-nav-btn1.png);
background-position: 50% -22px;
background-repeat: no-repeat;
color: #000000;
}
.clear {
height: 0;
font-size: 1px;
margin: 0;
padding: 0;
line-height: 0;
clear: both;
}
Example of problem If Image doesnt show below, view it he http://nadesign.pisigmachi.com/wp-content/uploads/2010/02/example.jpg URL my goodness what a popular site this seems to be. im just a n00b in css and xhtml right now, but hopefully not for long. im trying to use a table to arrange the images in my website introduction page. im trying to make the page look exactly the same no matter the browser window size. im trying to float the two images that have the names programmingimg.gif and programmingtext.gif, but they are not floating to the right, they are just staying adjacent to the other image in the same cell. one other problem that i am having is, that the only way for me to stretch the background gif across the window size it to fake a background. its just the first image in the file with a z index of -1. this works in FIREFOX but not in IE. in IE, nothing can be seen except the background image. does anyone have a solution to either of these 2 problems? css: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Patrick Allard's Very Graphic Website</title> <link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> <img src="backgroundfire2.gif" alt="background image" id="bg" /> <table border="1" class="introlayout"> <tr> <td class="introtitle"> <img src="titlemaxfontgreyredfire.gif" alt="background image" id="titleimg" /> </td> </tr> <tr> <td class="skillpics"> <img src="analogskillspic.jpg" alt="background image" id="analogskillsimg" /> <img src="programmingpic.jpg" alt="background image" id="programmingimg" /> </td> </tr> <td class="skilltext"> <img src="analogskillsmaxfontblackbluefire.gif" alt="background image" id="analogskillstext" /> <img src="programmingmaxfontblackbluefire.gif" alt="background image" id="programmingtext" /> </td> </tr> <td class="menu"> <img src="mainmenumaxfontblackbluefire.gif" alt="background image" id="mainmenuimg" /> </td> </tr> </table> </body> </html> html: Code:
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
img#bg
{
position:fixed;
width:100%;
height:100%;
z-index:-1;
}
img#titleimg
{
width:100%;
}
img#mainmenuimg
{
text-align:center;
width:30%;
}
img#analogskillsimg
{
width:40%;
height:60%;
}
img#programmingimg
{
float:right
vertical-align:bottom;
width:40%;
height:60%;
}
img#analogskillstext
{
vertical-align:bottom;
width:40%;
}
img#programmingtext
{
float:right
width:40%;
}
table.introlayout
{
width:100%;
height:100%;
}
td.introtitle
{
width:100%;
height:10%;
}
td.skillpics
{
vertical-align:bottom;
width:100%;
height:70%;
}
td.skilltext
{
vertical-align:top;
width:100%;
height:10%;
}
td.menu
{
text-align:center;
width:100%;
height:10%;
}
I have a website im developing and I wanted to know how i would go about having a graphic element that floats on top of everything but if it goes outside the bounds of the window it wont introduce scroll bars. Reason: I have an image that i want to make quite long but its not important for the viewer to see the end of the image. I guess its a bit like a background image but on the top Thanks I really need a code. It is for a Multiple Fixed Floating Images at specific margins Fixed is very important. AKA. Scrolls with page. margins are img1 - left: 40px top: 40px img2 - left 56px top: 300px; Thank You Very Much. -Please Help! --nick11682 Learning CSS and trying to emulate the following table: Code: |--------------------------------------| | Text 1 |----------------| | | Text 2 | Inner box text| | | Text 3 |----------------| | |--------------------------------------| I can get a nested div to work vertically but not horizontally. I'm trying: Code:
div#container { float: left }
div#title { float: right }
<div id="container">
hello<br>hello
<div id="title">
Text 1<br />
Text 2
</div>
</div>
Which is producing: Code: |--------------------------------------| | Hello | | Hello | | |----------------| | | | Text 1 | | | | Text 2 | | | |----------------| | |--------------------------------------| Perhaps a positioning thing which I don't understand yet? It's not homework so you don't have to do it for me, but rather you could just point to knowledge sources.... Tx! hi, i am a total newbie with css and trying to create a floating divider. an example can be seen at www.payjunction.com. does anyone know a tutorial on how to create one? thanks for the help in advance Hi Everyone, I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on... I think it's a question of Floating. This is in reference to http://www.arabellamusic.co.uk I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking: Code: HTML
<div class='inner'>
<div class='left'>
BLOG PHP HERE
</div>
<div class='right'>
SOME OTHER STUFF HERE
</div>
</div>
And the CSS:
.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }
If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...) So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't. Incidentally, once it would only work when I set 49% to each, I was assuming this was something to do with the box model I read about, but wasn't too sure. I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff! Thanks in advance... James I currently have the following layout Code:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
how do i go about making the same layout but using CSS. Each <td> is 50% wide I have 3 tables in a div. I have two of the tables one on top of the other. I wanted to place the third table to the left of the bottom table. So I placed the second table relative and left -50px. I placed the third with position absolute, top -70px and float right to achieve this layout. Is there a better way of doing this out of curiousity? Hi, Can someone help me with why the following header bar doesn't work in Firefox? It just shows the very top of the bar with the two other divs inside of it. Code:
<div class="cmsHeader">
<div style="float: left;">Page Name</div>
<div style="float: right;"><a href="" title='Add Page'><img src='images/icons/file_(add)_16x16.gif' border='0' alt='Add Page'></a></div>
</div>
.cmsHeader{
background: #809096;
padding: 5px;
width: 98%;
color: #FFFFFF;
}
.cmsHeader a{
color: #FFFFFF;
text-decoration: none;
}
.cmsHeader a:hover{
text-decoration: underline;
}
I need to center a div which contains two columns. Its important that the div encapsulates the content within. This is what I've done so far: CSS: Code: * {
margin: 0;
padding: 0;
}
#container {
float: left;
width: 960px;
border: 1px solid #000000;
}
.left {
float: left;
width: 650px;
}
.right {
float: left;
width: 250px;
}
HTML: Code: <div id="container"> <div class="left"> left content goes here </div> <div class="right"> right content goes here </div> </div> Question: Is it possible to center #container to the middle of the page? Using margin: 0 auto; doesnt work with floating divs. Its very important that #container has a border around .left and .right. Any help will be appreciated The image below is how I want my website to look (div-wise, that is). It looks like this on all platforms and on all browsers except IE 5.0 and 6.0: IE 5.0 and 6.0 render the following: I have included my html + css code below. I have tried to make #sidenav float:left instead of float:right. This makes no difference for browsers but IE 5.0 and 6.0, which then again render the page wrong. Also decreasing the width of #sidenav (i.e. to 20px) doesn't help; the result is the same. Could somebody please help me fixing this There must be at least one css guru out there today All help is greatly appreciated! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#main {
background-color: red;
text-align: center;
}
#wrapper {
text-align: left;
margin: 0 auto;
width: 300px;
}
#content {
background: yellow;
width: 200px;
float: left;
margin-left:50px;
}
#logo {
background-color: lime;
}
#mainnav {
background-color: pink;
}
#subnav {
background-color: navy;
}
#text {
background-color: orange;
}
#sidenav {
background-color: blue;
width: 50px;
float: right;
padding-top: 50px;
}
#footery {
clear:both;
background-color: #fff;
}
#footer {
background-color: pink;
margin: 0 auto;
width: 200px;
}
#logo, #mainnav, #subnav, #footer {
min-height: 30px;
}
</style>
</head>
<body>
<div id="main">
<div id="wrapper">
<div id="content">
<div id="logo"><br><br></div>
<div id="mainnav"><br><br></div>
<div id="subnav"><br><br></div>
<div id="text"><br><br><br></div>
</div>
<div id="sidenav">text</div>
</div>
<div id="footery">
<div id="footer"><br><br></div>
</div>
</div>
</body>
</html>
I use form field hints on my sign up page. I am trying to float it to right with the codes below but its not happening. .hint { float:right; display: none; position:absolute; width: 150px; border: 1px solid #aaaaaa; background: #d7d7d7; } www.pearl.ru/isdunyasi/signup.asp Ok. So after some one i don't know on a website i was reading told me i should replace my tables with CSS i decided to listen to them. Now the website's top bar should look like this: http://www.leeksoftware.co.uk And i decided to do each box as a DIV. BUT! I can't get them all in a line. I can get the yellow one to the right of the long one but then i cant get the rest in the line. So far the CSS is: Code:
div.logo
{
height: 70px;
width: 618px;
background-color: #476cD9;
float: left;
}
div.home
{
height: 70px;
width: 100px;
background-color: #E29942;
margin-left: 619px;
float: left;
}
div.soft
{
height: 70px;
width: 100px;
background-color: #CC3333;
margin-left: 719px;
}
div.tuto
{
height: 70px;
width: 100px;
background-color: #006666;
margin-left: 819px;
}
div.cont
{
height: 70px;
width: 100px;
background-color: #254D78;
margin-left: 919px;
}
I tired adding float left to all of them but that made them go diagonal. Can any one help? Thanks Matt |
|||||||