layout basics

[gjh42]

Yes you do get the id from view source and use it in the stylesheet. You don't just cut & paste - the syntax is different. Where you see <div id="asdf"> in the php file, you use
#asdf { border: 2px #00aaff;} or whatever
in the stylesheet.

[mex]

Yes you do get the id from view source and use it in the stylesheet. You don't just cut & paste - the syntax is different. Where you see <div id="asdf"> in the php file, you use
#asdf { border: 2px #00aaff;} or whatever
in the stylesheet.

So to change say position of id='atrrib-4' which is an option drop down box on prod info page, in css i, i add this in stylesheet

#attrib-4 {position:relative: left: 50px;} //fails

Nothing happens, but i can change other things like color on the whole page so i have referenced it right?

[birdoasis]

Mex,

You say you want to move the drop down atrib box. How do you want to move it? Do you want to bring it up a few lines, or do you just want to move it to the left or right? Setting the position left may not be enough, since there may be something else to the left of it.


What template are you using?

[mex]

well I said in anothe post( sorry for double posting ), I wanted it to move up and right 50 pixels, I will have to see how it looks.

I am modifying the prod info page with graphic card prod item 1 on default layout. I don't believe I need modify template for the whole page as i was told to check the id in the source.

Also I want the image moved but i can't work out heads or tails how to move anything with ZC. The admin section doesn't style things. I get the id of say the optionbox by going to page source and spending a while getting the id=attrib-3.
Now I am told this isn't want to change to move?



I know css and have webdeveloper but I need a more specific direction on how to do specific page layout styling.

[gjh42]

#attrib-4 {position:relative: left: 50px;} //fails

This isn't going to do anything because it's written wrong. You don't use three colons in succession; you need to make separate elements:
#attrib-4 {position:relative; left: 50px;}
or for better appearance
#attrib-4 {
position:relative;
left: 50px;
}

[mex]

#attrib-4 {position:relative: left: 50px;} //fails

This isn't going to do anything because it's written wrong. You don't use three colons in succession; you need to make separate elements:
#attrib-4 {position:relative; left: 50px;}
or for better appearance
#attrib-4 {
position:relative;
left: 50px;
}

Ok thanks for that, the example i copied from also had this mistake, and i was starting to think this is impossible and (going stir crazy).

Does the webdeveloper find error s like this though as I expect i will make more errors?

NOw using webdevelper is there a way to click on something and get its id?
eg on an img I want moved with css when i can fid its id?

[Kim]

... life would be much easier if you just move the code in the template around instead of taking days to figure out the CSS

[gjh42]

In the Web Developer toolbar, under Tools there are buttons to validate things including CSS and HTML. As I posted earlier, the Information > Display element info button will do this, as will several other buttons. Look at them all and play around to see what they do.

The best way to edit code and avoid errors is to use a good programming text editor. I like Notepad++ (available free from Sourceforge); it displays different kinds of elements in different colors, and highlights many kinds of errors for you. You can have a half dozen files open at the same time and work back & forth.
Since you are working locally, as soon as you save an edit you can refresh your storefront screen and see the effect.