16 replies [Last post]
grimorg80
grimorg80's picture
Offline
newbie
Italy
Last seen: 10 years 47 weeks ago
Italy
Timezone: GMT+1
Joined: 2012-01-05
Posts: 8
Points: 9

Hello everybody!
I'm an old schooll webdesigner, I did it as a full time job almost 12 years ago but then I moved completely to performing arts some years ago, while keeping doing websites as a side job or for my artistic projects.

Point is: I am trying to get rid of the table/javascript/flash crap and embrace the css world once and for all.

So... onto my problem. I read every one of your guides and other posts too, but I still can't figure why it does not work.

So, this is the page if you wanna see it.

There's some extra code because i used rollover images directly from the CSS and also sliding pictures using javascript instead of flash.

This is the HTML code:

<!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>Compagnia dei Ciarlatani</title>
 
<link href="csf.css" rel="stylesheet" type="text/css" />
 
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script src="jqFancyTransitions.1.8.min.js" type="text/javascript"></script>
 
</head>
 
<body>
 
<div id="maincontainer">
	<h1></h1>
	<a id="HomePage" href="index.php" title="HomePage"><span>Home Page</span></a>
<a id="CosaFacciamo" href="cosa.php" title="CosaFacciamo"><span>Cosa Facciamo</span></a>
<a id="ChiSiamo" href="chi.php" title="ChiSiamo"><span>Chi Siamo</span></a>
<a id="ViaggiPassati" href="viaggi.php" title="ViaggiPassati"><span>Viaggi Passati</span></a>
<a id="Contatti" href="contatti.php" title="Contatti"><span>Contatti</span></a>
<div style="clear: both;"> </div>    
	<div id="slideshowHolder">
    	<img src="img/foto-01.jpg" alt="" />
    	<img src="img/foto-02.jpg" alt="" />
    	<img src="img/foto-03.jpg" alt="" />
	</div>
 
	<script>
		$('#slideshowHolder').jqFancyTransitions({ width: 940, height: 474 });
	</script>
	<div id="interno">
    	<div id="navigation">
       	 <img src="img/box1.jpg" width="300" /><br>
<br>
<img src="img/box2.jpg" width="300" height="285" /><br>
<br>
<img src="img/box3.jpg" width="300" height="285" />    	</div>
    	<div id="content">
        	<img src="img/tit-cosafacciamo.png" width="574" height="95" alt="Cosa Facciamo" />
          	<span class="testo">Il progetto CIARLATANI SENZA FRONTIERE nasce nel 2006 con  l'intento di portare il sorriso e il teatro di strada dove difficilmente potrebbero arrivare. Il pensiero va a luoghi di povert&agrave; o di disagio. Cerchiamo  di conoscere condizioni di emarginazione per portarvi il sorriso e il gioco del clown, inserendoci in uno scambio vitale di culture. &Egrave; un'idea semplice e ambiziosa, nata dalla consapevolezza che ridere fa bene al cuore, sia per chi porta il sorriso, sia per chi lo riceve. Autofinanziamo i nostri progetti per operare in totale libert&agrave;, senza fare riferimento a istituzioni, a nessuna  bandiera, a nessuna organizzazione caratterizzata da ideologie particolari.  Solo uno &egrave; il riferimento: il clown. Organizziamo così spettacoli per  raccogliere i fondi finalizzati a sostenere le spese di queste spedizioni, che  di volta in volta vedono coinvolti gruppi artistici e altre persone coinvolte  per la documentazione.  
          	</span>
          	<p class="testo">CSF, oltre ad  autofinanziare il proprio progetto, in alcuni casi contribuisce a sostenere spese e acquisti di cui si occupano comitati e associazioni che operano sui  luoghi scelti come mete. Non neghiamo ad enti pubblici di finanziarci o  sostenerci, purch&eacute; ci&ograve; avvenga nel rispetto dell'idea fondante, nata con  semplicit&agrave; e senza secondi fini, ma soprattuto con una delle principali cartteristiche del clown: il senso di libert&agrave;. L'ente o associazione che  parteciper&agrave; finanziando il progetto o agevolando in altro modo le nostre iniziative sar&agrave; ringraziato e ricordato in eguale misura di chiunque avr&agrave; versato anche solo un centesimo dei propri risparmi personali. Con semplicit&agrave;. Senza sovrastrutture. Se credi nel valore di questo progetto puoi aiutarci con un'offerta libera.</p>
    	</div>
    	<div id="footer">Footer</div>
	</div>
	</div>
