Wrapping Issue

[e1seix]

Having a complete 'mare with an Id vs. Class issue here.

 

#right {
background-color: #FFFFFF;
margin: 0px auto;
margin-left: 5px;
overflow: hidden;
width: 300px; }

#right .a1 {
background: url(imgs/white/tl.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

#right .a2, #right .c2 {
float: left;
height: 5px;
width: 290px; }

#right .a3 {
background: url(imgs/white/tr.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

#right .b2 {
margin-left: 5px;
overflow: hidden;
width: 290px; }

#right .c1 {
background: url(imgs/white/bl.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

#right .c3 {
background: url(imgs/white/br.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

 

...in the context of...

 

      <div class="left" id="right">

        <div><img class="a1" src="imgs/default.gif" /></div>
        <div><img class="a2" src="imgs/default.gif" /></div>
        <div><img class="a3" src="imgs/default.gif" /></div>
        <div class="b2">Hello</div>
        <div><img class="c1" src="imgs/default.gif" /></div>
        <div><img class="c2" src="imgs/default.gif" /></div>
        <div><img class="c3" src="imgs/default.gif" /></div>

      </div>

 

...works beautifully and the word "Hello" is surrounded by wonderfully curved edges. However, the minute I switch it around to a class instead of id, it's almost as if the whole css encoding falls apart - even the float element.

 

Have wondered if it's a display: block issue, but it isn't.

 

Any help at all. I know it's probably something so simple, but I can't seem to nail it.

[cssfreakie]

Hi mate,

 

I love to help, but i don't get a clear idea of what you mean with the word "it"

 

However, the minute I switch it around to a class instead of id, it's almost as if the whole css encoding falls apart - even the float element.

 

It probbaly is a simple thing, but the way you formulated your question makes it a visionary task. Could you maybe be more precise which element we are talking about which ID to which class etc. a live site or drawing also would be great.

 

also i am extremely curious what this design looks like i seldom see 6 divs that are needed for a fancy looking "hello world"

[e1seix]

Lol. Of course. The theory behind my code is that I have rounded edges surrounding the text "hello".

 

Thus, I have constructed the code like a grid of 9 elements, the top row with the top left curve (a1), the spacing (a2) and the top right curve (a3). The second row has one tag alone (b2) that is centred and contains the word, while the third row repeats the first row again to close with curved edges (c1, c2, c3).

 

Using the CSS code with an "id" called "right" allows the code the form the cube shape, however due to needing the repeat the code more than once, when I switch the code to have a "class" called "right" and change the CSS code to reflect that, it all falls apart.

 

It looks like an issue with the spacing tags a2 and c2. They don't appear to respect their allocated width values, so despite the float: left attribute, a1, a2 and a3 suddenly display in vertical ROWS one underneath another as opposed to COLUMNS neatly side by side.

 

Hope that explains it better. Any help would be greatly appreciated.

[cssfreakie]

can you send me the files otherwise, because looking just at raw code is not going to help me solve this, had two cups of coffee, but a third wont, help me here.

 

ah never mind i'll figure it out,  be right back.

 

 

-edit: have you got a printscreen or image of this thing I am pretty sure this can be done a lot cleaner than your doing it now, and i rather provide efficient code than this

[cssfreakie]

hehe i am not sure if this is your fix, but

 

if you did this you did it wrong:

<div class="left" class="right">

if you did this:

<div class="left right">

you did it right was it that??

 

the css could have looked like this.

.right {
background-color: #FFFFFF;
margin: 0px auto;
margin-left: 5px;
overflow: hidden;
width: 300px; }

.right .a1 {
background: url(imgs/white/tl.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

.right .a2, #right .c2 {
float: left;
height: 5px;
width: 290px; }

.right .a3 {
background: url(imgs/white/tr.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

.right .b2 {
margin-left: 5px;
overflow: hidden;
width: 290px; }

.right .c1 {
background: url(imgs/white/bl.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

.right .c3 {
background: url(imgs/white/br.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

 

But for the sake of readability, why on earth name it class or id right if it's for making rounded corners name it rounded or something

and don't name the classes a123 but rather top-left top-mid top-right  or tl tm tr

If you would have worked in a team, they would thanked you for doing that

now you have something named class left right?? lols i assume you get my drift

[e1seix]

Yep, have attached. Thanks again. I have had too many cups of coffee. Ignore the class="left". That's simply a general class I have for float: left. Should have edited it out of original code.

 

[attachment deleted by admin]

[cssfreakie]

ok but a class of right to give rounded corners still is madness if you'd ask me. Anyways,

 

I just ran the code you gave above and changed it as i provided above to and i really don't see what you mean with breaks apart, it works.

SOrry to ask this again but please be so exact as possible or host this. I know it might be frustrating, but i really don't see what is breaking, it works here perfectly. nice you suplied an image, but in most newspapers or anything that is informative they say what is going on in the image. sorry but i have a hard time understanding your problem. happy to help though.

 

If i were to post a question i would do this.

hello all i have this code:

<div id="right">.......</div>  which works great, but when i do this

 

<div class="right">.......</div>  it doesn't work. this this and this happens, but i expect this this and this...

 

Now is that your case?

 

edit: is it maybe your white background that you want to spread all over the box?

[e1seix]

Hope this will make more sense, and thank you so much for being patient with me and trying to help me so much.

 

All of the attached are contained within one folder. The problematic CSS code is contained within main.css.

 

Although I used the class named "right" in the example above, in the actual site and in the css code, it is called "content-column".

 

I need to repeat the "content-row" and "content-column" hence the need for class as opposed to id, which I've been able to use elsewhere.

 

Many thanks.

 

[attachment deleted by admin]

[cssfreakie]

ok, i'll have a look if i can make chocolate out of this.

But seriously any question on any forum, Say what you have, what you did (in code) and what you expect. We are no psychics

[cssfreakie]

Well first of all you have a minor error in  your mark up

all images are missing the attribute  alt=" " 

and a big one in you css

in your css files (which for some reason are named .txt) 

you have

*/CLASSES */ 

 

if that is a comment it should be

/* CLASSES */

 

Anyways I think I already gave the solution but you might not have seen it.  <div class="left right">

If i changed from ID to class and changed it the right way i get the same result. That was what you wanted right. Same result while moving to class??

 

If that is the case here is your new code

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<!-- HEAD -->
<head>

  <!-- LINK -->
  <link rel="stylesheet" type="text/css" href="default.css" />
  <link rel="stylesheet" type="text/css" href="main.css" />

  <!-- META -->
  <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />

  <!-- TITLE -->
  <title>My WebPage!</title>

</head>

<!-- BODY -->
<body>

  <!-- PAGE -->
  <div id="page">

    <div><img class="a1" src="imgs/default.gif" /></div>
    <div><img class="a2" src="imgs/default.gif" /></div>
    <div><img class="a3" src="imgs/default.gif" /></div>
    <div class="b2">

      <!-- MAIN -->
      <div class="left" id="main">

        <div><img class="a1" src="imgs/default.gif" /></div>
        <div><img class="a2" src="imgs/default.gif" /></div>
        <div><img class="a3" src="imgs/default.gif" /></div>
        <div class="b2">

          <p><span class="underline-link"><a href="/">Home</a></span></p>

          <!-- CONTENT -->
          <div id="content">

            <div><img class="a1" src="imgs/default.gif" /></div>
            <div><img class="a2" src="imgs/default.gif" /></div>
            <div><img class="a3" src="imgs/default.gif" /></div>
            <div class="b2">

              <!-- CONTENT ROW -->
              <div class="content-row">

                <!-- CONTENT COLUMN -->
                <div class="content-column">

                  <div><img class="a1" src="imgs/default.gif" /></div>
                  <div><img class="a2" src="imgs/default.gif" /></div>
                  <div><img class="a3" src="imgs/default.gif" /></div>
                  <div class="b2"><p>Hello</p></div>
                  <div><img class="c1" src="imgs/default.gif" /></div>
                  <div><img class="c2" src="imgs/default.gif" /></div>
                  <div><img class="c3" src="imgs/default.gif" /></div>

                </div>

              </div>

            </div>
            <div><img class="c1" src="imgs/default.gif" /></div>
            <div><img class="c2" src="imgs/default.gif" /></div>
            <div><img class="c3" src="imgs/default.gif" /></div>

          </div>

        </div>
        <div><img class="c1" src="imgs/default.gif" /></div>
        <div><img class="c2" src="imgs/default.gif" /></div>
        <div><img class="c3" src="imgs/default.gif" /></div>

      </div>

      <!-- RIGHT -->
      <div class="left right">

        <div><img class="a1" src="imgs/default.gif" /></div>
        <div><img class="a2" src="imgs/default.gif" /></div>
        <div><img class="a3" src="imgs/default.gif" /></div>
        <div class="b2">Hello</div>
        <div><img class="c1" src="imgs/default.gif" /></div>
        <div><img class="c2" src="imgs/default.gif" /></div>
        <div><img class="c3" src="imgs/default.gif" /></div>

      </div>

    </div>
    <div><img class="c1" src="imgs/default.gif" /></div>
    <div><img class="c2" src="imgs/default.gif" /></div>
    <div><img class="c3" src="imgs/default.gif" /></div>

  </div>

</body>

</html>

 

CSS

/* TAGS */

a img {
border: 0px; }

body {
background-color: #000000;
background: url(imgs/bg.jpg) repeat;
background-repeat: repeat;
color: #000000;
font-family: Arial, Verdana, Geneva, sans-serif;
margin-bottom: 0px;
margin-top: 0px; }

h1 {
font-size: 20px;
margin: 5px; }

h2 {
font-size: 16px;
margin: 5px; }

p {
font-size: 12px;
line-height: 15px;
margin: 5px;
text-align: left; }

/* IDS */

#page {
background-color: #0F0F0F;
margin: 0px auto;
overflow: hidden;
width: 915px; }

#page .a1 {
background: url(imgs/gray6/tl.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

#page .a2, #page .c2 {
float: left;
height: 5px;
width: 905px; }

#page .a3 {
background: url(imgs/gray6/tr.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

#page .b2 {
margin-left: 5px;
overflow: hidden;
width: 905px; }

#page .c1 {
background: url(imgs/gray6/bl.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

#page .c3 {
background: url(imgs/gray6/br.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

#main {
background-color: #FFFFFF;
margin: 0px auto;
overflow: hidden;
width: 600px; }

#main .a1 {
background: url(imgs/white/tl.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

#main .a2, #main .c2 {
float: left;
height: 5px;
width: 590px; }

#main .a3 {
background: url(imgs/white/tr.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

#main .b2 {
margin-left: 5px;
overflow: hidden;
width: 590px; }

#main .c1 {
background: url(imgs/white/bl.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

#main .c3 {
background: url(imgs/white/br.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

#content {
background-color: #000000;
margin: 0px auto;
overflow: hidden;
width: 580px; }

#content .a1 {
background: url(imgs/black/tl.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

#content .a2, #content .c2 {
float: left;
height: 5px;
width: 570px; }

#content .a3 {
background: url(imgs/black/tr.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

#content .b2 {
margin-left: 5px;
overflow: hidden;
width: 570px; }

#content .c1 {
background: url(imgs/black/bl.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

#content .c3 {
background: url(imgs/black/br.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

.right {
background-color: #FFFFFF;
margin: 0px auto;
margin-left: 5px;
overflow: hidden;
width: 300px; }

.right .a1 {
background: url(imgs/white/tl.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

.right .a2, .right .c2 {
float: left;
height: 5px;
width: 290px; }

.right .a3 {
background: url(imgs/white/tr.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

.right .b2 {
margin-left: 5px;
overflow: hidden;
width: 290px; }

.right .c1 {
background: url(imgs/white/bl.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

.right .c3 {
background: url(imgs/white/br.bmp) no-repeat;
float: left;
height: 5px;
width: 5px; }

/* CLASSES */

.auto {
margin: 0px auto; }

.block {
display: block; }

.left {
float: left; }

.hidden {
overflow: hidden; }

.underline-link {
color: #0F0F0F;
font-weight: bold; }

.underline-link a {
color: #C11B17;
text-decoration: none; }

.underline-link a:hover {
color: #F62817;
text-decoration: underline; }

 

your main.css is the same

 

maybe google for nifty corners, loads cleaner than this stuff

 

Hope this what you were looking for, i didn't have the images