DaniWeb IT Discussion Community - HTML and CSS

How to make this layout using tableless Divs

suchiate — Thu, 15 May 2008 08:55:25 GMT

Hi guys,

Please refer to my attachment, I am really facing problems trying to make this layout tableless.

1. The top of the right content box will overlap the Banner Picture
2. Te Left Content will have shading on top and shading at the bottom as background
3. The footer will automatically append to the bottom of the Left and Right Content box.

Currently, I am facing problem due to the fact that, i do absolute positioning on the main divs such as banner, header, right container, left container, so when i place a separate div as the footer after loading the left and right container, the footer appears at the top of the page instead of below the left and right container i think it's because i do absolute positioning.

If I dont do absolute positioning, how can I perform the effect of overlapping of right content box over the banner?

Lastly how should I design the left container to always have the shading background at the top and bottom of the contents, without hardcoding per page. I want the Left container to populate as long as possible when contents are entered into it with the middle parts as white background and as it is ending, insert the bottom shadow.

Please help me out on this, Thank you very much.

Attached Images

1.jpg (56.5 KB)

what's the best css books?

trient — Wed, 14 May 2008 05:01:17 GMT

hi,
Any suggestions for learning css from books? Suggestions on great css books for newbie?

How to make flash slideshow?

xwzjgdzg — Tue, 13 May 2008 09:15:24 GMT

This is an instruction for creating a stunning flash slideshow with background music and special transition effects. With the aid of the following program, you can also add nice looking animated slide show to your website in a few seconds, and then share those memorable photos with your family or friends. The output format of the following program is SWF file.

(1) Download Flash Slideshow Maker Professional from this website and install. If you don’t mind the advertisement slide at the end of the slideshow, you can use this program as free software. After you register this program, the advertisement slide will be removed.
Bellow is the interface of the program:

[IMG] http://hk.any-video-converter.com/im...sm/guide00.jpg [/IMG]

(2) Adding photos to the slideshow:
Click Add button on the toolbar to select photos from file browse pane. Press Ctrl or Shift key to select multiple photos at one time and add selected photos to the album. You can also simply drag photos from the photo displaying panel and drop them to the slide panel.

(3) Editing photos
Double-click the selected slide or select a slide and then click Edit button on the slide toolbar. You will see a pop-up window. You can input info, add text & art clip to your slide.

[IMG] http://hk.any-video-converter.com/im...sm/guide01.jpg [/IMG]

(4) Apply transition effect
Click Transition Effect tab to apply transition effect to your slides. You can apply transition effect by simply dragging your desirable one from the Transition Effects panel and dropping to the slide below. You can set the transition duration and photo duration here. The maximum duration time for transition and photo is 10seconds and 15senconds respectively. You can also click Define Random Set button to check the transition effects in the pop-up window, then those checked transition effects will be applied to your slides randomly. One thing is needed to remind you here: the 53rd and latter transition effects, such as Fade in and Fade to Black, can only be used in advanced themes.

[IMG] http://hk.any-video-converter.com/im...sm/guide02.jpg [/IMG]

(5) Enter properties
Click Properties tab, and then click slide in the slide list, then input title and description in Title and Description text boxes respectively, afterwards click Apply to Selected or Apply to All tab. Insert URL, then click Check Valid tab to see whether it is valid or not.

[IMG] http://hk.any-video-converter.com/im...sm/guide03.jpg [/IMG]

(6) Select Basic or Advance Theme for the slideshow
a. Choose Basic Theme
Here, you can enter your album title, change the Width and the Height, select Background color and transition & photo duration, and define the Frame Rate as well. And you can set auto-play and auto-repeat option here. More than 57 professional-looking slideshow themes, together with several photo decorations are provided for your selection.

[IMG] http://hk.any-video-converter.com/im...sm/guide04.jpg [/IMG]

Click More Options, you will see a pop-up window, and you can set more flash options, like photo URL link and output folder setting, music sample rate and music quality, image size etc.

[IMG] http://hk.any-video-converter.com/im...sm/guide05.jpg [/IMG]

