0

Hello,

This is the css:

ul
{
float: left; 			/*Het plaatje van de persoon*/
position: fixed;
margin-left: 20px;
margin-top: 2px;
}

li
{
float: top;
postion: fixed;
margin left: 20px;
margin-top: 5px;
list-style: none;
}

p
{
margin left: 5px;
}

body
{
background-color: #66FF66;
}

And the HTML:

<html>
<head>
<title>Ding</title>
<link rel="stylesheet" type="text/css" href="http://opacity.atspace.com/style2.css">
</head>
<body>

<li>
<img src="http://www.carmelemmen.nl/img/logoCarmelEmmen.gif" width="200" heigth="150" >
<img src="http://www.dogbreedinfo.com/images17/NorthernInuitDogFreya14wks.JPG" width="200" heigth="150" >
<img src="http://www.shoarns.com/Unknown%20bird%20-%20Cincinnatti%20Zoo%20-%20D%20Byrd.jpg" width="200" 

heigth="150" >
</li>

<ul>
<img src="http://www.zefhemel.com/upload/2008/02/funny-cat.jpg" width="200" heigth="150">
</ul>
<p>
Text
Text
</p>
</body>
</html>

The <u>l items are supposed to float left, and the <li> items are supposed to float to the top, with text in the middle.

In Internet Explorer, this way I can achieve this result, in Firefox I can't. Even though in the CSS file I put the

float: left;

in the ul, the text will be on the left, and not the image.

What would be the way to fix this?

If you have another suggestion to make some images float left and the others up, it is very welcome.

Thank you.

4
Contributors
7
Replies
8
Views
8 Years
Discussion Span
Last Post by Pim
0

The normal way to control where things are on the page is to control the order the items are listed in the html file. Objects are placed from top to bottom, and within a line, from left to right.

Do NOT think of a web page as a sheet of paper that you place things on in various places. Think of it as a scroll that grows longer downward as you add more content.

0

Okay well I modified the design. I've got a new problem with the float property now: I want to make an image float to the left, with a box with text in in on the right. In IE this works fine, Firefox however insists on placing the banaan.jpg over the box. Is this fixable?

CSS:

div.box /* Zorgt voor het textvak in het midden. Zoek naar div bij w3schools. */
{
color: green;
margin: 5px;
border: 1px solid black;
width: 400px;
height: 510px; 
float: none;
}

body
{
background-color: #FFFFFF;
}

img.onder
{
margin: 5px,5px,5px,5px;
float: left;
}


p.text
{
margin: 5px;
}

The HTML code:

<html>
<head>
<title>Ding</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>

<img class="onder" src="banaan.jpg">

<div class="box">
<p class="text">
Hier komt de tekst.
</p>
</div>


</body>
</html>

Thank you.

0

The text shouldn't be on the right of the page, it should be on the right of the image.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.