Member Avatar for Pim

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
  • 183 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Pim
Member Avatar for almostbob

There is no float :top; property
float takes left right none

Member Avatar for MidiMagic

The li tag is not allowed to be alone. It must be directly inside a ul or ol pair.

Member Avatar for almostbob

Its also very bad form, to get your images from someone elses servers.

Member Avatar for MidiMagic

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.

Member Avatar for Pim

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.

Member Avatar for ccube921

I don't see any elements with a float: right; in your stylesheet.

Member Avatar for Pim

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.