PDA

View Full Version : css divs layout problems


monkeymedia
09-16-2010, 11:18 AM
http://avagarosa.redwebhosting.co.uk/index.php

arrgh! help. I would imagine its a float or a clear doing that but I've tried all combinations (or at least it feels like it)

ideas?

thanks in advance.

Corrosive
09-16-2010, 11:28 AM
OK, I can clearly see it isn't right but what are you actually trying to achieve? What should it look like? Do you have a Photoshop mock-up or anything?

monkeymedia
09-16-2010, 11:43 AM
sorry

it should be 3 almost idnetical boxes across the top, boxes 2 and 3 look right but box one is all over the shop

gentleone
09-16-2010, 11:52 AM
Your approach to layout those boxes is where the problem already started. You should bring those heading and footer images to your stylesheet.

For the heading use h2 tags and style them in your CSS with the appropriate heading image as background-image.

You do the same with the footer images, but you make an anchor tag for those and set display: block with the right dimensions (width and height) and set the appropriate footer image also as background-image.

For the text you use a paragraph and you can give the paragraph a fixed height so that the height of the boxes are the same.

monkeymedia
09-16-2010, 03:19 PM
I can see what you're saying about the headers and footers, but don't I need 'something' in there to apply the header style to? My heading text is part of the image so I can have a drop shadow on there. are you saying lose the drop shadow and have the title as text with lets say col1heading style applied to it?

gentleone
09-16-2010, 03:48 PM
Okay... hold on. I'll show you what I mean, but I need a bit of time.

Corrosive
09-16-2010, 04:01 PM
...but I need a bit of time.

Would it help you concentrate if I stand behind you and make a ticking sound?

gentleone
09-16-2010, 04:27 PM
Okay... something like this.

There might be an error or two, because I just edited it in here without testing, but if you copy it to your page and stylesheet and put it live then we'll see how it is.

Also if you had made in your design the boxes the same width, than there was less code (in HTML & CSS) needed as now.


<div id="wrapper">

<div id="box1">

<h2>The Villa</h2>

<img src="images/box1_picture.png" width="320" height="48" alt="" />

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<a href="#">more info</a>

</div>

<div id="box2">

<h2>The Region</h2>

<img src="images/box2_picture.png" width="280" height="48" alt="" />

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<a href="#">more info</a>

</div>

<div id="box3">

<h2>The Attractions</h2>

<img src="images/box3_picture.png" width="300" height="48" alt="" />

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<a href="#">more info</a>

</div>

</div>
CSS:


#box1 {float: left; width: 320px}
#box2 {float: left; width: 280px}
#box3 {float: left; width: 300px}

#box1 h2 {height: 48px; background: url(images/box1_heading.png); text-indent: -9999px}
#box2 h2 {height: 48px; background: url(images/box2_header.png); text-indent: -9999px}
#box3 h2 {height: 48px; background: url(images/box3_header.png); text-indent: -9999px}

#box1 p, #box2 p, #box3 p {width: 220px; font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif}

#box1 p {background: url(images/box1_background.png) repeat-y; padding: 0 40px 0 60px}
#box2 p {background: url(images/box2_background.png) repeat-y; padding: 0 20px 0 40px}
#box3 p {background: url(images/box3_background.png) repeat-y; padding: 0 20px 0 60px}

#box1 a, #box2 a, #box3 a {display: block; height: 66px; text-indent: -9999px}

#box1 a {background: url(images/box1_footer.png)}
#box2 a {background: url(images/box2_footer.png)}
#box3 a {background: url(images/box3_footer.png)}

gentleone
09-16-2010, 04:50 PM
Would it help you concentrate if I stand behind you and make a ticking sound?

I've no problems with that... I code always with music on.... well, no Iron Maiden or something like that :)

Corrosive
09-17-2010, 06:00 AM
Iron Maiden or something like that :)

Up the Irons! What do you think to Final Frontier?

monkeymedia
09-17-2010, 02:42 PM
thank you gentleone

code spliced in and uploaded to the same link. I havent swapped the graphics over to lose the box titles, I'd assumed that would now just be text contained in the h2, but I see you have an indent of -9999 and the text isnt visible.

I really dont understand that part of it

Also there's big gaps but one problem at a time hey?

Thank you for helping me out by showing me the right way, I do apreciate it. The code for 'your way' is a lot cleaner than my way.

gentleone
09-17-2010, 03:00 PM
I havent swapped the graphics over to lose the box titles, I'd assumed that would now just be text contained in the h2, but I see you have an indent of -9999 and the text isnt visible.

The text-indent I did so that it's all still semantic and accessible (for screen-readers and search engines).

Re the gaps let's see if a CSS-reset of the default margins and paddings will do do the trick.
Place this as the first rule in your stylesheet. There is a better CSS reset, but for now this one.


