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  2586 
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.css">
<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:white">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.
Hi,
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.
Set margin and padding to 0.
2)I need to align the 4 text links next to the images on the left and am not sure how to do this
Remember that Images are inline elements. So, float the image to left ( u already did that ) and specify it's width. Then, put the text between <p> tags.
[HTML]<a href="sadie.html" onMouseOver="document.tg.src='images/topguy2.jpg'" onMouseOut="document.tg.src='images/topguy.jpg'">
<img src="images/band_l.jpg" alt="" width="100"><p>Shows</p></a>[/HTML]
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...
|
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...
|
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...
|
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. ...
|
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...
|
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...
|
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...
|
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...
|
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...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
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,...
|
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...
|
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,...
|
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...
|
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...
|
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...
| |
