CSS - Float Right To A Certain Point

Ok I fully understand the benefit of using css for text (easy site wide font changes etc) but is there really any point in using css for layouts?

I understand that traditional table based layouts are a nest of cells which creates problems for text readers and large pages which we try to reduce by slicing images up, setting background colurs in html etc

BUT

When using css for layouts we tend to use much larger graphics - typically the header is a single graphic rather than several slices.

Through a bit of testing I have deduced that creating a page with tables with the same reduced level of slicing as for a css layout (ie just header, sidebar, content and footer), results in a comparable total page size and has no nested tables to confuse screen readers.

The real clincher for me is that using a simple table layout rather than css for layout results in a page which displays exactly as I want it across browsers and so I don't spend days testing and moving things backwards and forwards to get a compromise layout.

I realise this is heresy to suggest that tables migh be better and I await the more experienced here putting me right.

is it possible to change the bullet point color only of a list?

Is there a way to stop using a CSS after a certain point in your code?

I am trying to do this as I have a CSS for my site which I am including vBulletin into which has its own CSS file, which messes up the formatting from my CSS file and vice versa.

I've done a lot of reading to recently learn css, but this one stumps me:

I have put the one background image in the center of the page so that it looks better than being crammed in the upper left, and to keep a nice layout regardless of screen resolution. so now i want to add a text element that fits into the right place relative to the background, not the page.

can i set a point (such as top-center) that all margins will be based on, besides the top and left of the browser page?

the non css version of the page (with lots of tables) is at www.stipepainting.com. looking at that might clarify my question a bit.

thx in advance

Hi,

I have a drop down menu using <UL> and <LI>. Is there a way i can reduce the left indent from where the bullet point would normally be?

Many thanks

Not sure where to put this because it involves php, dhtml, css and layers?

But anyway I'll give it a shot here. I have a problem that I can't seem to tackle.

Basically what I need is:
I need to set a number of layers on an absolute position from a relative point, the topleft corner of an image of a map (that has no fixed position from the top of the page because the amount of content from the top before the image of the map can change because it is a dynamically generated page).

I have: An image of a map and in a mysql table a number of sets of xy coordinates (in pixels) from the top-left corner on that image to some points on the map. (Unfortunately I can't show you the pages, but I'll try to be as clear as posssible)

Trying to accomplish: A map somewhere on a page and query from a database a set of x-y-coordinates of different points, that correspond to top left corner of that map. On the exact x-y coordinates I want to display a small image of a crosshair, so that a number of points are indicated on the map with crosshairs. The points on the map (read: sets of x-y coordinates) can differ.

Solution (I thought): Use layers using the <div> tag. So I use a layer to specify the location of the map. Then I query the table for all the x-y coordinates of the poins on the map and create a layer for every set of x-y coordinates. Here's the code ($cat and $de are taken from an URL):
PHP Code:
//get xy coordinates of primary position
$locbase = mysql_query("SELECT lb_xcoord, lb_ycoord FROM locbases WHERE lb_cat_id = $cat AND lb_ad_id = $de ");
$locbasered = mysql_fetch_array($locbase);
$xred = $locbasered["lb_xcoord"];
$yred = $locbasered["lb_ycoord"];
//get xy coordinates of other positions on the same map
$locotherbases = mysql_query("SELECT lb_xcoord, lb_ycoord FROM nuke_zc_locbases WHERE lb_cat_id = $cat AND lb_ad_id <> $de ");
 
//position the map at coordinates 0-0
echo "<div id=\"Layer1\" style=\"position:relative; left:0; top:0; z-index:0;\"><IMG SRC=\"$img\" border=\"0\"></div>";
 
//position the primary position on the map in a layer on top of the map layer
echo "<div id=\"Layer2\" style=\"position:relative; left:$xred; top:$yred; z-index:1;\"><IMG SRC=\"http://192.168.1.11/sites/test/crosshair.gif\" border=\"0\"></div>";
 
//create a loop and for each loop create a layer with based on the set of x-y coordinates and display a crosshair image in that layer
$k = 3 ;
while( $locothers = mysql_fetch_array( $locotherbases ) ) {
$xgrey = $locothers["lb_xcoord"];
$ygrey = $locothers["lb_ycoord"];
echo "<div id=\"Layer$k\" style=\"position:relative; left:$xgrey; top:$ygrey; z-index:$k\"><IMG SRC=\"http://192.168.1.11/sites/test/crosshair.gif\" border=\"0\" ></div>"; 
$k++ ;
} 