b. Customize Advanced Theme
If you need to customize the theme in terms of size, color and other settings, simply click advanced tab, and then select one of your favorite themes under category.

[IMG] http://hk.any-video-converter.com/im...sm/guide06.jpg [/IMG]

Click Customize Properties button and you will see all settings for this theme.
The following are settings that you can change.

[IMG] http://hk.any-video-converter.com/im...sm/guide07.jpg [/IMG]

After you complete your changes to the settings, please click Save As button and your modified theme will be automatically saved.

No matter you use basic themes or advanced themes, you can easily add background music for the slideshow. You can also import audio tracks as background music from CD.

(7) Choose output format
There are three output options under the Publish page. If you just want to create a flash slideshow, you can just check Create Flash Files Only. Click Publish Now and your creative slideshow will be published according to your setting at once. If you want to burn your slideshow onto a disc and make it into a backup CD or a gift CD, please check Making a Gift Disc, and choose your CD/ DVD recorder and set the recording speed, Then click Start Burn to burn your slideshow onto a DVD/VCD at once.

[IMG] http://hk.any-video-converter.com/im...sm/guide08.jpg [/IMG]

If you want to share your slideshow with friends, you can check Creating Flash Files and Upload to SkyAlbum. Then click Publish Now to publish your slideshow at once. After the slideshow published into flash, it will be automatically upload to the SkyAlbum if you have logged in. If not, please just create your SkyAlbum ID and share your slideshow online. You can choose to View Upload Log and you will see the URL link of your uploaded slideshow at once. Click the link and you can enjoy your flash slideshow on SkyAlbum immediately.

Open all external links with a frame

MaxMumford — Mon, 12 May 2008 09:52:48 GMT

Hi guys,

Wasn't too sure which forum to put this in as im not sure what kind of script would be used, but this is what I want to be able to do:

Have some kind of script that makes any external link on my website open the link and have a frame with my content at the top (like when you find an image using google images search and theyr frame is at the top.)

Thanks for your time =]

Max

Span class with different link properties

Borderline — Sat, 10 May 2008 16:13:46 GMT

I have attempting a small navigation system to show each page in my photo albums. I am attempting block links (coloured backgrounds, which change when the mouse hovers over them).

The page I'm working on is: http://www.equinefocus.co.uk/personal/gallery2.php

I achieved the look I wanted with the 1-4 links at the top of the page, but unfortunately, the thumbnails were affected too. I have attempted adding a span class so that the only links affected were the 1-4 ones, but it hasn't worked.

My HTML code:

My CSS Code:

span.links {

        a:link {

        color: #000000;

        background-color:#99ccfb;

        border: 1px solid #000000;

        padding: 5;

        text-decoration:none;}



        a:visited {

        color:#000000;

        background-color:#c0c0c0;

        border: 1px solid #000000;

        padding: 5;

        text-decoration:none;}



        a:hover {

        color:#FFFFFF;

        background-color:#b90dbe;

        border: 1px solid #000000;

        padding: 5;

        text-decoration:none;}

        }

Any thoughts on where I'm going wrong?

HTML prob - firefox and ie...

devi123 — Fri, 09 May 2008 16:29:30 GMT

Hi there,

New here and have a weensy problem. I am in the middle of putting together a site:

www.wleigh.co.uk/smarties/press_test.html

It shows up fine in firefox and safari, but the nav links on the left all spread out in IE. I have tried the margin/padding set to 0 for all css styles but no luck.

The second problem is probably a lot simpler - after they have been clicked the links no longer change when hovered over.

The css file:

http://www.wleigh.co.uk/smarties/smarties.css

Thanks for your help.

Dreamweaver developed site not working

designunltd — Thu, 08 May 2008 23:39:34 GMT

If this has been asked and solved before then accept my apologies as I'm very new to this. I'm building a site using DW and don't use code at all. Everything looked fine on my machine but on other machines the screen seemed to resize and scroll-bars appeared - any idea why?

I put in a series of dropdown menus using Spry features - all worked fine. Then seemingly for no reason (I know there must be) the drop down menus seemed to convert themselves into a what could best be described as a bulleted list. I switched over to the code and have cut and pasted what was highlighted when I did that. Any help would be really appreciated.

