Programming Help Forums / HTML / Javascript / CSS / CSS Help

Blueprint CSS Framework

DaveL — Tue, 23 Dec 2008 16:13:19 GMT

Interesting article about a CSS Framework called Blueprint:
[url=http://nettuts.com/tutorials/html-css-techniques/a-closer-look-at-the-blueprint-css-framework/]nettuts.com/tutorials/html-css-techniques/a-closer-look-at-the-blueprint-css-framework/[/url]

I usually like to start from [i]scratch[/i] scratch with CSS, but some may find this easier, as it defines base classes for you, and resets the default HTML values of such thing as padding and margin.

Center align a div?

Andy — Sun, 28 Jan 2007 07:13:39 GMT

Hi guys,

I need to create a div that is in the centre of the page using styles. The div needs to have gray border.

Anyone?

CSS Question

mikey — Sat, 27 Jan 2007 10:25:35 GMT

I don't know CSS very well, but I used the code from someone else on this forum to try the 2 column layout with the divs, it's pretty good!

Here's my code

[code]

.contentdivone
{
float:left;
width:400px;
}
.contentdivtwo
{
float:left;
width:150px;
}
[/code]

This works great, but my problem here is when I make the window smaller the contentdivtwo moves below contentdivone. What I want is a scroll bar to appear so that the two columns are always next to each other.

Any ideas?

Getting Started with CSS

weber — Tue, 23 Jan 2007 21:58:35 GMT

CSS stands for Cascading Style Sheets. A style sheet simply holds a collection of rules that enables us to easily manipulate our web pages.

When you define a font, color, or any other formatting that is a styling and each set of style has a unique name called a selector. All selectors with their set of styles are placed in a file called style sheet. When a particular style is needed in HTML, you simply refer to the selector.

Centering Issue!

disgraceful_kitten — Sun, 25 Feb 2007 09:11:04 GMT

I know im asking a tricky question, ive read everywhere on the internet how
centering using css can be somewhat hard...ive found some things, and ive found
those things useful, however the cant fully help me.

Basically ive got an div layer containing just an image, i want it to be
centered horizontally, however i want it 270px from the top of the page
aswell...the coding im using now does everything but make it absolutely centered
horizontally..its just slightly off.

The code im using at the moment -

<style>table table {margin-top:270px;}
div table table, table table table {margin-top:0;}
..banner {width:700px; height:100px; position:absolute; top:190px; left:50%;
margin-left:-370px; text-align:center;}</style>

<div class="banner">
<img
src="http://i138.photobucket.com/albums/q246/xprincesssammiix/dk%20theme/bigbanner.jpg">
</div>

Just for curiousity, its a myspace page
http://www.myspace.com/xprincess_sammiix

And of course, being myspace, you need to have things like "div table table,
table table table" in your css to make things work. I dont know why.

Any help would be VERY much appreciated. Ive spent weeks racking my brains on
this one.

Samantha.

Good article on starting off on the right foot with CSS

Alex.D — Fri, 06 Mar 2009 07:29:03 GMT

This article talks about some of the things you should think about when creating your CSS file. It will help you keep things organized and working correctly on your page.

[url=http://net.tutsplus.com/tutorials/html-css-techniques/5-tips-to-writing-better-css/]http://net.tutsplus.com/tutorials/html-css-techniques/5-tips-to-writing-better-css/[/url]

Hi, need help with a Myspace DIV layout

Narcotix — Mon, 05 Feb 2007 07:10:11 GMT

Hi, i was looking for some help in creating a myspace DIV layout. I know it uses CSS code, but i was wondering if someone could help me centre my profile.

So far i've come up with this:

.holder
{
width:800px;
height:600px;
align:center;
top:50px;
border:1px solid black;
}

Thats for my main window. Can anyone help me?

CSS Layout

xuser — Tue, 17 Apr 2007 00:33:21 GMT

Iam designing webpage in adobe photoshop and slice it.let me know how to put css into html

How can I get a closed parenthesis in an ordered list?

drummer — Fri, 02 Jan 2009 22:13:30 GMT

The default is a period but what I want is a closed parenthesis 1) like that. Anyone know how to do that?
Thanks in advance!

Need help with an image hover in a

drumz — Thu, 06 Nov 2008 19:41:42 GMT

I have asked for help on another forum but no response in 2 days so maybe I will have better luck here...

I can't get the background to change images, only the

changes. I tried making the .ul and .li separate but that messed other things up.
[code]
ul.leftside li {
font: bold 11px Helvetica,sans-serif;
color: #FFF;
background: url(images/left_menu-bg.jpg) no-repeat;
margin: 7px 10px 5px 0px;
list-style-type: none;
text-indent: 40px;
}
#leftside li a, #leftside li a:visited, #leftside li a:active { color: #FFF; text-decoration: none; }
#leftside ul a:hover, leftside li a:hover { color: #404040; text-decoration: none; background-image: url(images/left_menu-bg_ovr.jpg); }

HTML

Rooms

Reservations

Siteseeing

[\code]
The hover works but only in the

and not the background for the whole

Can't set image to same position in different screen resolutions

wow — Sat, 07 Feb 2009 09:48:53 GMT

Hi all,

I'm setting up an artist page on myspace and am having a hard time trying to keep my top image fixed with different screen resolutions. I'm working in the standard 1024x768 and when I change resolution my top banner image shifts to the left of the screen and does not resize to fit screen resolution.

I'm learning myspace css as I go...

Can any help?

My codes are as follows:

body{
background-position:top center;margin-top: ;}

div.topbanner {
top: 0;
left: 20%;
margin-left: -200px;
width: 100%;
height: px;
position: absolute;
}

body{background:url("MY 2ND PIC URL IN HERE") left repeat-y;}

Body{margin-top: 300; background-color:black; background-attachment: fixed; background-position: top center; background-repeat: no-repeat;}

Thank you

Using CSS to Fix Common Bugs

Alex.D — Wed, 07 Jan 2009 07:27:24 GMT

Hey guys, just found a very useful article about those problems you come across when you're creating your layout in CSS. I run across these a decent amount, so I figured it would come in handy at some point.

[url=http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html]http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html[/url]

CSS Layout - 100% Height with footer

Alex.D — Thu, 11 Dec 2008 09:30:25 GMT

I wanted to post this link because it's come in handy a lot. Basically it's an example showing you how you can get a page to span 100% with a header and footer. The middle content section will scale. It used to be pretty easy to get 100%-height layouts with tables, but with CSS it was a bit tricky. This works in both IE and Firefox.

It uses 100% height tags for the HTML & BODY tags, and also for the "container" DIV. Set a height on the header, then the "content" div follows (both are in container). The footer is the real tricky part usually. Try to follow...

The "container" DIV is set to relative positioning. Then, the footer's position is set ABSOLUTELY to "bottom:0px;" What this does is position the footer at the very bottom of the container (not the page). This usually would create a problem because if you had a bunch of content in the middle part of the layout, the bottom of the content would be covered up by your footer DIV (because it's absolutely positioned). So what you do is apply a padding to the bottom of the "content" DIV equal to the height of the footer DIV PLUS a little breathing room (50px or whatever). What this does is create blank space at the bottom of the "content" DIV, which pushes down the footer past the point where it would usually cover up some of the content. Hope this all makes sense!

