sigh...hope you can help me figure...

User 1627699 Photo


Registered User
3 posts

Hi there,

I'm using the HTML Editor 2010 and trying to slog through building a site for my sister in law according to the design she would like to have. I know HTML and I am SLOWLY learning CSS but I can't quite solve this problem and hope you may help before all hair is torn from my head. ;-)

I have a fixed background image -- and that works!

Say that background image fills 100% of the browser window's viewable space, ok?

Well, over (on top of) that image I'm trying to center a box that hopefully floats, that takes about 80% of the browser's window and that has a 2px neon green border...

Then....inside that box:

(1) I want the box's background to be a forest green then
(2) I want there to be (top left) her logo (a jpg) and (top right) her picture (another jpg) with
(3) a roll-over style menu bar aligned right under the logo/picture and
(4) the content of the website under that....

I'm attaching a Paint file that is trying to illustrate what I've just explained...hoping it helps.

I've tried using a table with two (then 3) cells and a single row to contain the logo and picture but then the box didn't "work" right... no inside-box-forest-green background and regardless, no 2px border on the box.

Any thoughts on what I might try besides a redesign? :/

THANK you so VERY much!!!
Attachments:
User 364143 Photo


Guest
5,410 posts

Why don't you give this a go? It will serve you well. :)

http://www.coffeecup.com/designer/

CoffeeCup... Yeah, they are the best!
User 131437 Photo


Ambassador
151 posts

You are on the right track. Everything you want to do is what CSS was invented for. By the way HTML5 has deprcated the use of tables for placing/aligning content encouraging div tags instead. Which for a lot of the old guard is a total bummer, eh?

Hopefully this will get you started:


<div style="width: 300px;
position:fixed;
top:100px;
right:250px;
color: #FF9900;
border-style:solid;
background: #008000;
border-width:2px;
border-color:#00FF00;">
<br />Some Stuff here<br /><br />
</div>


Remember that div elements can be inside another div element. I'll let you take it from here.
Visit <a href="http://leviabbott.com" target="_blank">LeviAbbott.com</a>!
User 364143 Photo


Guest
5,410 posts

I ran that code through my editor and have to say it looks nothing like the image Gayle posted.
CoffeeCup... Yeah, they are the best!
User 364143 Photo


Guest
5,410 posts

This will get you started if you don't want to use VSD.
Attachments:
CoffeeCup... Yeah, they are the best!
User 271657 Photo


Ambassador
3,816 posts

Tom, I think your suggestion is very good! Gayle, give Visual Site Designer a try. You' ll be able to get your design just the way you want it - quick and easy. Then you can work on learning css, etc... without the pressure of getting this site done. Plus, you can look at the code for the site (once it's live) and see how the css is used in your layout. :)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 38401 Photo


Senior Advisor
10,951 posts

Just make sure to ignore the rest of the code for learning purposes, cuz omg the code from VSD is definitely not normal HTML. IT works great though, not dissing it in any way, just saying don't use that as guidelines for HTML, just use it for the CSS learning :)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.