thanks

 class="MenuBarHorizontal style1" id="MenuBar1">
          
 class="MenuBarItemSubmenu" href="#">About Us

href="Aboutus.html">Our Team

href="Missionstatement.html">Mission Statement

href="Literature.html">Literature Download

href="Feedbackformpage.html">Feedback Form

href="careers.html">Careers

href="#" class="MenuBarItemSubmenu">Our Services

href="Pensions.html">Pensions

href="Investments.html">Investments

href="Mortgages.html">Mortgages

href="Insurance.html">Insurance

href="Taxation.html">Taxation

href="Section481.html">Section 481

href="Newspage.html">News

href="#" class="MenuBarItemSubmenu">Useful Links

href="LifeCompanies.html">Life Companies

href="http://www.financialregulator.ie/">Financial Regulator

href="http://www.pensionsboard.ie/">Pensions Board

href="http://www.bloomberg.com/">Bloomberg

href="http://www.ise.ie/">Irish Stockmarket

href="http://www.revenue.ie/">Revenue

href="http://www.financialombudsman.ie/">Financial Ombudsman

href="ContactUs.html">Contact Us

href="IndexHC.html">Home

Font doesn't match in IE & FireFox

81griffinIT — Thu, 08 May 2008 19:46:42 GMT

I'm putting together a site HTML and CSS.

I cannot find a font that looks the same in IE as it does in FireFox. I pretty new at this but is that a common problem?

I've tried several different fonts, sometimes 5 letters go across and the last one goes underneath(but only in fox not IE, IE it looks perfect. ) One was english in firefox and symbols in IE.

Mostly it basically looks larger in fox than in IE

Also i'm using Nvu to put this together.

Any Idea's on what i'm doing wrong.

thanks

Do you know any good contact form script

mary81 — Thu, 08 May 2008 11:54:33 GMT

I need a simple contact form for my website, but I want some defence against spam. Like a Chapta or something.

javascript inside css

nishanthaMe — Thu, 08 May 2008 06:49:08 GMT

can we use javascript inside css classes, Because I want to get the browser window width to the css width atribute.

Thanks

div box with vertical scrollbar and hoizontal wrap

MaxMumford — Wed, 07 May 2008 18:19:16 GMT

Hi all,

I need to know how to be able to make a div box with a fixed width and no horizontal scrollbar, and stretchable height with vertical scrollbar.

It should be quite a simple thing to do but i cant do it for some reason.

Thanks guys =]

Max

HTML code for a freight calculator?

dogondoor — Wed, 07 May 2008 14:10:29 GMT

Hi to all forum members ,

I'm building a site for an air freight company and wondered if anyone out there has some html code for a freight calculator. The 5 fields i need are

KG
Length
Heigtht
Width
Destination Airport

I need to be able to enter predefined values dependant on the destination airport.

Any help would be very welcomed !!!!

Embedding Media Player with CSS

sheepmage — Wed, 07 May 2008 04:02:36 GMT

I'm trying to find code to embed a media player via CSS. Could someone help me please?

Web Design

colerainescotty — Tue, 06 May 2008 20:17:09 GMT

I will help anyone with getting a website designed full service

Questions welcome too ?

:pretty:

reqest: need help with my CSS

OMorchoe — Tue, 06 May 2008 09:31:06 GMT

Hi folks!

I am desperatly looking for some help.

While I can apply some small code snippets, or edit some easy parts in php or html, I am completely lost, as soon as it gets complicated with code. Especially at stylesheets.

I designed my own theme my WordPress Blog.
For several days now, I tried to work out the CSS for it. I'v read many webpages on the subject, tried it in WP itself, on an emulated server on my computer and even with Dreamweaver. But it just doesn't work out the way it should be.

I want to utelize the new WP 2.5 function on themplate-hirarchy to call upon the proper template, depending on what type of page you are looking for.
I would like to work with div-tags, containers and z-layers. Because there are several text-boxes, which are shifted a little bit.