[url=http://www.xs4all.nl/~peterned/examples/csslayout1.html]http://www.xs4all.nl/~peterned/examples/csslayout1.html[/url]

CSS controlling the Form padding

wingMan — Fri, 07 Dec 2007 10:15:15 GMT

I always had a problem formatting forms when working in tight spaces. Ugghh. They never do what I want.

That is until I discovered they have inherent padding. It's there. You never see it and you can't control it with regular HTML (at least none that I could find). Most browser suppress the top margin, but not the bottom.

Alas, CSS saved me from my torment. It was easy to change the background and border colors, but changing the padding or margins helped enormously. What control!

form {
border: 1px solid #666699;
padding: 5px;
}

I put a border around this form just to see how the padding affects everything. When you have the padding set right, remove the border.

Or remove the bottom border with an in-line style.

You can also manipulate the margins. Much better moving the form around like this (recommend external style sheet).

.Textbox {
margin-left: 100px;
}

wingMan

Css sidebar

Karlo — Wed, 14 Feb 2007 14:12:46 GMT

Well i need some help as i am quite a noob for css. I would like to know if anyone can code me an script that changes the appearance and colors of sidebar of IE.

I had a really long script but it did not work.

I would like the sidebar to be black with traces of white...:D

TRIM THE BUTTON WIDTH TO BUTTON TEXT THROUGH CSS

ayyanarj — Fri, 02 Mar 2007 09:16:34 GMT

While applying the CSS for button in ASP.Net. I have a problem in button width.

Text in the button always showing with Padding.

I dont want padding in the button.

Here is the CSS for button.

.Button,.CommandButton

{

padding: 0 0 0 0;

margin: 0px auto;

text-align: center;

text-decoration: none;

border-style:none;

border-right: #4e5e7d 2px inset;

border-top: #4e5e7d 2px solid;

font-weight: bold;

font-size: 11px;

border-left: #4e5e7d 2px solid;

color: White;

border-bottom: #4e5e7d 2px inset;

font-family: verdana;

background-color: #4e5e7d;

}

Please help me for this.

Advance Thanks

Using CSS to create a two column layout

chillywilly — Wed, 24 Jan 2007 09:45:27 GMT

I'm having problems understanding how to use CSS to create a two column layout. I'm trying to move away from using tables and am trying the CSS route. The code below seems to work, but I only got it to work from guess and check. Can someone explain how this works or point to a link with some explanations?

<div sty;e="float:left;">Column One</div>

<div style="float:left; position:relative;">Column Two</div>

css and tag clouds

gabi — Mon, 25 Feb 2008 10:54:03 GMT

Hey all:

Hoping someone here can help me out. I am using CSS to format a tag cloud and the formatting is all displaying correctly EXCEPT for the width of the cloud. http://www.issuelab.org/tag/youthmedia

I have gone back and forth about this ad naseum and would so appreciate any guidance you all could offer!!!

I have to show this site to a funder at the end of the week and would love for this to be working correctly.

Many thanks,

Gabriela

myspace css code help

Kisukinishi — Sun, 18 Feb 2007 12:37:11 GMT

you see... i need help figuring out a code. I have a myspace and i want to ad another table at the top of the page. I want to be able to put a game there, it's a .swf file. i don't want to put it in the right column of my tables because it's large, height=500 width=750. My first problem, is that i can't figure out how to make the file work. I tried to extract its url by looking through the source. I found a link that i thought would work, but it doesn't. It looks frozen on the loading page.