</body>
</html>

And this is the CSS:

@charset "utf-8";
/* CSS Document */
 
body { 
margin:0; 
padding:0; 
background-image:url(img/sfondo.jpg); 
	height:100%;
} 
 
h1 { 
	background: url(img/header.jpg);  no-repeat; 
	width: 1042px; 
	height: 128px; 
}
 
#maincontainer {
	margin-top:89px;
	width: 1042px;
	position: relative;
	left: 50%;
	margin-left: -521px;
	background-color:#000;
	color:#FFF;
	height:100%;
	margin-bottom:50px;
 
}
 
/*trying to figure out the layout*/
div#interno{width:940px; margin-top:21px; position:relative; margin-left:51px }
 
div#navigation{float:left; width: 300px; }
div#content {float: left; margin-left:320px; background-color:#FFF; padding-top:0px; padding-bottom:23px; padding-right:23px; padding-left:23px; }
div#footer{clear:left; text-align:center; padding: 0.5em; background-color: #69c; color: #000}
 
 
/* rollover menu image buttons */
#HomePage { display: block; width: 187px; height: 65px; background: url("img/menu-home.gif") no-repeat 0 0; margin-left:51px; float:left; }
#HomePage:hover { background-position: 0 -65px; }
#HomePage span { position: absolute; top: -999em; }
 
#CosaFacciamo { display: block; width: 222px; height: 65px; background: url("img/menu-cosa.gif") no-repeat 0 0; float:left; }
#CosaFacciamo:hover { background-position: 0 -65px; }
#CosaFacciamo span { position: absolute; top: -999em; }
 
#ChiSiamo { display: block; width: 167px; height: 65px; background: url("img/menu-chi.gif") no-repeat 0 0; float:left; }
#ChiSiamo:hover { background-position: 0 -65px; }
#ChiSiamo span { position: absolute; top: -999em; }
 
#ViaggiPassati { display: block; width: 224px; height: 65px; background: url("img/menu-viaggi.gif") no-repeat 0 0; float:left; }
#ViaggiPassati:hover { background-position: 0 -65px; }
#ViaggiPassati span { position: absolute; top: -999em; }
 
#Contatti { display: block; width: 140px; height: 65px; background: url("img/menu-contatti.gif") no-repeat 0 0; float:left; }
#Contatti:hover { background-position: 0 -65px; }
#Contatti span { position: absolute; top: -999em; }
 
#slideshowHolder {
	margin-left:51px;
	height:474px;
	width:940px;
	float: left;
	background-repeat:no-repeat;
}
 
 
.testo {
	font-family: Verdana, Geneva, sans-serif;
	font-size: small;
	color:#000;
}

grimorg80
grimorg80's picture
Offline
newbie
Italy
Last seen: 10 years 47 weeks ago
Italy
Timezone: GMT+1
Joined: 2012-01-05
Posts: 8
Points: 9

Oh, I used a main container

Oh, I used a main container div because i needed all contents inside a black box, as you would see, but a nice background should be visible around the box, so I used the <body> tag for the main background and then the container div for everything else. Still, it may be the mind of a table-based approach...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Tables destroyed a generation of web developers

Those who became proficient coding table layouts have a lot to unlearn and a lot to learn again. No non-trivial table layout can be well structured or semantic. Both of these properties are required for separation of structure from presentation; what using css is all about. Let's see if I can walk you through the process. I may miss some detail, but stay with what I suggest, and ask about stuff you don't understand or that I have missed.

