13 replies [Last post]
charkibbles
charkibbles's picture
Offline
newbie
London
Last seen: 11 years 31 weeks ago
London
Timezone: GMT+1
Joined: 2010-06-18
Posts: 8
Points: 10

Hello Everyone

I am lucky enough to have a boyfriend who is a talented web designer, but as I hope some of you will understand, this can also be a hindrance as like many couples we dont seem to be able to work together or separate personal issues from business ones!
So due to some large "creative differences", we have come to the conclusion that any further alterations to my website will have to me done by me.

However of course I am not a web designer, so I am hoping some kind person can help and save a lot of futher arguments...!

I am hoping that my questions are simple ones and will be easily rectified.

There are just two small things I would like adjusting on my website to do with positioning and text.

I have attached simple visual annotated diagrams as I think it will be easier than explaining in words.

This is the WIP website: http://www.charlottekibbles.co.uk/dev/

This is the CSS code

body {
	font-family: "Trebuchet MS", "Lucida Grande", Arial, Helvetica, sans-serif;
	margin: 0 auto;
	padding: 0;
	font-size: 12px;
	color:#fff;
	background:#000;
}
 
.header_container {
	margin:0;
	height:80px;
}
 
#header {
	width:305px;
	position:fixed;
	height:46px;
	top:20px;
	right:20px;
	background: url('img/logo.gif') right no-repeat;
}
 
#header h1 {
	text-indent:-5000px;
}
 
.nav_content {
	float:left;
	width:500px;
}
 
#container {
	margin:20px 0 0 160px;
	height:450px;
 
}
 
a {
	color:#ff6600;
	text-decoration:none;
}
 
#footer {
	width:1180px;
	height:30px;
margin-top:15px;
	margin:auto;
	clear:both;
}
 
#footer p {
	line-height:300px;
	padding:0 0 0 0px;
	font-size:10px;
	color: #fff;
}
 
 
/*********Top NAv***************/
 
ul.topnav {
	margin:0;
	padding:0;
	width:816px;
	margin:auto;
}
 
ul.topnav li a {
	color:#fff;
}
 
ul.topnav li a:hover {
	text-decoration:underline;
}
 
ul.topnav li {
	float:left;
	margin:5px 10px 5px 0;
	padding:4px 10px 4px 10px;
	background:#666;
	list-style:none;
	font-size:13px;
}
 
ul.topnav li.on {
	background:#FF6600;
}
 
ul.subnav {
	margin:0 0 30px 14px;
	padding:0;
	width:820px;
	margin:auto; 
}
 
ul.subnav li a {
	color:#ccc;
}
 
ul.subnav li a:hover {
	color:#ff6600;
}
 
ul.subnav li {
	float:left;
	margin:0;
	padding:4px 6px 4px 6px;
	list-style:none;
	font-size:11px;
}
 
ul.subnav li.on a {
	color:#ff6600;
	text-decoration:underline;
}
 
/*********Side Nav***************/
 
.sidenav {
	position:fixed;
	top:70px;
	left:20px;
}
 
.sidenav ul {
	padding:0;
	margin:0;
}
 
.sidenav ul li.title {
	font-weight:bold;
	color:#fff;
	background:none;
}
 
.sidenav ul li {
	background:#000;
	margin:2px 0 2px 0;
	padding:6px 10px 6px 10px;
	list-style:none;
 
 
.infoblob {
	background:#1F1F1F;
} 
 
.infoblob p{
	padding:10px;
	color:#eaeaea;
	line-height:20px;
}
 
.sidenav ul li.toptab {
	color:#666;
	background:#000 url36px 10px no-repeat;
}     
 
/****************************/
 
.clear {
	clear:both;
}

This is the Html:

<div class="sidenav">
	 <ul>
		<li class="toptab"></li>
		<li class="title" style="margin-top:20px;">BEAUTY</li>
		<li><a href="">Beauty 1</a></li>
		<li><a href="">Skincare</a></li>
		<li class="title"style="margin-top:20px;">HAIR</li>
		<li><a href="">Hair 1</a></li>
		<li><a href="">Haircare</a></li> 
	    <li class="title"style="margin-top:20px;">FASHION</li>
		<li><a href="">Fashion 1</a></li>
		<li><a href="">Lifestyle</a></li> 
	    <li class="title"style="margin-top:20px;">BODY</li>
		<li><a href="">Body 1</a></li>
	 </ul>
 
	<div class="infoblob">
		<p>CONTACT<br/>07801 803 100<br/> <a href="mailto:[email protected]">charlottekibbles<br/>@gmail.com</a>
	</div>
	</div>
</div>

I hope someone can help, would be very grateful!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

charkibbles wrote: this can

charkibbles wrote:

this can also be a hindrance as like many couples we dont seem to be able to work together or separate personal issues from business ones!

My wife and I have the same problem!! hahaha

Quote:

I have attached simple visual annotated diagrams as I think it will be easier than explaining in words.

I dont see your visual. my place-of-work has mean network security. Also, you might want to clear up these validation errors...
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.charlottekibbles.co.uk%2Fdev%2F

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 11 years 9 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

There are no attachments

There are no attachments Sad

charkibbles
charkibbles's picture
Offline
newbie
London
Last seen: 11 years 31 weeks ago
London
Timezone: GMT+1
Joined: 2010-06-18
Posts: 8
Points: 10

Sorry!! Hope this works this

Sorry!! Hope this works this time.

AttachmentSize
Picture 12.png 497.73 KB
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

contact text - try adding the

contact text - try adding the same margins and padding as the li's in the list above it.
extra text - use position: fixed and just place it where you want it to stay, just like the sidenav.

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 11 years 9 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

.sidenav ul li is missing a

.sidenav ul li

is missing a closing } so the infoblob styles aren't being applied

