PDA

View Full Version : Redesigning (worried about css code)


africano
09-12-2008, 06:23 PM
First of all: Ive posted this in another section but think it may be better off here.

Im redesigning my site. Here is what I have so far. I think it looks good(but what do I know?┐:grin:)

Although I think that the left side needs some elements, it looks a bit bare to me(the elft side) The header might need some gradient to fill instead of just the green... The two boxes will have images instead of text.

For the left handside(which I think looks blank) Im thinking about some Polaroid elements containing images or text(maybe they can serve as links to ther parts of the site.)

Although Im happy with it so far and I think its better than my first design....Im not too sure about my css code.....I reckon its going to give me problems someway along the road...because I dont think the code has some BIG errors in it, but anyways!

Let me know what you think, what needs changing etc. Again, Im going for an artistic, clean, portfolio type design!

Link: http://www.elchevirtual.com/Personaltrainer/
Cheers,
Africano!
Edit: I would appreciate it if someone could have a quick look at my css...Im afraid my layout elements dont match in my design becuase of my css code?┐Makes sense?

Ricky55
09-13-2008, 12:05 AM
Straight away your body CSS is not wrong just too long


body {
background-image: url(kkkkkkkkk/pattern.jpg);
background-repeat: repeat-x;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}



could be

background-image: url(kkkkkkkkk/pattern.jpg) repeat-x;
margin: 0;

Ricky55
09-13-2008, 12:06 AM
no need to state px when 0 value

Ricky55
09-13-2008, 12:07 AM
a & a:link same selector no need to list both

Cary
09-13-2008, 12:56 AM
a & a:link same selector no need to list both

Well, they're not quite the same. What's applied to a will be applied to all link states so this...

a {
text-decoration:none;
}
a:link, a:visited {
color: #FFFFFF;
}
a:hover {
color: #000000;
}
a:active {
color: #FFFFFF;
}

is the same as this...

a:link, a:visited {
color: #FFFFFF;
text-decoration:none;
}
a:hover {
color: #000000;
text-decoration:none;
}
a:active {
color: #FFFFFF;
text-decoration:none;
}

domedia
09-13-2008, 01:29 AM
background-image: url(kkkkkkkkk/pattern.jpg) repeat-x;

Nope this is actually invalid ;-)
You need to use the CSS shorthand 'background' to set more than one background property. The code above will (I guess) not display the background image at all.

I use those shorthand properties as well Ricky, love'em. I think I actually wrote the first comprehensive webdev article about it loong time ago :)

africano
09-13-2008, 11:56 AM
Hey guys, Ok thanks for the suggestions about my css code. Will have to sit down and work on it and figure out all about the shorthand etc(I want to make it a point to write good and clean css)

The thing that worries me is that I dont think my css is right in terms of layout(if that makes sense). I mean that onscreen it looks ok, but I dont think My Elements(divs) are alid out correctly(again, if that makes sense).

What about the design? Any opinions? Do you agree with me that the lefthandside seems a bit too bare?

Could maybe add some sort of element to it there no? Links?Images, graphical material?

Cheers.

Ricky55
09-13-2008, 08:19 PM
Sorry you are right Dom, I did know just a mistake copying aficano's code

but is better to use the short hand method of


background: url(images/logo.jpg) repeat-x;


That code wouldn't even work never mind not being valid CSS or is that what you meant?

domedia
09-14-2008, 06:20 PM
Sorry you are right Dom, I did know just a mistake copying aficano's code

but is better to use the short hand method of


background: url(images/logo.jpg) repeat-x;


That code wouldn't even work never mind not being valid CSS or is that what you meant?

No, you're right, I use the above shorthand on everything I do :)

africano
09-15-2008, 09:47 AM
Hey.....sorry to drag on but. Does anybody understand what I mean when I say that my layout doesnt Fit?

I seem to have messed up the measurements of my divs and they dont line up correctly.(Is this a real issue and how to sort it out?)
Can someone have a quick look at my code and see if its really as messed up as I think?

Cheers,

Africano.

africano
09-16-2008, 07:26 AM
Just really want to know if I can continue working on this or if any Fatal errors in my css are going to come back and haunt me later on....?┐?┐?┐:grin::confused:

edbr
09-16-2008, 07:46 AM
not sure what you mean not lined up butthis looks wierd
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b

africano
09-16-2008, 08:06 AM
I know, Im finding it hard to explain myself..... Lets see. In dreamweaver, when I play with my css measurements:width/height of elements(content,sidebar,etc) they dont line up correctly I dont seem to get a properly lined up layout(ie all fits perfectly).

I apologise as I myself can see that I am not explaining my self correctly.

The code you have shown I believe belongs to the two boxes, I got that method from a website and think its called xsnazzy method.

*Which brings me to another issue...when I add text to the boxes, they break up.
One more thing Im in class at the moment and the monitors here are samller than mine at home, my page here does not look centred, is it?
cheers, and once again sorry if Im not being clear.
Africano.

d a v e
09-16-2008, 01:12 PM
you have to change that background image - i had to scroll to check if my monitor was dirty!!

africano
09-16-2008, 01:15 PM
Hopefully this will help in making myself understood:

Im attaching an image, Ive gotten rid of the background images that make up my site and have added bground colors intead.

As you can see my divs dont line up or FIT properly....This is what Im referring too. Also....on my monitor my page looks centred but on others it does not.....Im just not clear...