Lion feeding! My latest site design.

Butters

Butters

Butters

Permabanned
Joined
22 Apr 2007
Posts
1,805
Hi guys,

I'm just testing the water with this design again built up from scratch using CSS for a hotel.

None of the links work and I know the site works in IE7 and FF, but if any other browser users fancy having a bash then feel free.

Also, I've not checked the compliance against W3C yet, that is Mondays task! :(

As always comments are welcome.

My biggest issue is with the right content div. For some reason the blue doesnt go all the way to the bottom of the container and its annoying me badly.

If there is more text in the right column it pushes down and everything meets nicely.

So, in the CSS I changed the background colour to a background image and repeated y, but still the same issue.

Any help with that is apprecieate. View source for CSS location and HTML code.

Linky
 
The links dont work because it doesnt have any...

Code: 
	<li id="nav-1"><a href="index.html">Welcome</a></li>	
	<li id="nav-2"><a href="">Accommodation</a></li>
	<li id="nav-3"><a href="">Dining</a></li>
	<li id="nav-4"><a href="">Gallery</a></li>
	<li id="nav-5"><a href="">Spa &amp; Fitness</a></li>
	<li id="nav-6"><a href="">Bookings</a></li>	
	<li id="nav-7"><a href="">Local Interests</a></li>
	<li id="nav-8"><a href="">Contact</a></li>

My biggest issue is with the right content div. For some reason the blue doesnt go all the way to the bottom of the container and its annoying me badly.

If there is more text in the right column it pushes down and everything meets nicely.

So, in the CSS I changed the background colour to a background image and repeated y, but still the same issue.
Click to expand...

i have no idea what you are going on about, please explain more

and why is there so much unnecessary code?

why is there unnecessary images???

Code: 
background-image:url(images/rbg.gif);	
background-repeat:repeat y;
can be replaced with
Code: 
Background-color: #AFC0D0;
unless you are planning on using a gradient?

but even then the image only needs to be 1px high
 
Last edited:
Hi Pulse,

No I know the links dont work, thats why I said, the links dont work. It was to stop everyone looking through the whole site.

Also, what do you mean by unnecessary code?

If you like at the main content of the page, the blue column doesn't meet the bottom of the page, there is a white border under it.
 
reading through the code i spose it isnt unnecessary if you wish to display links the containers, but it does at to a lot of the code, and if its the same for both containers then why not group them to save on code ie.

Code: 
#rightcontent a:visited{
color: #f20000;	
border-bottom: 1px dotted #f20000;	
border-left:0px;	
border-right:0px;	
border-top:0px;	
text-decoration:none;	
}	
#leftcontent a:visited{		
color: #f20000;	
border-bottom: 1px dotted #f20000;	
border-left:0px;	
border-right:0px;	
border-top:0px;	
text-decoration:none;	
}
becomes
Code: 
#leftcontent a:visited, rightcontent a:vistited{		
color: #f20000;	
border-bottom: 1px dotted #f20000;	
border-left:0px;	
border-right:0px;	
border-top:0px;	
text-decoration:none;	
}
 
Ahh, cool, didnt know you could do that for the links. Thanks

Re: the image. I had it as a background colour, but this was causing the issue and would have been a definate no no to achieve full length image. Hence, why I then chose an image. I think its only 10px high anyway.
 
i dont like to nit pick too much but the right side of the large image is only 273px wide but the the container underneath is 275px, i take it they are meant to be the same?
 
no, they are meant to be different to allow a pseudo padding of the text in the blur logo.

also

#leftcontent a:visited, rightcontent a:vistited{
color: #f20000;
border-bottom: 1px dotted #f20000;
border-left:0px;
border-right:0px;
border-top:0px;
text-decoration:none;
}
Click to expand...

doesnt work :(
 
Code: 
#leftcontent a:visited; rightcontent a:vistited{
color: #f20000;
border-bottom: 1px dotted #f20000;
border-left:0px;
border-right:0px;
border-top:0px;
text-decoration:none;
}
try that, just reaplce the "," seperating the elements with ";"
 
i do apologize, i was right the 1st time, i just missed something out.
Code: 
#leftcontent a:visited, #rightcontent a:vistited{
color: #f20000;
border-bottom: 1px dotted #f20000;
border-left:0px;
border-right:0px;
border-top:0px;
text-decoration:none;
}
each element still needs its own "#" to define it
 
as you may have also realised adding the two codes into one does create some problems :p like the headers have the same width so the right one is now out of the content area :D
 
yeah as people have said ther eis a lot of useless code, i.e border-left: 0px is un-needed as there is no border by default.

also i see things like the font being redinfed to the exact same as it is already in like the rightcontent div.
 
Cool, thanks guys. I got the method pulse was suggesting to work too.

Had an idea about the right dix colour not meeting the bottom of the page so will try that today or tomorrow.

Also, I'll stick the font details in the body tag at the top.

I always CSS my borders and things in even if I dont use them and I just set them to 0. Allows me to quickly change things later, but the final revision will have all that removed.

Has anyone managed to look at it in IE6? Since I've had Vista I cant install IE6 stand-a-lone :(
 
the nav bar has a slightly bigger margin at the top of it, also the rightbox used to be the same but it is now too small in the space given so it is doesn't fit with the left one and is at the bottom of the page. Thats about it really unless you want the exact same design both browsers and the headers/login box are differnt sizes but then that is going to be hard to fix as you don't have ie6.
 
tbh i wouldnt worry about IE 6 too much, i know it is still used by a lot of people but it doesnt deal with CSS very well and whatever changes you make to perfect in FF/IE7/Opera will just cause problems in IE 6
 
Pulse said:
tbh i wouldnt worry about IE 6 too much, i know it is still used by a lot of people but it doesnt deal with CSS very well and whatever changes you make to perfect in FF/IE7/Opera will just cause problems in IE 6
Click to expand...
I totally agree with this. I'm making a website for a university final year project. It will be designed and coded to work in the "latest versions of Opera, Firefox and Internet Explorer", is what my project plan says. :D I did that unwittingly. So that is one loophole to get out of catering for IE6 in my project.

My supervisor also agreed with my argument that seeing as we are a computer science department and the site is specifically aimed at students from this department, they are more likely to be using Opera or Firefox than IE6. Also all the department computers have IE7 and Firefox on them. So I successfully argued that the likelihood of anyone having IE6 was very low, so low I don't have to bother with it. :D:cool:
 
although i see what your saying about not worrying with ie6 i would still design it for that as at the end of the day you are trying to learn web designing and getting a site to look right in ie6 is part of web designing, afaik ie6 is still the most used browser, and in all honesty it isn't hard at all the get it to work properly, just a few changes and thats it
 
Mammalian said:
although i see what your saying about not worrying with ie6 i would still design it for that as at the end of the day you are trying to learn web designing and getting a site to look right in ie6 is part of web designing, afaik ie6 is still the most used browser, and in all honesty it isn't hard at all the get it to work properly, just a few changes and thats it
Click to expand...
Is that aimed and me or the OP? :)
 
You must log in or register to reply here.
Back
Top Bottom