Maybe someone could help me out here?
All I need is the CSS and an empty template for the div-tags (if you can add the condition for the WP template-hirarchy too, it would be lovely, but I can try figuring that out myself), so I know where to place which one.

I prepared a visual design aid, that shows all elements of the site:
http://www.rpg-community.com/admin/pagecsssettings.jpg

The site has a main-part, which is centered. The backgroundcolor of the site is: #231D29

The centerpart consists of many elements.
There is a picture as a background. Then there are several parts (i am calling them blocks), depending on what type of site is viewed. Every element inside a block is positioned in reference to the background/secondary-layer image of the block.

A regular page would show the BGIMG-Block, several Text-Boxes (TextBox1-5) for date, title, autor, some random quotes and the main-text. Below that is some y-repeated graphic (RIMG) depending on the length of the main-text shown. And it ends with the footer, that includes a link/button(CBIMG).

Thus a standard page is:
[BGIMG-Block + RIMG] + [FIMG]

It gets a little bit more complicated, as soon as it's a category (eg News) or if there are comments.

If its a Blog/Category with chronological postings, it starts out the same as a standard page (BGIMG-Block), then there is a graphical text-wrap that seperates one post visually from the other.
Every wrap holds an info-text-box (TextBox_a), link/button (CBIMG) to comments of that post, and date-, autor- and title-boxes, followed be the text-block (TextBox_b-e) of the post.
The text-area again is filled in the background with the 1px-line (RIMG) as necessary.
This block-set is repeated as needed, for each post.
After the last post the Info-footer-image (IFMG) with the info-text-box is inserted, followed by the actual footer.

So a category with three posts would be made of:
[BGIMG-Block + RIMG] + [Wrap-Block + RIMG] + [Wrap-Block + RIMG] + [Wrap-Block + RIMG] + [IFMG] + [FIMG]

Comments are not shown automatically. They are accessible through a link/button.
The comment-version of the site also starts off with the BGIMG, followed by an IFMG and the comment-blocks.
The whole comment-block is made out of three parts.
Each comment has its own block (CIMG_1/CIMG_2). The text-areas are more to the left on even comments and more to the right for uneven comments. Either one has a info-box (TextBox_a1/a2) for the name & url of commentator and a main-text area, where the actual comment is shown (TextBox_b1/b2). This repeates until there're no more comment. What follows next is the comment-enter-block. Where users can add comments. If the user is registered, its the ECIMG_1-block - which has one text-block (TextBox_EC) and an area to enter the comment (EC_1Form4). If the user is unregistered, it's the ECIMG_2 Block, which has four areas, where text can be entered (EC_2Form1-4). And at the end is the footer FIMG again.

So a post, with 5 comments, viewed by an unregistered user, would be made of:
[BGIMG-Block + RIMG] + [IFMG] + [CIMG_1] + [CIMG_2] + [CIMG_1] + [CIMG_2] + [CIMG_1] + [ECIMG_2] + [FIMG]

A post, with 1 comment, viewed by registered user, would be made of:
[BGIMG-Block + RIMG] + [IFMG] + [CIMG_1] + [ECIMG_1] + [FIMG]

The Button in the footer always show the appropriate button. On a normal page or at a post, it would be a button, that links to the comments. Viewing the comments, there would be a submit-button for an entered comment.

I thought it might be helpful to have all data in text-format as well, so here is a list of all elements and their properties (as far as I know them). You might have to add more. But that's the reason, I am looking for help ;)

ALL: centered; w:766px;

BGIMG-Block:
- BGIMG: w:766px; h:100%

- LIMG: w:115px; h:100%; top:147px; left:9px

- Sidebar: w:115px; h:100%; top:147px; left:9px

- HIMG; w:583px; h:208px; top:155; left:150

- TextBox1: w:137px; h:23px; top:168px; left:582px
Text: centered/centered, weight:500, Arial, size:10, color:#232323

- TextBox2: w:203px; h:43px; top:233px; left:163px
Text: centered/centered, weight:600, Arial, size:12, color:#191919

- TextBox3: w:312px; h:68px; top:269px; left:379px
Text: centered/centered, weight:400; italic, Arial, size:10, color:#232323