* {margin: 0; padding: 0;}


Thank you for helping me out by showing me the right way, I do apreciate it. The code for 'your way' is a lot cleaner than my way.

No props... your welcome!

monkeymedia
09-17-2010, 03:31 PM
by jove I think you've got it.

hmm, my background image appears to have buggered off now. I swear I didnt touch anything to do with that though

monkeymedia
09-17-2010, 03:33 PM
oh, the -9999 indent thing, does that basically shift it all the way off the side of the screen then? effectively hiding it?

gentleone
09-17-2010, 03:47 PM
by jove I think you've got it.

hmm, my background image appears to have buggered off now. I swear I didnt touch anything to do with that though

Great... except for that background-image :) ... I'll have a look.

monkeymedia
09-17-2010, 03:50 PM
its in the body css rule, its still there, the image is still on the server. arrgh

gentleone
09-17-2010, 03:51 PM
oh, the -9999 indent thing, does that basically shift it all the way off the side of the screen then? effectively hiding it?

Yes! In browsers without CSS-support (believe me, they're still out there) and screenreaders your content is than still visible. Do you use Firefox? If so download the web developer toolbar (add-on). You can disable CSS with that to see how the page will render.

gentleone
09-17-2010, 03:53 PM
its in the body css rule, its still there, the image is still on the server. arrgh

Did it happen already before adding the css reset or after?

gentleone
09-17-2010, 03:57 PM
There is an closing } too many in your CSS after your #wrapper rule. Delete it!


#wrapper {
width: 900px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0px;
}


}

monkeymedia
09-17-2010, 04:00 PM
before, but I cant isolate what it was as dw was being a whore about synching up with my web space (going through a firewall, its flaky at best)

gentleone
09-17-2010, 04:01 PM
before, but I cant isolate what it was as dw was being a whore about synching up with my web space (going through a firewall, its flaky at best)

crossed comments... see my comment above :)

monkeymedia
09-17-2010, 04:01 PM
you sir, are a legend. thank you.

gentleone
09-17-2010, 04:16 PM
you sir, are a legend. thank you.

Your more then welcome! ;)

I hope that you learned a bit about clean and semantic coding. Just keep layout (design & styles) and content separated.
Every image that belongs to your layout goes into your stylesheet. Only images that belong to your content you place in the HTML. That's why I left the box pictures (little photos) in there.

The CSS reset is always good practice, because you can start styling from zero and therefor you'll get already a big step closer to browser consistency.
I only suggest to use Eric Meyer's CSS reset. The one you have now is quite heavy, because the * (astrix???) means you'll reset every single element on the page.

http://meyerweb.com/eric/tools/css/reset/index.html