From the top:

  1. The body seems OK, except delete the height property.

  2. The #maincontainer needs to be a bit narrower. A two column layout will fit an 800px width with good ease of readability for the main text column. 1024px should be the widest design window for two columns1, so make the container on the order of 980px or slightly smaller. Styles should look like so
    #maincontainer {
        background-color: #000000;
        color: #FFFFFF;
        margin: 0 auto;
        width: 980px;
        }

  3. The heading needs to be real. Use the image in the foreground; it is the heading. When an image is meaningful, don't put it in the background. Make the alt attribute echo the image's text.
    <h1><img src="image/header.jpg"
             alt="CIARLATANI SENZA FRONTIERA"
             width="100%" /></h1>
    ===========
    h1 {}
     
    h1 img {
        display: block;  /*To make sure the alt text will be visible
                           if image is not shown.*/
        border: none;    /*On internal pages, you will likely want 
                           to link back to the home page. A blue 
                           border would be added to the image if not
                           overridden here.*/
        }

  4. A navigation menu is a list, by definition. Mark it as such.
    <ul>
      <li>
        <a id="HomePage" 
           href="index.php" 
           title="HomePage">
          <span>Home Page</span></a></li>
      <li>
        <a id="CosaFacciamo" 
           href="cosa.php" 
           title="CosaFacciamo"> 
          <span>Cosa Facciamo</span></a></li>
      <li>
        <a id="ChiSiamo" 
           href="chi.php" 
           title="ChiSiamo">
          <span>Chi Siamo</span></a></li>
      <li>
        <a id="ViaggiPassati" 
           href="viaggi.php" 
           title="ViaggiPassati">  
          <span>Viaggi Passati</span></a></li>
      <li>
        <a id="Contatti" 
           href="contatti.php" 
           title="Contatti"> 
          <span>Contatti</span></a></li>
    </ul>
    =================
    ul {
        text-align: center;
        }
     
    li {
        display: inline-block;
        }
     
    #HomePage {  /*etc.*/
        background: url("img/menu-home.gif") no-repeat scroll 0 0 transparent;
        display: block;
        height: 65px;
        width: 187px;
        }
    I am not a fan of this method. If the images fail to load, you're left with a blank space for a link.

  5. Lose the empty clearing div. It is a poor practice, and not needed anyway in this case.

  6. That's a really troublesome slideshow. There are others much better. Don't ask me which, I don't like any of them. Some are just less bad than others. Wink

  7. div#interno {
        clear: both;
        margin: 0 auto;
        overflow: hidden;
        width: 940px;
        }

    The clear property is needed because of the slideshow design. It shouldn't be needed; the overflow property should do it, but I don't care to debug the slideshow.

  8. #navigation needs to be a list, as above. Use margins to create the separation you're now getting with line breaks.

  9. #content should be
    div#content {
        background-color: #FFFFFF;
        overflow: hidden;
        padding: 0 23px 23px;
        color: #000000;
        font-family: Verdana,Geneva,sans-serif;
        font-size: small;
        }

    There is no need for the testo class. Use the p tag for text, not span.

  10. The footer does not need the clear property. #interno has its own block formatting context, courtesy of the overflow property, thus encloses its child float elements.

Go through the tutorials, in order, at htmldog. You probably won't run into anything new to you, but the refresher in best practice will get your thinking more aligned with today's methods.

cheers,

gary

1. There are those who will disagree, but they are usually designers rather than information architects or library science mavens. Meh! What do they know? Tongue

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

tjroberts086
tjroberts086's picture
Offline
Enthusiast
Last seen: 7 years 34 weeks ago
Timezone: GMT-5
Joined: 2010-01-08
Posts: 138
Points: 177

you really gotta admire Gary

you really gotta admire Gary for taking all this time to show us THE RIGHT WAY to do things. Your awesome dude.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not too much credit, TJ

I was probably avoiding some real work that I should have been doing. Wink

As a long time, in web years, troubleshooter, as opposed to being a from-scratch developer, I have arrived at some firm guidelines1 toward best practice. Unexpected results in a well structured page with semantic markup are nearly always the result of a typo or a misunderstanding of how-things-work; a really puzzling conundrum at times, but easy to fix once figured out. In a poorly structured, non-semantically marked page, an error cascade is created which leads the coder to a throw-[stuff]-at-the-wall-and-see-what-sticks debugging session. Debugging one issue often cascades the errors onto another.

I see, tj, that your second anniversary at CSSC is tomorrow; 'gratz. (sound of beer mugs pounding the table)

cheers,

gary

1 I had lots of help. There are a potload of good developers here and elsewhere on the web and in print who provide those aha! moments. They1a sometimes provide eew, whatever is he thinking moments à la Meyer's global css resets.

1aMyself excluded, of course. I would not do that :rolleyes: Tongue

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

tjroberts086
tjroberts086's picture
Offline
Enthusiast
Last seen: 7 years 34 weeks ago
Timezone: GMT-5
Joined: 2010-01-08
Posts: 138
Points: 177

Thank you (cheers!) I cant

Thank you (cheers!) I cant count how many aha! moments I've had thanks to this wonderful forum! GREAT content.

grimorg80
grimorg80's picture
Offline
newbie
Italy
Last seen: 10 years 47 weeks ago
Italy
Timezone: GMT+1
Joined: 2012-01-05
Posts: 8
Points: 9

