Css page, left corner disappears

HTML & CSS
1

Hi everyone,
Here is the main html code i created:


<!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>August70</title>
  <link href="page1/august1.css" media="all" rel="stylesheet" />
</head> 
<body> 
  <div id="upper_left"></div>
  <div id="upper_middle"></div>
  <div id="upper_right"></div>
</body>
</html>

This is the: “page1/august1.css” I wrote:


body 
 {
  text-align:center;
  font: 1em Lucida, Arial, sans-serif;
 }
* {margin:0;padding:0;}
div#upper_left 
 { 
  background-image:url(upper_left.gif);
  background-repeat:no-repeat;
  float:left;
  width:10px;
  height:10px;
  border: 3px solid #F00;
 }
div#upper_middle 
 {
  background-color:#bb9c63;
  /*float:left;*/
  width:120px;
  height:10px;
  border:3px solid blue;
 }
div#upper_right 
 {
  background-image:url(upper_right.gif);
  background-repeat:no-repeat;
  width:150px;
  height:10px;
  border:3px solid magenta;
 }

At the page the browser loads (attached under the name “august1.gif”) the right corner graphic is located beneath the “left corner” graphic as seen at “august1.gif” attached.
I’d like the right corner to be located at the right side of the line so i remove the remark symbols from “div#upper_middle”. This time when i load the page the right corner is no more located beneath the “left_corner” graphic but it isn’t located at its right dise either, it disappears as seen at the attached screen shot (“august2.dif”).
Can anyone explain me please why did the right corner disappear ?
I would also like to ask another question: How do i locate that rounded corners line at the center of my page?
Thanks

2

Hi, because your attachments are pending approval i tried your code out locally (using placeholders instead of your gifs). If i understand you correct, you removed the comment from float:left in div#upper_middle?
At my end that works locally. Have you checked if you removed a bit to much, e.g. the semi colon in the float declaration? As to the rounded corners: could you post a link or the full css and html code of the page?

3

Hi Luki_be,
The code and graphics are at my local platform, can i attach it to an email address?
I removed the the comment correctly and the proof is that the second page looks different then the first. OH, IT IS THE RIGHT CORNER THAT DISAPPEARS ! NOT THE LEFT ! SORRY !
Thanks

4

if you don’t have a life link to post, just post the full code here.

Edit:

Try floating div#upper_right also. I’m shooting blank at the moment because i’m without images lol

5

I inserted the whole code at my first post. The only thing missing is the graphics. How do i deliver the two 10X10 pixels corners graphics ?
Thanks

6

Hi, take a look if this is what you want.

7

Hi, make sure there is enough width there (and if this doesn’t work we will need a site), and then float every one of them, I notice you had one commented out, but float all 3 :slight_smile:

8

Hi Ryan, in my example all are floated and the images i used show up, so the OP should be set to go :smiley:

9

Hi Luki, I think I clicked on a wrong link in a diffferent thread and for some reason I thought it was the link you posted. I didn’t go to bed last night so sorry about that lol :).

10

no worries Ryan, happens all the time to me: to tired, to quick, to dumb (the latter in my case that is lol)

11

Hi Luki_be,
Thanks for your efforts.
I copied yoy code and only changed the graphic’s address to display my round corners images. Again i recieved a left corner round image and an empty right corner.
I thought, maybe something is wrong with my grapfics so i assigned the “unseen” right corner at the left side of the horizontal line and the left round corner i assigned at the right side.
This time the right corner was displayed at the left side and the left corner image became “unseen” as in the image i attach.
Thanks.

12

Have you matched the height and width of the right hand side graphic?

13

Hi Luki bi
And thanks for your help.
I rewrote the code again and this time my rounded corners line appears as seen at the screen shot p1.gif. But i’m facing a new obstacle: When i diminish the browser’s window size, the above line separates itself from the image as seen in p2.gif attached. This is my code:


<style type="text/css" media="all">
  div#wrapper {width:auto; height:auto; margin-left:0;}
  div#upper_left
   { 
    background-image:url(page1/upper_left.gif); 
	margin-left:100px;
	width:10px; 
	height:10px; 
	float:left;
   }
  div#upper_right
   { 
    background-image:url(page1/upper_right.gif); 
	width:10px; 
	height:10px; 
	float:left;
   }
  div#upper_line
   { 
    background-color:#bb9c63;
	width:780px; 
	height:10px; 
	float:left;
   }
  div#break {clear:both;}
  div#picture 
   { 
    background-image:url(page1/p1.jpg);
    background-repeat:no-repeat;
	margin-left:100px;
	width:850px;
	height:600px;
	float:left;
   }
</style>
</head>

<body>
  <div id="wrapper">
    <div id="upper_left"></div>
    <div id="upper_line"></div>
    <div id="upper_right"></div>
    <div id="break"></div>
    <div id="picture"></div>
  </div>
</body>
</html>

Can you help now ?
Thanks

14

Hi,

If you don’t want the floats to wrap then you need to place the floats and the line div in a wrapper of correct width.

e.g. For a centred container then something like this.


div#wrapper {
    width:800px;
    margin:auto;
    overflow:hidden;
}
div#upper_left {
    background-image:url(page1/upper_left.gif);
    width:10px;
    height:10px;
    float:left;
overflow:hidden;
}
div#upper_right {
    background-image:url(page1/upper_right.gif);
    width:10px;
    height:10px;
    float:left;
    overflow:hidden;
}
div#upper_line {
    background-color:#bb9c63;
    width:780px;
    height:10px;
    float:left;
overflow:hidden
}




<div id="wrapper">
    <div id="upper_left"></div>
    <div id="upper_line"></div>
    <div id="upper_right"></div>
</div>
15

Your attachments are pending approval but if i understand it, you’re having a floatdrop: the #upperline drops underneath #upperleft and the #upperright drops underneath the #upperline.

That’s some typical float behavior: if there’s not enough space (eventually that is what happens when you narrow the viewport) to live next to each other, the floats drop to the next line. So we need to create enough space when narrowing the viewport: setting a min-width on the wrapper will take care of it. Setting a min-width of 1000px stops the drop at my end. I don’t know why you’re using the default values for width and height on the wrapper but in this stage you can dump those. Also set overflow:hidden on the wrapper to contain your floats.

About the min-width: IE6 doesn’t do that so you need to use an expression for ie6 or additional markup to simulate IE6.

One more caution for IE6: to avoid the double margin bug, you’ll best add display:inline to #upperleft and #picture.

Edit:

I see Paul already answered. Probably his answer makes more sense lol

16

Hi Paul O’b
Your code perfectly solved my problems and i thank you for that.

17

Thanks a lot Luki_be for your efforts,
Finally i managed to solve that problem thanks to you and Paul O’b and i’m very grateful to you.

18

Glad it worked for you :slight_smile: