CSS > A few tips needed.

by Neodism

Posted: 11 years ago 3 replies

WEB DESIGN

I am trying to take my sliced up PSD and put it together using CSS DIVs in Dreamweaver. I'm trying to do this so that everything's not a damn image, the load time is better, it's easier to edit, etc. All the basic reasons that you'd rather use DIVs than tables and not an image based website.

So here I am. I have my header in place. Got the navigation put in right below it and it was coming along quite nicely. But then I ran into a dilemma.

--The tutorial I am learning from isn't showing me how to add text, an image and a video over a div layer. The div layer can't just have a background color. I have an actual image that needs to be there. I need this background image to be in place, then I need to be able to put my 'click here to chat' button, text, header, and video on top of it right where it all is in the image. (Click here to see what I'm actually working with. This link is the site as it stands now with tables. I'm trying to convert it to CSS DIVs, obviously. See where it says "Take control of your life." That's the area I'm trying to work with right now.)

I went back into Photoshop and took out the video box, chat button and text so that I could add them in on top of the layer itself. But now I can't seem to figure out how to do so.

#&gt #> #css #needed #tips

Julie Parish 11 years ago

[DELETED]

{{ DiscussionBoard.errors[5194257].message }}
- Neodism 11 years ago
  
  Originally Posted by Julie Parish
  
  Looks like you got it to work. It's a great site, looks very well done and interesting.
  
  -_- No, I did not get it to work. No one has replied... I am an amateur to web design and even I can tell that the site that I link to, while looking exactly as I wish it to look, does not function solely on CSS and DIV layers.
  
  I've got it to work a little bit. I've got the text positioned above the background image on the "Take control of your life" part, but now I need to find out how to position the 320x240 box over the other half of that DIV-background so that at a later point, when I finish the video, I can add the video there.
  
  Thanks
  
  Signature
  Free Web Design from Neodism.
  
  {{ DiscussionBoard.errors[5194357].message }}

Istvan Horvath

11 years ago

HTML:

<div class="larches">
<div class="text-container">
<p>whetever text with all kind of custom formatting...</p>
<p>...</p>
</div> 
<div class="tv-box">
video code will come here
</div> 
</div> 

CSS:
Warning: this is just an example without testing it, you should play with the values!

.larches {
background: #XXX url(images/bg.jpg) top center no-repeat;
width: 1000px;
}

.text-container {
float: left;
width: 600px;
}

.tv-box {
float: right;
width: 400px;
}

------------------
Notice the width of the two smaller divs shouldn't be bigger than the container div (600+400=1000)... probably because of margins, borders etc. should be even less by a few pixels...

I hope this gives you some directions!