- TextBox4: w:135px; h:30px; top:316px; left:168px
Text: centered/centered, bold, Arial, size:10, color:#232323

- TextBox5: w:531px; h:100%; top:369px; left:176px
Text: weight:500, Arial, size:11, color:#232323

- RIMG: w:766px; h:1px; y-repeat;

END ---

WIMG-Block:
- WIMG: w:766px; h:388px;

- TextBox_a - w:387px; h:57px; top:20px; left:167px
Text: centered/centered, Arial, size:9, color:#232323

- CBIMG: w:159px; h:29px; top:76px; left564px;

- TextBox_b - w:140px; h:29px; top:196px; left:581px
Text: centered/centered, weight:500, Arial, size:10, color:#232323

- TextBox_c - w:140px; h:29px; top:215px; left:157px
Text: centered/centered, bold, Arial, size:10, color:#232323

- TextBox_d - w:223px; h:47px; top:254px; left:292px
Text: centered/centered, weight:600, Arial, size:12, color:#191919

- TextBox_e - w:531px; h:100%; top:319px; left:176px
Text: centered/block(or left), weight:500, Arial, size:11, color:#232323

- add RMG- and WIMG-Blocks as needed

- IFMG: w:766px; h:92px;

- TextBox_a - w:387px; h:57px; top:15px; left:170px
Text: centered/left, Arial, size9, color:#232323

END ---

CIMG-Blocks:
- IFMG: w:766px; h:92px;

- TextBox_a - w:387px; h:57px; top:15px; left:170px
Text: centered/left, Arial, size9, color:#232323

- CIMG_1: w:766px; h:79px;

- TextBox_a1 - w:177px; h:34px; top:15px; left:522px
Text: centered/centered, Arial, size9, color:#232323

- TextBox_b1 - w:409px; h:100%; top:59px; left:310px
Text: centered/block(or left); weight:500, Arial, size10, color:#232323

- CRIMG_1: w:766px; h:8px; y-repeat (for lenght of text)

- CFIMG_2: w:766px; h:42px;

- TextBox_a2 - w:177px; h:34px; top:15px; left:183px
Text: centered/centered, Arial, size9, color:#232323

- TextBox_b2 - w:409px; h:100%; top:59px; left:162px
Text: centered/block(or left), weight:500, Arial, size10, color:#232323

- CRIMG_2: w:766px; h:8px; y-repeat (for lenght of text)

- CFIMG_2: w:766px; h:42px;

- ECIMG_1: w:766px; h:340px;

- TextBox_EC - w:205px; h:27px; top:149px; left:514px
Text: centered/centered, Arial, size9, color:#232323

- EC_1Form1: w:519; h:137; t:203; l:183

- - OR - -

- ECIMG_2: w:766px; h:340px;

- EC_2Form1: w:183; h:28; t:117; l:358

- EC_2Form2: w:183; h:28; t:150; l:527

- EC_2Form3: w:150; h:28; t:162; l:213

- EC_2Form4: w:519; h:137; t:203; l:183

FIMG-Block:
- FIMG: w:766px; h:131px;

- CBIMG: w:159px; h:29px; top:30px; left564px;

END---

Last but not least, there is one more version. Its for the front-page of the site.
It uses a different BGIMG and lot less text-boxes. Actually there is only one - the main-text area. Its more or less the welcome site.

Here is the link to the visual aid of it:
http://www.rpg-community.com/admin/c...ingsfrontp.jpg

I renamed every part (if its a different one), so that everything can be put into the same stylesheet.

I am also adding a zip file to this post, with all the elements (named like the elements in the visual aid) as dummy graphics, like they would appear on the site, so you can try it. And I have added each possible version with the dummy graphics as jpgs for reference.

The file: http://www.rpg-community.com/admin/csshelp.zip

As you can imagine, all this took me quite a while to put together. So I am surly not the lazy type and if I could handle code properly, I might not be needing to to all this, but would do the css myself (which would not even take a 10th of the time for someone, who can code and is familiar with stylesheets). So I really hope, that someone might be kind enough to put it all together in a working manner.

Thank you very much in advance!