Problem 1: This all works (except for problem 2, described later) when the position statements in the tag are set to absolute. Then it will display correctly in the left hand corner and all crosshairs are positioned correctly. The thing is that I want it embedded in another page, so that it is displayed below some content that is also dynamically generated (so I can't set position to absolute, because I don't know where the content before the map stops) So I have to set it to relative and then all the divs are displayed relative to the previous tag. Since the tags are dynamically generated through a while loop, the crosshairs will all move down a blank line.

Problem 2: The layers do not stack exactly as planned, first because the images of the crosshairs are displayed under the map (but the z-index builds up correctly doesn't it?) he weird thing is that when I put the <div> tag of the map image after the looped and primary crosshair div-tags, then the crosshairs are all displayed on top of the map. To my knowledge the z-index should work regardless of where the code is , no?)

Anyone any idea how to do this?
(or would I have to display the map and crosshairs in an <iframe>within the dynamically generated page)


Thanks for any feedback!
Cheers,
Gurt

I almost feel guilty about posting this question, as it has probably been answered in some form before and i just need to figure it out myself, but this is giving me some difficulty. My page displays just how I want it right now to display in Firefox. However, in IE6, it does not display correctly. The XHTML and CSS are both validated and it works perfectly in the more "standard-compliant" browser. But I'm sure there is a way to get this to work in IE as well.

the site is fusiondesign.awardspace.com (new user policy will not let me use links )

the relevant XHTML:
Code:

<div id="container">

<div id="nav">
<a href="#" onclick="changeTab('Home','hcontent');" id="Home">Home</a>
<a href="#" onclick="changeTab('About','acontent');" id="About">About</a>
<a href="#" onclick="changeTab('Services','scontent');" id="Services">Services</a>
<a href="#" onclick="changeTab('Order','ocontent');" id="Order">Order</a>
<a href="#" onclick="changeTab('Contact','ccontent');" id="Contact">Contact</a>
<a href="#" onclick="changeTab('Links','lcontent');" id="Links">Links</a>
</div>

<div id="content">
<noscript>
I noticed you have Javascript disabled. This site will not work correctly unless you have Javascript enabled. Please enable Javascript now.
</noscript>
</div>

...

</div>

and the relevant CSS:
Code:

div#container {
	position:absolute;
	left:50%;
	top:50%;
	width:760px;
	height:332px;
	margin-left:-380px;
	margin-top:-186px;
	border:#FFFFFF 1px solid;
	}
	
div#nav {
	float:left;
	width:170px;
	padding:0;
	}
div#content {
	text-align:justify;
	width:558px;
	padding:1em;
	color:#000000;
	height:300px;
	overflow:auto;
	/*border:#FFFFFF 1px solid;*/
	}

Any direct help or a link to a solution would be greatly appreciated

Hi, this bug is driving me nuts. I don't know why it happens. All I know is that it is not even consistent.

Here's a screenshot of the problem: http://www.argsoccertours.com/float-problem.jpg



And here's the code for that part:

Code:

<p>The bus will take you to your hotel, where you can leave your luggage and take a shower.</p>
  <p>This day we suggest the Buenos Aires City Tour. Discover one of the most amazing cities in the world. Buenos Aires is a thoroughly modern city with more than 400 years of history. Visit Florida street, one of the most surprising pedestrian streets in South America. You don't want to miss Palermo Soho, the trendiest neighborhood in Argentina, where you will find tourists from all over the Globe;<img src="images/caption10.jpg" alt="Caminito" width="300" height="300" class="floatright" /> visit Puerto Madero, the preferred area for luxury offices and restaurants; and also check out San Isidro, the most exclusive neighborhood in Buenos Aires.</p>
  <p>You will also get to see Argentina's historic buildings, the <em>Casa Rosada</em> (which means "Pink House" and is the President's office), the <em>Obelisco</em> (a huge tower with a lot of history), and some of the oldest, yet best mantained museums and theaters in the world.</p>
  <p>Finish the day with a short visit to Recoleta, the neighborhood of choice for expats in Buenos Aires to have a good time and eat at the best restaurants.</p>
  <h2>Thursday, March 4 - <span class="redsubtitle">Practice + Palermo Soho + Recoleta</span></h2>
  <p>Your team will have a practice in the morning. A complimentary transfer will be available for you and your Tour Manager will help you with any arrangements that you need.<img src="images/caption11.jpg" alt="Rugby practice" class="floatright" /></p>
  <p>In the afternoon you can have <em>Tapas</em> -a Spanish typical dish- in Palermo Soho, a place that is so cool you will never forget it.</p>

The CSS for floatright is:

Code:

.floatright {
	float: right;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}

As you can see in the code, in both cases I insert the image the same way, but the first one looks OK and the second one doesn't. This happens on IE7 (not sure about other versions of IE), but for sure it doesn't happen on FF.