.sidenav ul li {
	background:#000;
	margin:2px 0 2px 0;
	padding:6px 10px 6px 10px;
	list-style:none;

should be

.sidenav ul li {
	background:#000;
	margin:2px 0 2px 0;
	padding:6px 10px 6px 10px;
	list-style:none;
}

charkibbles
charkibbles's picture
Offline
newbie
London
Last seen: 11 years 31 weeks ago
London
Timezone: GMT+1
Joined: 2010-06-18
Posts: 8
Points: 10

thanks

The missing { worked a treat. Thanks so much.

Im afraid I'm not clever enough to place the extra text my self...

I can cut and paste if some clever person could write it?!!

charkibbles
charkibbles's picture
Offline
newbie
London
Last seen: 11 years 31 weeks ago
London
Timezone: GMT+1
Joined: 2010-06-18
Posts: 8
Points: 10

Browser problems

I have a new problem but the spam filter wont let me post it - see attached for issue!

Any help would be much appreciated.

AttachmentSize
Picture 14.png 590.75 KB
Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 11 years 9 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

Looks fine on the live site

Looks fine on the live site you've linked in a previous post, can you post the html and css you have now?

Since everything looks huge, have you left a heading tag open?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

charkibbles wrote: I have a

charkibbles wrote:

I have a new problem but the spam filter wont let me post it

I'm 66 years old with weak eyes and even I can figure out how to decipher the captcha! What's your problem?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

charkibbles
charkibbles's picture
Offline
newbie
London
Last seen: 11 years 31 weeks ago
London
Timezone: GMT+1
Joined: 2010-06-18
Posts: 8
Points: 10

It wont let me post the code

It wont let me post the code it says:

Your submission has triggered the spam filter and will not be accepted.

Any ideas on how to avoid the span trigger?

charkibbles
charkibbles's picture
Offline
newbie
London
Last seen: 11 years 31 weeks ago
London
Timezone: GMT+1
Joined: 2010-06-18
Posts: 8
Points: 10

body { font-family:

body {
	font-family: "Trebuchet MS", "Lucida Grande", Arial, Helvetica, sans-serif;
	margin: 0 auto;
	padding: 0;
	font-size: 12px;
	color:#fff;
	background:#000;
}
 
.header_container {
	margin:0;
	height:80px;
}
 
#header {
	width:305px;
	position:fixed;
	height:46px;
	top:20px;
	right:20px;
	background: url('img/logo.gif') right no-repeat;
}
 
#header h1 {
	text-indent:-5000px;
}
 
.nav_content {
	float:left;
	width:500px;
}
 
#container {
	margin:20px 0 0 160px;
	height:450px;
 
}
 
a {
	color:#ff6600;
	text-decoration:none;
}
 
#footer {
	width:960px;
	height:30px;
margin-top:15px;
	margin:auto;
	clear:both;
}
 
#footer p {
	line-height:30px;
	padding:0 0 0 0px;
	font-size:10px;
	color: #fff;
}
 
 
/*********Top NAv***************/
 
ul.topnav {
	margin:0;
	padding:0;
	width:816px;
	margin:auto;
}
 
ul.topnav li a {
	color:#fff;
}
 
ul.topnav li a:hover {
	text-decoration:underline;
}
 
ul.topnav li {
	float:left;
	margin:5px 10px 5px 0;
	padding:4px 10px 4px 10px;
	background:#666;
	list-style:none;
	font-size:13px;
}
 
ul.topnav li.on {
	background:#FF6600;
}
 
ul.subnav {
	margin:0 0 30px 14px;
	padding:0;
	width:820px;
	margin:auto; 
}
 
ul.subnav li a {
	color:#ccc;
}
 
ul.subnav li a:hover {
	color:#ff6600;
}
 
ul.subnav li {
	float:left;
	margin:0;
	padding:4px 6px 4px 6px;
	list-style:none;
	font-size:11px;
}
 
ul.subnav li.on a {
	color:#ff6600;
	text-decoration:underline;
}
 
/*********Side Nav***************/
 
.sidenav {
	position:fixed;
	top:70px;
	left:20px;
}
 
.sidenav ul {
	padding:0;
	margin:0;
}
 
.sidenav ul li.title {
	font-weight:bold;
	color:#fff;
	background:none;
}
 
.sidenav ul li {
	background:#000;
	margin:2px 0 2px 0;
	padding:6px 10px 6px 10px;
	list-style:none;
}
 
.infoblob {
	background:#1F1F1F;
} 
 
.infoblob p{
	padding:10px;
	color:#eaeaea;
	line-height:20px;
}
 
.sidenav ul li.toptab {
	color:#666;
	background:#000 url('img/arrow.gif') 36px 10px no-repeat;
}   
 
/****************************/
 
.clear {
	clear:both;
}

<div class="sidenav">
	 <ul>
		<li class="toptab"></li>
		<li class="title" style="margin-top:20px;">Body</li>
		<li><a href="">Body 1</a></li>
		<li><a href="">Body 2</a></li>
		<li class="title">Beauty</li>
		<li><a href="">Beauty 1</a></li>
		<li><a href="">Beauty 2</a></li> 
	 </ul>
 
	<div class="infoblob">
		<p>Charlotte Kibbles<br/><a href="mailto:[email protected]">charlottekibbles<br/>@gmail.com</a></p>
	</div>
</div>

charkibbles
charkibbles's picture
Offline
newbie
London
Last seen: 11 years 31 weeks ago
London
Timezone: GMT+1
Joined: 2010-06-18
Posts: 8
Points: 10

ah there it is! I wasnt

ah there it is! I wasnt scrolling down properly. Its been a LONG day! Smile

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 11 years 9 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

Can you post all your html,

Can you post all your html, not just the sidenav