woooow

Wow Gary, this is just amazing.

Thank you so much! I'm starting to get this css stuff Laughing out loud

My main problem is that with tables was simple to create boxes and boxes and pages and so on, all nice looking. And now trying to figure it out without tables is sooooo hard. I had complete control over every single pixel.

Laughing out loud :D

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Having complete control over

Having complete control over every pixel is one of the traps, that is hard to break free from, in reality you will find - with perseverance - just how much more flexible and easier to build layouts when not constrained to a table structure - honestly Smile

If using an Image replacement approach for the links and to avoid the issue Gary dislikes try setting the span to position absolute in the anchor element which in turn is set position:relative and matching dimensions then you can add normal link text which is hidden by the overlaid span - works as long as the image is solid, but as with all approaches has limitations.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

grimorg80
grimorg80's picture
Offline
newbie
Italy
Last seen: 10 years 47 weeks ago
Italy
Timezone: GMT+1
Joined: 2012-01-05
Posts: 8
Points: 9

I am sorry.. it's true, I am

I am really really really sorry to bother you guys again... But I can't find a way out of this dark forest I'm in. I'll add a snapshot to be clear.

I cannot find a way to make the white box (div#interno) stay where the designer wants it to stay. That means around the two green lines I added. In a table layout that would be stupidly easy, but I cannot find a way to do it properly now.

I changed almost everything, overflow, padding, margin, clear... nothing. At best, I screw up some other page part. Nothing.

Please, please, please, help me understand! Why I cannot get this tech?! I'm dumb as ass, that's for sure.

Here's the code, by the way.

<!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>Compagnia dei Ciarlatani</title>
 
<link href="csf.css" rel="stylesheet" type="text/css" />
 
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script src="jqFancyTransitions.1.8.min.js" type="text/javascript"></script>
 
</head>
 
<body>
 
<div id="maincontainer">
	<h1><img src="img/header.jpg"
         alt="CIARLATANI SENZA FRONTIERE"
         width="100%" /></h1>
	<ul>
  <li>
    <a id="HomePage" 
       href="index.php" 
       title="HomePage">
      <span>Home Page</span></a></li>
  <li>
    <a id="CosaFacciamo" 
       href="cosa.php" 
       title="CosaFacciamo"> 
      <span>Cosa Facciamo</span></a></li>
  <li>
    <a id="ChiSiamo" 
       href="chi.php" 
       title="ChiSiamo">
      <span>Chi Siamo</span></a></li>
  <li>
    <a id="ViaggiPassati" 
       href="viaggi.php" 
       title="ViaggiPassati">  
      <span>Viaggi Passati</span></a></li>
  <li>
    <a id="Contatti" 
       href="contatti.php" 
       title="Contatti"> 
      <span>Contatti</span></a></li>
</ul>    
	<div id="slideshowHolder">
    	<img src="img/foto-01.jpg" alt="" />
    	<img src="img/foto-02.jpg" alt="" />
    	<img src="img/foto-03.jpg" alt="" />
	</div>
 
	<script>
		$('#slideshowHolder').jqFancyTransitions({ width: 838, height: 422 });
	</script>
	<div id="interno">
    	<div id="navigation">
       	 <ul>
      <li id="box"><img src="img/box1.jpg" width="300" /></li>
      <li id="box"><img src="img/box2.jpg" width="300" height="285" /></li>
      <li id="box"><img src="img/box3.jpg" width="300" height="285" /></li>
</ul>    	</div>
    	<div id="content">
        	<img src="img/tit-cosafacciamo.png" width="574" height="95" alt="Cosa Facciamo" />
          	<p class="testo">Il progetto CIARLATANI SENZA FRONTIERE nasce nel 2006 con  l'intento di portare il sorriso e il teatro di strada dove difficilmente potrebbero arrivare. Il pensiero va a luoghi di povert&agrave; o di disagio. Cerchiamo  di conoscere condizioni di emarginazione per portarvi il sorriso e il gioco del clown, inserendoci in uno scambio vitale di culture. &Egrave; un'idea semplice e ambiziosa, nata dalla consapevolezza che ridere fa bene al cuore, sia per chi porta il sorriso, sia per chi lo riceve. Autofinanziamo i nostri progetti per operare in totale libert&agrave;, senza fare riferimento a istituzioni, a nessuna  bandiera, a nessuna organizzazione caratterizzata da ideologie particolari.  Solo uno &egrave; il riferimento: il clown. Organizziamo così spettacoli per  raccogliere i fondi finalizzati a sostenere le spese di queste spedizioni, che  di volta in volta vedono coinvolti gruppi artistici e altre persone coinvolte  per la documentazione.  
          	</p>
          	<p class="testo">CSF, oltre ad  autofinanziare il proprio progetto, in alcuni casi contribuisce a sostenere spese e acquisti di cui si occupano comitati e associazioni che operano sui  luoghi scelti come mete. Non neghiamo ad enti pubblici di finanziarci o  sostenerci, purch&eacute; ci&ograve; avvenga nel rispetto dell'idea fondante, nata con  semplicit&agrave; e senza secondi fini, ma soprattuto con una delle principali cartteristiche del clown: il senso di libert&agrave;. L'ente o associazione che  parteciper&agrave; finanziando il progetto o agevolando in altro modo le nostre iniziative sar&agrave; ringraziato e ricordato in eguale misura di chiunque avr&agrave; versato anche solo un centesimo dei propri risparmi personali. Con semplicit&agrave;. Senza sovrastrutture. Se credi nel valore di questo progetto puoi aiutarci con un'offerta libera.</p>
    	</div>
    	<div id="footer">Footer</div>
	</div>
	</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
 
body { 
margin:0; 
padding:0; 
background-image:url(img/sfondo.jpg); 
} 
 
#maincontainer {
    background-color: #000000;
    color: #FFFFFF;
    margin: 0 auto;
    width: 940px;
    }
 