Anybody has any clue on what could cause this?

Hey all, I'm wanting to create something like this:

HEADER TITLE ___________________ TEXT HERE + -
_______________________________ TEX HERE + -
_______________________________ TEX HERE + -

Ignore the underscores.
Now I'm trying this code:

Code:

<div>
 <h2 style="display:inline;">HEADER TITLE</h2>
 <div style="float:right; padding:0; margin:0;">
 TEXT HERE + - <br /> etc..
 </div> 
</div>

But no matter what I try the 'TEXT HERE' does not appear on the same inline and the floated div appears one line down like so:

HEADER TITLE
_______________________________ TEXT HERE + -
_______________________________ TEXT HERE + -
_______________________________ TEXT HERE + -

Any suggestions on how to correct this?
Thanks

arg arg arg and you all know the rest.

anyway to the problem in firefox the layout is all good but in IE things are realy starting to annoy me.

http://217.68.23.6/~themodem.co.uk/index.php

i think its my float stuff but im not sure, could someone please take a look at it for me

heres my css
Code:

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:#000000;
}

#leftcontent {
	float:left;
	width: 236px;
}

#mainmenu {
	width: 170px;
}

#stats {
	margin-top:inherit;
	width: 205px;
	background-color:#000000;
}

#centercontent {
	voice-family: "\"}\"";
	voice-family: inherit;
	margin-left: 245px;
	background-image:url(images/wow/bg.gif);
	background-repeat:repeat;
}

#rightcontent {
	float:right;
	margin-right:5px;
	width: 236px;
	margin-top:20px;
}

#login {
	margin-top:inherit;
	width: 205px;
	background-color:#000000;
}

#submenu {
	width: 200px;
}
	
#banner {
	voice-family: "\"}\"";
	voice-family: inherit;
}

thanks Lee

Basically, following link:
www.projectfinalfantasy.com

Works fine in FF but IE, it piles the divs under eachother, whether the float tag is applied or not.

Any help would be greatly appreciated.

Cheers,
Joe.

Thanks for taking the time to read my question.

If I use float: none; in my css the result in IE is perfect. However in Firefox it doesn't work.

Is there a workaround for this?

see "Past Pierced Shows" bottom left corner of page

in IE the images and text line up, in Firefox, they are one under another.

www.pierced.ca/pierced-events.htm

Thanks for the help,

Brad

I always have trouble with floats. I'm just trying to get these two bulleted lists to display next to each other so that the page is shorter.

It isn't exactly working. Close but not quite. Changing the left margin hasn't helped (even bumped it to 55, but it had no effect.)

<span style="float:left;"><h4>New Listings</h4>
<p>Be prepared with:</p>
<ul>
<li>Sales Price</li>
<li>Property particulars</li>
<li>Company</li>
<li>Address</li>
<li>Your name</li>
<li>Phone number</li>
</ul></span>

<span style="margin-left: 15em;"><h4>Price and Property Changes</h4>
<p>Please state:</p>
<ul>
<li>Price change or any changes</li>
<li>Address</li>
<li>Company</li>
<li>Name</li>
<li>Phone number</li>
</ul></span>

<span style="float:clear;"><h4>Buyer Wants</h4><span>
<p>Describe your buyer's wants and needs. You will have 30 seconds to present your buyer wants.</p>

My home page at mypricesavings.com

I would like to have the twitter banner under the headline to be in its own div. if you look at my style.css I have this code

Code:

#twitter {
	width:590px;
        float:left;        
        background:#fff;
	padding:10px;
	font-size:1.05em;
	line-height:1.5em;
	margin: 10px 0;
	}

Which in fact does what I need it to do when I then add the div to the index.php

however, the store deals and matchups which is the featured div no longer floats to the right of the headline, it will drop all the way down and float next to the twitter.

I do not understand how CSS exactly works and would like to know how to make the twitter be the way I would like it and have the featured work corectly too.

thank you in advance for helping

Derrick

I am trying to put a float to the right side of a layer and then have it go over the right side of the layer. But when I do this the part that is moved over is not visible in IE.
I have included an example to make it easier to explain. The green layer should be partially outside the blue layer by 100px.
I would appreciate any help getting this done.

Thanks
Code:

<style type="text/css">


.main
{
position: relative;
top: 100px;
width: 700px;
background-color: #5577cc;
height: 500px;
}

.floatright{
margin-right: -100px;
float: right;
width: 300px;
height: 300px;
background-color:#339900;
}
</style>

</head>

<body>

<div class = "main">
Main
<div class = "floatright">
Float
</div>
</div>
</body>