Hey everybody. I am trying to convert a website that was built using tables into one with using div tags. Not as easy as i thought. Heres the site http://www.jeanneflight.com/JF -- CSS layout http://www.jeanneflight.com/JF/tables -- table layout
My problems relating to first link:
1 Internet explorer crashes
2 The background image for the second div does show up
3 Alignment: The First Div contains 3 images. In the css file I needed to add border = 0px; otherwise the image at the top would be placed on the complete right side of the page, and the text underneath the banner on the complete left side. The second div should be beneath the first though the images are not a complete line beneath one another.
Any other helpful comments on how to approach this code would be appreciated.
Thanks,
Shawn
10  2640 
HTML/CSS does not make any browser crash. If IE is crashing, it's doing it on its own.
If you want to declare xhtml then you should use xhtml and not an older, deprecated form of html. So validate your html and css for that list of errors and when I wake up in the morning I might have time to play with this. :)
Thanks, im using dreamweaver as a code editor and it through the xhtml automatically, i switched to transitional and the code is validating. Though i still am having the error with the image alignment
I made a little more progress.
I created a div(class=bg) which holds the background image. Nested inside this are 2 divs, menu and content.I want to have them side by side inside of the div(class=bg). Instead they are stacking above one another.
With firefox my background image does not appear (works in safari).
Also, Should i be using XHTML, Strict, or Transitional? Transitional seemed to removed my errors for validation, and strict removed most except for the align="" attributes. Would i be expected to know one over the other in a professional environment?
Hi,
I made a little more progress.
I created a div(class=bg) which holds the background image. Nested inside this are 2 divs, menu and content.I want to have them side by side inside of the div(class=bg). Instead they are stacking above one another.
add float:left to div.menu and it should work.
Also, Should i be using XHTML, Strict, or Transitional? Transitional seemed to removed my errors for validation, and strict removed most except for the align="" attributes.
Any new web pages should be created using Strict DTD. It's more solidly future-proof. Transitional allows deprecated elements in the markup such as font and align.
HTH,
Rawan.
This simplifies things a bit.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet " type="text/css" href="layout.cs s">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Jeanne Flight</title>
</head>
<body>
<div class="top">
<img src="2_files/topguy.jpg" alt="" id="top-guy">
<img src="2_files/top.jpg" alt="">
<img src="2_files/jf.jpg" alt="" id="jf">
</div>
<div class="bg">
<div class="menu">
<img src="2_files/band_l.jpg" alt="">
<img src="2_files/dl_l.jpg" alt="">
<img src="2_files/pic_l.jpg" alt="">
<img src="2_files/merch_l.jpg" alt="">
</div>
<p style="color:wh ite">Content Here</p>
</div>
</body>
</html>[/HTML] -
body{
-
margin:0 auto;
-
width:850px;
-
background-color:#000
-
}
-
div.top {
-
width:850px;
-
height:170px;
-
border-color:red;
-
border-style:solid;
-
}
-
#top-guy{
-
float:right;
-
}
-
#jf{
-
float:left;
-
}
-
div.bg {
-
width:850px;
-
background-image:url(images/bg.jpg);
-
background-repeat:no-repeat;
-
height:530px;
-
z-index: 1;
-
border-color:#FF9999;
-
border-style:solid;
-
}
-
div.menu {
-
float:left;
-
width:250px;
-
height:500px;
-
z-index: 2;
-
border-color:#33CC00;
-
border-style:solid;
-
}
-
.menu img{
-
clear:both;
-
float:left;
-
}
-
-
Thanks, its alot closer to what im looking for. I think i understand most of the changes. Im assuming this centers the content with a width of 850px: - body{
-
margin:0 auto;
-
width:850px;
-
background-color:#000
-
}
I put some space between the 4 menu images, though i'm sure there is a better way to approach that as well.
Also, the background image is still not appearing in firefox.
If you get a chance and could take a look at the bgimage problem as well as some advice on the 4 images i would appreciate it.
Thanks for all your help, i think I'm learning something.... slowly :)
Fixed the background image!!!
One more thing i noticed, there seems to be a space between the banner and the image that says jeanne flight underneath. I tried a few things border:none margins:0px; padding:0px; none of these seem to work.
Welcome back,
i think I'm learning something.... slowly :)
Noooo. You’re getting better every day.
Fixed the background image!!!
GREAT! GOOD WORK!
One more thing i noticed, there seems to be a space between the banner and the image that says jeanne flight underneath. I tried a few things border:none margins:0px; padding:0px; none of these seem to work.
Add this, - #banner
-
{vertical-align:bottom;}
-
<img src="images/top.jpg" alt="" width="850" height="100" id="banner" >
Keep up the good work,
Rawan.
Thanks, that fixed that problem. I am almost finished with the layout just a couple more questions.
1)The top div and 2nd div do not seem to be aligning correctly. The faded yellow line should be closer (up) to the image that says jeanneflight. If i add a border to the divs they align correctly. Without the border they will align if there is enough content to squish them together. Check out the photos page vs the other pages.
2)I need to align the 4 text links next to the images on the left and am not sure how to do this.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Mariusz Jedrzejewski |
last post by:
Hi,
I'll be very grateful if somebody can explain me why my Opera 7.23
(runing under linux) doesn't show me inner tables. Using below code I
can see only "inner table 1". There is no problem with other browsers
(I checked it under Konqueror).
Thank you in advance for your help.
Regards.
/Mariusz
<HTML>
|
by: Millissa |
last post by:
If someone can help me with examples of or info on how to create an advanced
tables for the layout on my site, I would be very grateful!
Thanks,
M
|
by: lostinspace |
last post by:
Hello,
My sites were created primarily with tables as layout. :-(
I have two page designs which I used frequently and hopefully somebody can
provide some insight as to whether its best to remain with tables in CSS or
use an alternative.
The first page:
http://www.mi-harness.com/hof/0a0.html
Is part of a frames section, with 17 such pages A-Z. It is my desire to have
|
by: Mason A. Clark |
last post by:
CSS Experts:
OK, I'm a stupid newby. Now, here's the question:
Can CSS replace slightly complicated Tables and work in three
browsers (e.g. MSIE 6.0, Net 7.1, Op 7.03) ?
After countless attempts I've concluded "no".
Thank you,
|
by: Toronto Web Designer |
last post by:
Heya,
I'm curious to know if there are any programs that convert HTML tables to a
CSS layout. I already have a good handle on CSS but I'm always on the
lookout for other ways of doing things. :-)
Cheers.
| | |
by: glutinous |
last post by:
I've looked at manuals and experimented until my brain's oozing out of
my ears, and I still can't figure out what I anticipate will prove to
be fairly basic css layout knowledge.
I'd be amazed if this was the first (or even if only the 100th) time
someone has asked about this sort of situation. So I apologise, not
least for the awkwardness of my attempt below to illustrate my
ignorance.
I could produce a table such as this...
|
by: Alan Silver |
last post by:
Hello,
I understand the issue that tables should be used for tabular data and
not for layout, but I would like some clarification as to exactly what
constitutes tabular data.
For example, if I have a form, in which the user is required to fill in
various bits of information, then laying out with a table makes it easy.
A basic example...
|
by: phil-news-nospam |
last post by:
In followups by Brian O'Connor (ironcorona) to other posts, he repeats
the idea that using tables in CSS is not something that should be done
because IE doesn't support it. Of course I'm not happy about the fact
that IE doesn't support CSS tables. But what can one do about that?
And tables of one type or the other are needed in some cases (regardless
of whether some people feel it is appropriate or not). So the issue I
and considering...
|
by: Simon Dean |
last post by:
Duh...
Not another one...
Hopefully simple though, I hate the way *I* (and it might be a CSS
trait) can't intermix fixed width divisional elements with a variable
auto expanding div???
The great thing I loved with Tables, was being able to say:
|
by: brave1979 |
last post by:
Please check out my javascript library that allows you to create any
layout for your web page, nested as deep as you like, adjusting to
width and height of a browser window. You just describe it in
javascript object and that's all. No need to know CSS hacks, no need
to clutter your html with tables.
http://www.bravelayout.scarabeo.biz/Quickstart
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| | |
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
| | |
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
