Photoshop to css. I'm trying to position my images with css

S

sethalbritton

New Member
I was slicing photoshop and putting it in tables until I found out that was wrong. Then I found out about using css and the examples I am finding don't exactly fit to my web site, so Im trying to ask question that will help me understand it. I'm not always good at picking it up how others explain it. If that makes sense.

any way I want to slice up web site and position it with css instead of tables. I created a little example to show you where I am having problems. If anyone could help me position or look at my code and show me where I'm going wrong I would appreciate it.


I don't want to repeat any images or use color for the back ground. I want to use all images. I know you need headings, so I think I want to hide the text.

here is my example http://i7.photobucket.com/albums/y291/sethalbritton/website.jpg. I would slice it up into four slices. I know you can repeat solid colors, but I don't want to do that. Imagine it was sliced into four pieces. Help me position them please.


So my css code would be this

body {
text-align:center;
margin:0;
}

.container {
margin:0 auto;
width:1000px;
height: 200px;
text-align:left;
}

.header{
width:1000px;
height:200px;

<body>

<div class="container">
<div header="header"></div>



</div>
</body>


How do I position the items inside of my div header. I want all four pictures inside. I want to label my logo with an h1 tag and put text in it that is hidden. Any help is appreciated.

my layout is 1000 by 200 and thanks in advance
 

Attachments

  • website.jpg
    website.jpg
    33.6 KB · Views: 123
Last edited:
L

LouTheDesigner

New Member
In Dreamweaver, there is a sort of cheap and nasty way to generate the CSS for you, though I don't actually recommend it:

1. After slicing up your document, click 'File', and choose 'Save for Web and Devices...'
2. Click 'Save in the Dialog box that appears.
3. In Format, choose HTML and Images
4. In Settings, choose 'Other...'
5. In the 2nd list menu, choose 'Slices' instead of 'HTML'
6. In the Slice Output section, choose 'Generate CSS'
7. Click 'Ok' on the top right to close the dialog box.
8. Click 'Save', and your HTML document will contain all the CSS you need.

Hope this helps,

-Lou
 
S

sethalbritton

New Member
That works. Thank you.

Not exactly what I want to do though. See if you can help me with this. If you can help me with this example it will help me understand better.


i want to position 4 div boxes exactly where I want them inside a div box.

To do this I am suppose to use top, bottom, left, and right. When I do this, the box never comes as I want it to look.

Imagine a square chopped into four equal parts with a div box holding all of them together. how would I position each of them in the div box exactly where they go.

here is what I think, but it's not working

.container { width: 50px; height: 50px; margin: 0 auto;}
.first_square { top: 0; left: 0} i need position: which one absolute, fixed, relative,static
.second_square { top: 0; left: 25}
.third_square { top: 25; left: 0}
.fourth_square { top: 25; left: 25}

<body>
<div class="container">

<div class="first_square"> </div>
<div class="second_square"></div>
<div class="third_square"></div>
<div class="fourth_square"></div>

</div>
</body>

Any help with positioning div boxes exactly where they go would help. Also, what other methods are there for positioning divs exactly where they go with out using top bottom left right? I'm most concerned with positioning with top bottom left right.

Thanks in advance.
 
Last edited:
PixelPusher

PixelPusher

Super Moderator
Staff member
If you are going to use positioning, you MUST use one of the three: fixed, absolute, or relative. Static will not work. See w3cshools.com for info about the types of position or read my sticky post at the top of this forum.

Don't use "text-align:center" to center items in a browser window. Use margin:auto (must have a defined width)

No need to use a div for each section, H1 tags are block-level items as well as lists.

Your HTML markup would look something like this:

HTML: 
<div class="header">
   <img src="leftImage.png"/>
   <h1><span></span>Heading Text</h1>
   <ul>
      <li><a href="about-us.html">About Us</a></li>
      <li><a href="contact.html">Contact</a></li>
   </ul>
</div>

HTML Explained:
The outer DIV "header" is your container. This is where you will apply you centering styles and any others you want to effect the whole header section (e.g borders, bg color, font-size, etc)

Within the "header" container you place your other items: images, headings, menus. You don't need to place all the other items in divs. Yes it would work, but why not use a tag for it intended purpose? H tags for heading, UL tag for lists (menus), IMG tags for images, and so on...

Certain tags have inherent styles, for instance divs are block level elements. Meaning they will expand, creates a automatic line break after closing tag, and also can be defined by width/height. Essentially they act as building blocks. Simple enough.

Other tags are not this way by default (SPAN, STRONG, A, etc) but can be forced to take this style. To do this you will use "display:block".

The heading tag (H1) has an empty span tag inside it and this will contain the image representation of your heading. This method is called the Gilder/Levin method. Look it up. What you are doing is covering your heading text with an image. This way you have the text content visible if a user turns of images. Best method available imo.

The image tag (IMG) will be the black block in your example. No need to wrap it in anything.

The UL tag will be your menu (navigation). Unordered lists are very versatile tags, and are excellent for menus. Each list (UL) consists of list-items (LI) and the link/anchors (A) are added into the list items.


Your CSS will be a little more complicated, but thats the way you want it.

FYI: you can use positioning here, but I think floats would be easier and a better method.
 
Last edited:
You must log in or register to reply here.
Top