monkeymedia
09-28-2010, 03:11 PM
me again :(

something has gone horribly tits up. I've not actually has the time to do more on it until yesterday, at which point I decided to try integrating a little weather thingy along the bottom.

Now, I could be wrong but I swear it all looked ok in IE before I started, now it doesnt. I've tried to discover what's wrong but (yet again) it's winning.

I thought maybe the weather.css was confliscting with layout.css so I changed the link from weather.css to something that didnt exist to disable it but the problem continues.

The bigger problem is that I've beent tinkering all bloody day with this have have no idea at which point I intriduced such a massive layout disaster.

Help, again. I prmoise to be more careful in the future.

I upload and preview it after just about everything I do in ff, maybe I should be doing that in ie too it seems.

link: http://www.avagarosa.redwebhosting.co.uk/

Corrosive
09-28-2010, 03:28 PM
You've used div id 'box4' twice. That probably isn't helping matters. You should try being a bit more descriptive with your CSS names IMO.

monkeymedia
09-28-2010, 03:50 PM
just swapped the second instance of box4 to box5, no change

yeah I know what you mean. problem is when I started this I wasn't 100% what was going there. probably should have done more planning beforehand.

gentleone
09-28-2010, 06:48 PM
problem is when I started this I wasn't 100% what was going there. probably should have done more planning beforehand.

That's where the process of developing a website start with. You gather all the necessary information from the client such as:
- what's the purpose of the website?
- what's the main message?
- who's the target audience?
- what should they do on your website (what's the call to action)?
- etc
- etc
- etc
- this can be, or even should be, a long list.

Then you start planning, digging the resources for the desired requirements of the website, make a flowchart (sitemap), wireframing (sketching out where all the elements such as logo, navigation, image holders, text, etc. will be placed), designing and developing.

This all is a bit in a nutshell, but this will prevent you from walking like a blind man in website project.

Anyways... what version of IE gives you trouble and what's your OS?

monkeymedia
09-29-2010, 07:10 AM
it's ie8 that go's wonky (havent tested any others) and I'm on xp pro

as regards planning (I started a thread about this but got very little response) what tools do you use to help? Do you all just write a really long word doc or is there something more useful? I end up writing a word doc and maybe an excel sheet and doing any layout sketches in coreldraw but I feel there must be a better (proper?) way of doing it as I seem to do it different every time and havent settled into something that feels sensible.

gentleone
09-29-2010, 09:14 AM
as regards planning (I started a thread about this but got very little response) what tools do you use to help? Do you all just write a really long word doc or is there something more useful? I end up writing a word doc and maybe an excel sheet and doing any layout sketches in coreldraw but I feel there must be a better (proper?) way of doing it as I seem to do it different every time and havent settled into something that feels sensible.

Every website project is different and each web designer has his own web design process, but there are standard questions that you can ask to every client and which each and every web designer uses in his website design questionnaire.
Do some research about this.... google for website design questionnaire and you'll find heaps of examples, tips and the do's and dont's.
Or subscribe to freelanceswitch.com where you can find loads of information about the business side of a freelance web designer:
http://freelanceswitch.com/finding/web-design-client-questionnaires

For wireframing you use whatever you feel comfortable with. Coral Draw, Illustrator, Photoshop, Fireworks or even Powerpoint. There are also online wirframe tools and even free ones but these are limited to a certain amount of clients and/or pages. A big plus with these tools is that pretty much every element that you use in a website is ready made to drag and drop wich makes the process of wireframing faster. Personally I decide in the end with the clients approval where everything will be placed and how the overall layout for every page will look. It's too much hassle, stressful and time consuming to change a layout in Photioshop or in the development process.

The biggest tip I guess is keep on communicating with your clients and let them sign off every step you finished in your design process. If they wanna change or add something after this then you can charge them extra for it.

it's ie8 that go's wonky (havent tested any others) and I'm on xp pro

Okay I fired up my VMWare before I wrote the above, so I will check your issue in IE8 now.

gentleone
09-29-2010, 09:36 AM
For now can you add the following to your CSS:
To the body rule: text-align: center;
To the #wrapper rule: text-align: left;

monkeymedia
09-29-2010, 04:17 PM
I've been messing around with this for a while now inbetween trying to plan the rest of the site out.

I've come to the conclusion that you're right and I should have finished planning before going anywhere near DW. So, going to abandon it for the time being and concentrate and finalising the plans, then attack it pretty much from scratch from there I reckon taking on board all the advice given so far.

Thanks for all the help thus far guys.

monkeymedia
10-26-2010, 04:27 PM
and so it starts again...

so, got my plans sorted I think (would show you but I cant upload from here, thanks sonicwall) and I'm back on actually making the site.

damn this stuff is so hard to remember when you don't do it every day isn't it?

http://www.avagarosa.redwebhosting.co.uk/

so, trying to take on on board everythng you guy have taught me so far, I got hardly any distance at all before I hit a snag.

Clearly I dont understand the box model at all, the title worked fine, the paragraph stuff though, what the hell is going on there?

Could someone explain where I have gone wrong please?

Corrosive
10-26-2010, 04:30 PM
I can see it is a bit of a mess but don't know what you are trying to achieve?

monkeymedia
10-26-2010, 05:58 PM
good point. I'll post up a jpeg of how the layout should look tomorrow from work.

Corrosive
10-27-2010, 05:43 AM
good point. I'll post up a jpeg of how the layout should look tomorrow from work.

Thank you :)

monkeymedia
10-27-2010, 07:14 AM
http://www.avagarosa.redwebhosting.co.uk/likethis.jpg

right then, that's the graphic for that one particular box before I sliced it up and attempted to stitch it back together with css

the top orangey bit (exactly like a jaffa cakes orangey bit strangely) should have a nicely placed heading on it. Then some text with <p> tags round it, then the footer (with the sun) with a bit of text that says 'read more' and is a link.

All I really need to know for now is in what manner I've got it wrong to do that to the graphics. oh and why the heading graphic has snuck under the div for the menu.

Ta in advance for the help.

monkeymedia
10-27-2010, 12:47 PM
right somehow I've actually managed to fix the <p> background image problem.

the mian one now is what appears to be my wrapper div going under the menu div. I guess I need to apply some sort of position to wrapper then do I?

Corrosive
10-27-2010, 01:21 PM
It is the 'position: fixed' that is causing that.

Corrosive
10-27-2010, 01:22 PM
If you want to retain that positon fixed then use a top margin on the wrapper to make sure it starts lower than the navigation.

monkeymedia
10-27-2010, 01:43 PM
this is so frustrating, I had it all looking good (apart from the one div under the other problem) so I did a bit of tidying and it all went horribly wrong.

basically I had a style called #col1, which is wrong as I wanted it to be called #1col to signify a single column item. I didn't want it to give the impression that it was the left column as the name col1 suggested.

so, I moved that harmless looking '1' from after the word col, to the start of the word col. I also did the same for all the sub styles (is that a term I can use?)

looks great in design view (I know design view sucks), no different to how it did. live however tells a different story. very very frustrating.

monkeymedia
10-27-2010, 01:46 PM
would I be right in thinking you cant start a style name with a number?

Corrosive
10-27-2010, 01:46 PM
You can't start an ID name with a number. Them's the rules I'm afraid ;)

Call it #one-col if you have to.

Corrosive
10-27-2010, 01:47 PM
Cross post, but you got it.

monkeymedia
10-27-2010, 01:48 PM
hmm, it appears so, have replaced '1' with 'single' and it fixed it.

right, this silly positioning thing. have added 35 margin to the top of wrapper, but it's kind of put it above the menu. the menu is in its own div and not contained within wrapper I beleive.

monkeymedia
10-27-2010, 01:52 PM
cheers Corrosive. I think I need to try fixing stuff myself for another 5 mins before I post ;)

