CSS Question

[Mr_Smith]

Hello community,
For a site I'm making, I want a layout that's fluid, so it changes to the browser width. The problem is, I think the background image is just centering, but how about the buttons? How do you place them, and keep them where they should be? Is there a command so I can put an image like 10 px from the left side of the background image?

Thanks in advance,
Smitovic

 

[Kelevra]

Hello community,
For a site I'm making, I want a layout that's fluid, so it changes to the browser width. The problem is, I think the background image is just centering, but how about the buttons? How do you place them, and keep them where they should be? Is there a command so I can put an image like 10 px from the left side of the background image?

Thanks in advance,
Smitovic

Actually it's not the browser it changes for it's the "Screen Resolution" of the persons monitor it changes to.

Now as for a fluid site this highly depends on your desgin. Do you use a lot of images for your design?

E.G.

[%%%%%%%%%%%%%%%%%% News & Updates %%%%%%%%%%%%%%%%%%]

Lets say that the text above is an image of 800x20px (the actual text "News and Updates" is text that appears on the image). if your site used a fluid design the image would repeat (unless you told it not to using CSS). Or a huge gap would appear after the image to take the empty pace. So having a fluid look about your site soly depends on YOUR design. Unless we can see what you have planned we won't be able to give 100% accurate help.


For your BUTTON

or ANY:

<div> | <p> | <table> | <tr> | <td> | <img src="image.png"> | and many others

You can move them by using the following CSS:

CSS position Property

Definition

The position property places an element in a static, relative, absolute or fixed position.

Inherited: No

JavaScript Syntax

CSS properties can also be dynamically changed with a JavaScript.

Scripting Syntax: object.style.position="absolute"

CSS Example

h1

{

position:absolute;

left:100px;

top:150px;

}

Possible Values

static: Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations)

relative: An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

absolute: An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties

fixed: An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)

Z-index: Z-index can be used to place an element "behind" another element.

img.x

{

position:absolute;

left:0px;

top:0px;

z-index:-1

}

Z-index: The elements in the example above have now changed their Z-index.

img.x

{

position:absolute;

left:0px;

top:0px;

z-index:1

}

 

[Mr_Smith]

Alright, thanks for the help. I must've been a bit more accurate, but the thing I want is like this:

[----News and Updates----Tutorials----Forum----Chat----] and so on, and this placed centered in the background image. The background image is centered, so it should always be in the center of the page :tongue: However, the buttons on top should also be centered, but right next to each other, maybe with a few px between them. Is there a syntax to put the button for example 20 px to the rigth of the left border of the background?

 

[Kelevra]

By "center" are you referring to horizontally, vertically, or both. Also this would be easier to help with if I had an example to look at (e.g. from another site that uses the style you want to capture).

 

[Mr_Smith]

I have a basic layout that I want, Ill upload it when Im back home this evening.