h1 {}
 
h1 img {
    display: block;  
    border: none;    
    }
 
/*trying to figure out the layout*/
div#interno {
    clear: both;
    margin: 0 auto;
    overflow: hidden;
    width: 940px;
    }
 
div#navigation{float:left; width: 300px; }
 
div#content {
    background-color: #FFFFFF;
    overflow: hidden;
    padding: 0 23px 23px;
    color: #000000;
    font-family: Verdana,Geneva,sans-serif;
    font-size: small;
    }
 
div#footer {
	text-align:center;
	padding: 0.5em;
	background-color: #69c;
	color: #000;
	}
 
 
/* rollover menu image buttons */
ul {
    text-align: center;
    }
 
li {
    display: inline-block;
    }
 
li#box {
	padding:10px;
}
 
#HomePage {  /*etc.*/
    background: url("img/menu-home.gif") no-repeat scroll 0 0 transparent;
    display: block;
    height: 65px;
    width: 152px;
    }#HomePage:hover { background-position: 0 -65px; }
#HomePage span { position: absolute; top: -999em; }
 
#CosaFacciamo { display: block; width: 209px; height: 65px; background: url("img/menu-cosa.gif") no-repeat 0 0; float:left; }
#CosaFacciamo:hover { background-position: 0 -65px; }
#CosaFacciamo span { position: absolute; top: -999em; }
 
#ChiSiamo { display: block; width: 154px; height: 65px; background: url("img/menu-chi.gif") no-repeat 0 0; float:left; }
#ChiSiamo:hover { background-position: 0 -65px; }
#ChiSiamo span { position: absolute; top: -999em; }
 
#ViaggiPassati { display: block; width: 207px; height: 65px; background: url("img/menu-viaggi.gif") no-repeat 0 0; float:left; }
#ViaggiPassati:hover { background-position: 0 -65px; }
#ViaggiPassati span { position: absolute; top: -999em; }
 
#Contatti { display: block; width: 116px; height: 65px; background: url("img/menu-contatti.gif") no-repeat 0 0; float:left; }
#Contatti:hover { background-position: 0 -65px; }
#Contatti span { position: absolute; top: -999em; }
 
#slideshowHolder {
	margin-left:51px;
	height:422px;
	width:838px;
	float: left;
	background-repeat:no-repeat;
}
 
 
.testo {
	font-family: Verdana, Geneva, sans-serif;
	font-size: small;
	color:#000;
}

Thank you so much for all the help you'd be willing to lend a dummy like me.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You could increase the side

You could increase the side padding, e.g.

div#content {
    background-color: #FFFFFF;
    color: #000000;
    font-family: Verdana,Geneva,sans-serif;
    font-size: small;
    overflow: hidden;
    padding: 0 100px 23px;
}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

