First CSS site - a bit of advice needed...

  Ade_1 16:57 20 Aug 2006
Locked

Hi, I have started doing my first CSS site, however I have had one or two little problems which I was hoping someone with a good knowledge and understanding of web design could answer.

The questions are actually posed on the website which is - click here

I will put the questions on here aswell but in order for the questions to be answered you will have to see the page first.

(Just to warn you, I only have 1 page complete at this moment but thought it would be best to get my questions answered before I continue)

Questions -

Where my text is displayed it is displayed as a layer in Dreamweaver but not in the coding. As it is a layer does it matter enough that I should try and find a way round it or should it be ok?

In the WYSIWYG view of Dreamweaver the page looks slightly disjointed however in the browser it looks fine. Is this normal when doing CSS or not...?, if not is it a major problem or not really?

Thanks in advance


Aidan

  Ade_1 16:59 20 Aug 2006

I forgot to add that in IE the grey dotted underline underneath every link isnt working properly as you will probably see for yourself.

Aidan

  Verdani 04:03 21 Aug 2006

I'm a bit too tired at the moment to go into anything about the actual layout, but as for the distortion in Dreamweaver - it's typical. I don't actually use Dreamweaver but have at times, and I've always found that previewing in a couple browsers (and it's important to check in a couple major ones, namely IE and Firefox) is the best way to achieve the results you really want. I'm not sure why the WYSIWYG view in Dreamweaver does this, but I bet somebody will know. That's just my experience.

  gibbs1984 09:16 21 Aug 2006

I use Dreamweaver 8 with CSS and it is more than a little out of place with things completely in the wrong place.

Sorry but I'm not sure why this happens though, it first happened not at the start but just when I randomly saved it once, strange.

I think it must be a bug cause my layout in a browser looks fine.

  slightlymad 00:36 22 Aug 2006

Nice page, Ade!

I opened it up in Dreamweaver and hunted for a layer - nada. No layers. Honest!

And yes, the layout looks weird in DW, but it often does and I don't know why.

A couple of suggestions...

Stop hitting the return key!!

If you want to add space to an element, then the place to do it is in the stylesheet, e.g:

#left {
margin-top: 40px;
}

This will give a 40px space, or margin, at the top.

Margins and padding are your biggest tools for laying elements out as you want.

If you add some padding to your content div, it will stop the text going right up to the edges - think of padding as "cushioning".

#content {
padding: 10px 20px 10px 20px;
}

(That's 'shorthand' for top, right, bottom and left.)

Also, STOP using the Property Inspector for alignment. It's tempting to press those alignment buttons, but again, the place to do this is in the CSS:

#content {
text-align: center;
}

Which you've already got... but you'll see in the HTML that you've also made it an 'inline' style, which is a no-no as far as W3C is concerned. There should be NO styles in the HTML - that's what makes it XHTML.

You can start by turning this...

<!-- InstanceEndEditable -->
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div> 
<div id="left" align="left"><div align="left">
<div align="center">
<ul>
<li><a href="click here">Home</a></li>
<li><a href="#">Aims</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p align="center"></p>
<p align="center"> </p>
</body><!-- InstanceEnd --></html>

Into this:

<!-- InstanceEndEditable -->

</div>
<div id="left">
<ul>
<li><a href="click here">Home</a></li>
<li><a href="#">Aims</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
</div>
</body><!-- InstanceEnd --></html>

Just add text-align:center and margins to your #left div.

Much cleaner, isn't it?!

  Ade_1 16:18 22 Aug 2006

Thanks for the advice slightlymad I will definately use it.
If im honest, I actually was looking at your site via ade.h's "Stuck for inspiration" topic, and I looked at some of your work which set me off wanting to make my first non-tabled website as I saw all your CSS coding and wanted to give it a go myself.

Once again, thanks for the advice, and yes, its definately much cleaner!

Thanks

Aidan

  Ade_1 16:20 22 Aug 2006

Forgot to add, I need to sort out a few issues as it works in IE and not in FF so I will probably have to come up with a different idea for the bits which are not working.

Thanks again!

Aidan

  gibbs1984 16:26 22 Aug 2006

From what I was taught, tables are bad but they should just be used for table like situations not for the layout of a website so using div's and CSS to layout your website is the cleanest and the right way.

  Ade_1 16:32 22 Aug 2006

Yes, I would have to agree that using tables can be much neater and that sometimes div's can make it quite messy.

However, I like to learn new things and give things a go hence why I did this. Plus if I end up getting better at it I will have alot of different options open to me when designing and making a website.

  slightlymad 18:09 22 Aug 2006

For a first attempt, you've done very well, Ade!

I'm really glad to hear that my pages set you off! That's a big compliment! I'm still learning, my ambition being able to create a page as good as those at Zen Garden: click here

I could see that you still have some issues with your page, but I didn't want to overwhelm you.

But now I do.

To get the page to look the same in FF and IE, you need to change the positioning of the #left div from relative to absolute.

Your #content div is set 162px from the top of the page. Do the same with the left div:

#left {
position: absolute;
top: 162px;
left: 100px; (or whatever)
width: 100px;
border-width: 2px;
border-style: solid;
border-color: #FFCC66;
color: #FFFFFF;
text-align: top;
}

Notice that I've removed "background-position". This relates to an image, and you haven't got an image in this div.

Your page will now look the same in both browsers.

AND YOU CAN REMOVE ALL THOSE <p> </p>'s!

Notice that IE doesn't do dotted borders, and displays them as dashed.

Ask away, if you need any more help.

  slightlymad 18:12 22 Aug 2006

Ah, the <p> things didn't display as intended, but I think you know what I mean.

All the empty paragraphs - those with "nbsp" between the tags.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

OnePlus 5 review

See the work of famous artists playing with toys

iPad Pro 10.5in (2017) review

Comment faire une capture d’écran sur un Mac ?