at some point in my life I'd really like to understand all this stuff.

Corrosive
10-27-2010, 01:54 PM
Why are you fixing the position of the nav at all?

monkeymedia
10-27-2010, 02:00 PM
I thought it might work well to have it always in view. These pages may get to quite a length.

another thing I am wondering..

you see how I have #singlecol which contains settings that apply to everything in singlecol, then have #singlecol a for additional settings that apply to links.... if I wanted to, could I use something other than standard tags? ie could I have '#singlecol pjamas' or wouldn't that work? I want to add a footer image in the same was as the title but didnt wanted to grab h3 incase I want it later.

did that make sense at all?

monkeymedia
10-27-2010, 02:09 PM
hmm. looks like it works in ff but not in ie unless I've done something wrong.

http://avagarosa.redwebhosting.co.uk/index.php

Corrosive
10-27-2010, 02:28 PM
You can't make up your own tags and tags such as h3 are really there for scemantics and not to do your styles. If you want to target a particular h tag then use something like;

#main h3

monkeymedia
10-27-2010, 03:22 PM
ok, so if you view my layout in ff, you can see the double column boces can have either a title like the single columns, or just a white curvy corner, and a footer thats just a white curvy corner.

Is it acceptable practise to just drop them in as an image? at the moment I am adding them into the style sheet, and just having the word 'footer' in the html so it gives me something to apply the style 'footer' to, which gives me the image where I want it.

better to just drop em in with img tags or...?

Corrosive
10-27-2010, 03:57 PM
That's kind of the thing about web design. there are multiple ways of creating the same layout. Each of us will make your layout in a different way. Take this post for instance; http://www.dreamweaverclub.com/forum/showthread.php?t=37677 so, if images are working for you, then do it. Just make sure you check cross browsers and screen resolutions. It is looking good btw :)

monkeymedia
10-27-2010, 04:16 PM
It is looking good btw :)

thank you.

ok so images are ok to use then basically.

about my fixed nav overlapping my wrapper type problem, any ideas on that one?

one think I can see happening, or rather know will happen with this siote is I will most likely (in fact do already) have several div's with the same id. Is that a really reallt bad thing to do?

Corrosive
10-27-2010, 04:20 PM
one think I can see happening, or rather know will happen with this siote is I will most likely (in fact do already) have several div's with the same id. Is that a really reallt bad thing to do?

Yes it is :) IDs appear only once in a page. If you want to use repeating styles you can use classes as in;

.box {styles here}

<div class="box"></div>

I'm still not sure about your fixed menu though.

monkeymedia
10-27-2010, 04:25 PM
I'd better swap to classes then. Is it just the case on the css file to change name from #col1 to .col1 for instance?

monkeymedia
10-27-2010, 04:29 PM
also, if you look on my layout, on the doublecolumn width item, the footer image is outside of the double column div. I originally had it inside and it went horribly tits up. why's that? it looked like it was taking on the box props of the p tags or something (ie it shifted 20px to the right and had the p background image behind it)

I'm really trying to do this site the 'right' way (whatever that proves to be)

Corrosive
10-27-2010, 04:32 PM
Yes but you need to change the html as well. You need to think logically about how you are using your CSS styles. As I said, IDs are for particular items on the page, such as banners. classes are for repeating styles you want to use a number if times, maybe a certain text style or a box.

Also, and something I found out on this forum when I started, you can use an ID and a couple of classes on a div. So a div may look like;

<div id="column_one" class="box float"></div>

or something like that anyway.

I believe that newer browsers will take more than two classes but I wouldn't risk that myself.

That is the one piece of info that totally opened up CSS to me :)