grimorg80
grimorg80's picture
Offline
newbie
Italy
Last seen: 10 years 47 weeks ago
Italy
Timezone: GMT+1
Joined: 2012-01-05
Posts: 8
Points: 9

Yes, that helps me with the

Yes, that helps me with the text. But not with the white box background, which is the main "graphic" problem. Top, left and right.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

OK, that issue lies with the

OK, that issue lies with the navigation column. The ul has 40px left padding, by default, to indent the list items. Set ul's padding to zero. Yo may also want to give the column itself a little right margin.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

grimorg80
grimorg80's picture
Offline
newbie
Italy
Last seen: 10 years 47 weeks ago
Italy
Timezone: GMT+1
Joined: 2012-01-05
Posts: 8
Points: 9

ok, one step forward

Right! Now I know why the ul was always 40px away!

GREAT! I got another error. I had to remove "overflow: hidden;" from the content div, that caused the white box to stay beneath the three lateral boxes. Then I added a 25px top margin and a 371px left margin and now it's perfectly placed.

The only problem now is that I cannot make it keep a width.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You're throwing stuff against

You're throwing stuff against the wall, looking for something to stick. Use the cascade and top-down contexts. In other words, let the parent or other ancestor control as much as possible.

div#interno {
    clear: both;
    margin: 0 auto;
    overflow: hidden;
    width: 840px;
    }
This sets the content of #interno and its children to a total width that matches the slide show image widths.

div#navigation {
    float: left;
    margin-right: 71px;
    width: 300px;
    }
Notice the right margin. That's the separation you set with the left margin on the text container. Setting it here is more robust.

ul {
    list-style: none outside none;
    padding: 0;
    text-align: center;
    }
Gets rid of the indent and the default list markers.

li#box {            /*Change this to a class. There can be only a 
                      single element per page with a given ID token.*/
    padding: 10px;  /*You don't need this*/
    }
Notice the comments.

div#content {
    background-color: #FFFFFF;
    color: #000000;
    font-family: Verdana,Geneva,sans-serif;
    font-size: small;
    margin-top: 1em;
    overflow: hidden;
    padding: 1px 1em 0;
    text-align: justify;
    }
The top margin matches the default margin of the ul. The top padding of 1px stops the heading's margin from collapsing through. And, the side padding of 1em matches the text size typographically. Notice there is no side margin. The overflow property creates a new block formatting context for #content.

When you work top-down as I have, you need only make layout corrections once instead of for each instance, and there is less chance for breakage.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

grimorg80
grimorg80's picture
Offline
newbie
Italy
Last seen: 10 years 47 weeks ago
Italy
Timezone: GMT+1
Joined: 2012-01-05
Posts: 8
Points: 9

yes but...

Gary, you really are helping me out. I wish I found a help like this long ago. Smile

Ok, I make a div for the boxes and put a bottom padding there, so they won't show attached one to each other.

I see what you did there.

-maincontainer
-interno
-navigation
-content
-footer

So, until I have a "all column" object, there is no big problem, it just stays inside thediv#interno.
When I have columns, like navigation/content, i take the left one and stick it to the left side with float:left. I get it up here. But then I'm lost.

Is it maybe because what I'm trying to create, with the design given me by the graphic designer, is impossible to recreate with css?

I mean, I have to make the white content box big enough to cover more space, but if I try to give it a "widht" it goes under the small boxes..

I searched the web, I searched A LOT, still I can't find a way to help myself with this! All examples are made from layouts who do not rely on a graphic layout like mine. Dammit...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Make the following

Make the following changes:

  1. Delete the divs with id=boxes. You don't need them as the li is already a container for the image. Note that an id token may be used on only one element per page. You do not need extra separation, since the images have a white band at the top which provides for a visual break.

  2. Remove the right margin from the navigation div. I was following your lead, but the margin creates an ugly gap.

  3. On the navigation ul and on the content div, change the top margin on both to about 8px.

Yours is a simple design. It consists of a top banner area, two columns and a footer. It is only when you view it piecemeal that it seems difficult. The beauty of using a well structured document markup and css is that you simply block out the major components and style each's content without concern for the other major pieces.

If theses last alterations are not what you're seeking, show us the designer's rendering.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

grimorg80
grimorg80's picture
Offline
newbie
Italy
Last seen: 10 years 47 weeks ago
Italy
Timezone: GMT+1
Joined: 2012-01-05
Posts: 8
Points: 9

Nothing... This is what it

Nothing... This is what it looks like now:

here

And this is what is should look like: