Jump to content

Align Text


Guest

Recommended Posts

Hi

Can anyone help me I am trying to set up new store and I am testing diffrent things to feel my way around.

If you have a look at this test page

I want to line up the text and change the txt to navy blue any one help me ?

My Webpage

Link to comment
Share on other sites

You're either going to have to change the immage size or have fewer images per line or shorten the descriptions. You only have so many pixels in the frame to deal with. You might try changing the size of the font to a smaller one. You can do this in style.css. There are tutorials available to tell you what to look for.

CubeCart_css_properties.txt

Link to comment
Share on other sites

Hi searchty!

Also, Mozilla (FF, ns) have a problem displaying the header padding and margins correctly. To fix this, please open styleSheets/layout.css.

Under #topHeader, FIND:

	margin-bottom: 0px;

	padding-right: 9px;

	padding-top: 0px;




Please change values to:




	margin-bottom: 5px;

	padding-right: 9px;

	padding-top: 5px;




Under .boxContent, please add this line: position: relative; like so:




.boxContent {

      position: relative;

      padding: 3px;

      font-family: Verdana, Arial, Helvetica, sans-serif;

      font-size: 75%;

      color: black;

      background-color: #F3F3F3;

      margin-bottom: 5px;

}




Save, close & upload.



Next, open styleSheets/style.css. 



FIND these two blocks:




.bannerCart {

      position:relative;

      margin-top: 5px;

      margin-left: 5px;

      float: right;

}

.banner {

      position: relative;

      margin-top: 5px;

      margin-left: 5px;

      float:right;

}

CHANGE margin-top values to zero: margin-top: 0px;

Next, FIND the class, .txtContentTitle. Under .txtContentTitle, please ADD this line: position: relative;

Save, close & upload.

Done.

These tweaks will be added to the zip archives of all my Fashion skins, and repaired files will be sent to everyone who purchased them.

Link to comment
Share on other sites

Hi searchty!

Also, Mozilla (FF, ns) have a problem displaying the header padding and margins correctly. To fix this, please open styleSheets/layout.css.

Under #topHeader, FIND:

	margin-bottom: 0px;

	padding-right: 9px;

	padding-top: 0px;




Please change values to:




	margin-bottom: 5px;

	padding-right: 9px;

	padding-top: 5px;




Under .boxContent, please add this line: position: relative; like so:




.boxContent {

      position: relative;

      padding: 3px;

      font-family: Verdana, Arial, Helvetica, sans-serif;

      font-size: 75%;

      color: black;

      background-color: #F3F3F3;

      margin-bottom: 5px;

}




Save, close & upload.



Next, open styleSheets/style.css. 



FIND these two blocks:




.bannerCart {

      position:relative;

      margin-top: 5px;

      margin-left: 5px;

      float: right;

}

.banner {

      position: relative;

      margin-top: 5px;

      margin-left: 5px;

      float:right;

}

CHANGE margin-top values to zero: margin-top: 0px;

Next, FIND the class, .txtContentTitle. Under .txtContentTitle, please ADD this line: position: relative;

Save, close & upload.

Done.

These tweaks will be added to the zip archives of all my Fashion skins, and repaired files will be sent to everyone who purchased them.

Hi mark

I have done all that please can you view and let me know if it right ?

My Webpage

Thanks

Link to comment
Share on other sites

Looks better, but it looks as though you missed changing the padding-top to 5px in the first step. Is that the case, or not?

Hi Mark

I had done the change but not uploaded it dohh

take a look now

Link to comment
Share on other sites

OK, searchty, I just looked and saw that you haven't edited or uploaded styleSheets/layout.css, although you did fix style.css . . .

That's why it doesn't look as good as it should - no white space at all above banner and cart ;)

Please do change the values for #topHeader and up-load to your site, as this will improve the site and make it appear much the same in IE and Mozilla.

As to font color, there are various places that you should go to change the fonts both in layout.css and style.css. Search for color:, as each of these will set foreground (font) colors for various elements. Make only one change at a time if you are unsure, then upload and view . . . so if you change something you do not like, you can restore it with only one change :)

Link to comment
Share on other sites

Nevermind the trial and error - I looked at style.css again and I have found your error. In changing color from black to navy, you typed in "navy blue" and CSS does not understand that. Change "navy blue;" to "navy;" here:

.txtDefault, a.txtDefault, a.txtLink, a.txtLocation, a.txtCatMenu{

      font-family: Verdana, Arial, Helvetica, sans-serif;

      font-size: 85%;

      color: navy blue;

      text-decoration:bold;

      padding:0px;

}

Link to comment
Share on other sites

I see you got the color changed to navy. :wacko:

OK, you've got text-decoration set as bold - that confuses CSS and you get the default underline. Acceptable values for the text-decoration property are:

  • none
  • underline
  • overline
  • strikethrough
  • blink

If you want to set text to bold, you should use the font-weight property:

  • font-weight:bold;

ALSO, are you aware that you have set the font-size for links at 85%, while the font-size for hover is at 110%? This makes the text jump large when you scroll over it - generally not a good idea IMO - you should consider setting both to the same value :wacko:

Link to comment
Share on other sites

I see you got the color changed to navy. */*

OK, you've got text-decoration set as bold - that confuses CSS and you get the default underline. Acceptable values for the text-decoration property are:

  • none


  • underline


  • overline


  • strikethrough


  • blink

If you want to set text to bold, you should use the font-weight property:

  • font-weight:bold;

ALSO, are you aware that you have set the font-size for links at 85%, while the font-size for hover is at 110%? This makes the text jump large when you scroll over it - generally not a good idea IMO - you should consider setting both to the same value :wacko:

This is great after sales service

Thanks Mark by the way are you any good at logo design...? :wacko:

Thank you

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...