thejoker101
01-29-2003, 10:22 AM
Is there any other way to horizontally align div's or span's, aside from text-align? I figure there would be, but well it slips my mind right now...
Click to See Complete Forum and Search --> : aligning div's
Stefan
01-29-2003, 10:52 AM
Originally posted by thejoker101
Is there any other way to horizontally align div's or span's, aside from text-align? I figure there would be, but well it slips my mind right now...
Spans and divs are 2 very different creatures. In fact text-aligns should NOT horizontally align a div at all (it only happens in IE due to bugs).
In any case, there are many ways to place or position bothy spans and divs with CSS. You need to be a lot more specific about what you want ikf you are interested in any meaningfull suggestions.
Is there any other way to horizontally align div's or span's, aside from text-align? I figure there would be, but well it slips my mind right now...
Spans and divs are 2 very different creatures. In fact text-aligns should NOT horizontally align a div at all (it only happens in IE due to bugs).
In any case, there are many ways to place or position bothy spans and divs with CSS. You need to be a lot more specific about what you want ikf you are interested in any meaningfull suggestions.
thejoker101
01-29-2003, 03:27 PM
I always thought that. I would figure using text-align should be used only to align text.
What I'm interrested in, for example, is center-aligning a div on a page using CSS. Is there any simple way of doing this? Aside from doing <div align="center"> which isn't CSS at all...
What I'm interrested in, for example, is center-aligning a div on a page using CSS. Is there any simple way of doing this? Aside from doing <div align="center"> which isn't CSS at all...
thejoker101
01-29-2003, 04:05 PM
<div style="width:400px; margin:0 auto;">This will be centered</div>
That's what I was thinking of....
That's what I was thinking of....
thejoker101
01-29-2003, 10:57 PM
Can anyone help me figure out how to get the top right div - the one holding the top right links - to align all the way to the right in opera7 and ns7. works in ie6 though...
this is the page:
http://www.geocities.com/manhattanseniors/17thdegree/template.html
this is the page:
http://www.geocities.com/manhattanseniors/17thdegree/template.html
Stefan
01-30-2003, 05:16 AM
Looks the same to me in IE 6.01, Opera 7b2 and Mozilla.
Could you perhaps provide screenshots that show the problem?
Could you perhaps provide screenshots that show the problem?
thejoker101
01-30-2003, 08:33 AM
Sorry guys, I got it working lastnight and never got around to posting that fact on here.
thejoker101
01-30-2003, 08:09 PM
Ok, so i decided to replace my table structure with span's and div's. Which is what I should have done in the first place, but oh well, I'm doing it now.
Anyways, in my quest to align things as I desire I have come across some simple problems that are bothering me.
this is the page i'm refering to:
http://www.geocities.com/manhattanseniors/17thdegree/template.html
Opera7 and NS7 both have a big purple box in the middle. It should be the same dim gray color as the two sections to either side. Also, NS7 has a space below the image on the left and one below the links on teh right.
Any help would be appreciated.
Anyways, in my quest to align things as I desire I have come across some simple problems that are bothering me.
this is the page i'm refering to:
http://www.geocities.com/manhattanseniors/17thdegree/template.html
Opera7 and NS7 both have a big purple box in the middle. It should be the same dim gray color as the two sections to either side. Also, NS7 has a space below the image on the left and one below the links on teh right.
Any help would be appreciated.
Stefan
01-31-2003, 12:32 AM
Originally posted by thejoker101
Opera7 and NS7 both have a big purple box in the middle.
Which is exactly what you tell them to have. In IE it's grey becuse IE is buggy with floats.
The simplest solution is to remove float:left from .topSectionBigPic
Also, NS7 has a space below the image on the left and one below the links on teh right.
This article should explain why that happens and how to fix it
http://devedge.netscape.com/viewsource/2002/img-table/
Opera7 and NS7 both have a big purple box in the middle.
Which is exactly what you tell them to have. In IE it's grey becuse IE is buggy with floats.
The simplest solution is to remove float:left from .topSectionBigPic
Also, NS7 has a space below the image on the left and one below the links on teh right.
This article should explain why that happens and how to fix it
http://devedge.netscape.com/viewsource/2002/img-table/
thejoker101
01-31-2003, 10:20 AM
I fixed the extra spacing problem, I knew that link you provided was out there somewhere, I simply forgot what it was. Thanks.
On another note. I'm still not fixing my extra purple box problem. I tried removing the float:left property and it just made the right box jump down below it.
How do i get it to just be a dim grey box? Aside from changing the background color. Putting an "empty" div in between the two floating divs won't work, I don't think anyways...
On another note. I'm still not fixing my extra purple box problem. I tried removing the float:left property and it just made the right box jump down below it.
How do i get it to just be a dim grey box? Aside from changing the background color. Putting an "empty" div in between the two floating divs won't work, I don't think anyways...
Stefan
01-31-2003, 08:50 PM
Originally posted by thejoker101
On another note. I'm still not fixing my extra purple box problem. I tried removing the float:left property and it just made the right box jump down below it.
Yes sorry, you also need to place the floated table *grump* ;) before the image to the left in the html document.
How do i get it to just be a dim grey box? Aside from changing the background color. Putting an "empty" div in between the two floating divs won't work, I don't think anyways... [/B]
The issue you have is that you are floating all content in the topdiv. That means that there is no content in it that gives it a height which makes it's height 0px high.
IE however is buggy and fails to incorrectly ignore a floated sections height.
With IE's broken implementation you can never achive some highly usefull layouts eg something like this
http://www.w3.org/TR/REC-CSS2/images/float2p.gif
Anyway, the solution it to make sure the div have some non floated content to give it height.
BTW you have an error on your page (that should show up in the w3c validator also)
<span class="topRightLinks">
<table
You can NOT have a table in a span. In fact there is no reason why you can't just remove the span all togheter and put your class directly on the table (which you shouldn't be using anyway ;) )
On another note. I'm still not fixing my extra purple box problem. I tried removing the float:left property and it just made the right box jump down below it.
Yes sorry, you also need to place the floated table *grump* ;) before the image to the left in the html document.
How do i get it to just be a dim grey box? Aside from changing the background color. Putting an "empty" div in between the two floating divs won't work, I don't think anyways... [/B]
The issue you have is that you are floating all content in the topdiv. That means that there is no content in it that gives it a height which makes it's height 0px high.
IE however is buggy and fails to incorrectly ignore a floated sections height.
With IE's broken implementation you can never achive some highly usefull layouts eg something like this
http://www.w3.org/TR/REC-CSS2/images/float2p.gif
Anyway, the solution it to make sure the div have some non floated content to give it height.
BTW you have an error on your page (that should show up in the w3c validator also)
<span class="topRightLinks">
<table
You can NOT have a table in a span. In fact there is no reason why you can't just remove the span all togheter and put your class directly on the table (which you shouldn't be using anyway ;) )
thejoker101
02-03-2003, 10:16 AM
Ok, I've made a few adjustments, such as removing the useless div that surrounds both top spans. I've also changed the table structure to use div's, which for some reason I never got around to doing.
I resolved the center "purple" box by having the the two span have a 50% width each and aligning the contents of each span to the respective far side, i.e. left span has contents aligned to the left.
Right now I know I'm missing something simple, but in IE6 there is a break between the two spans, otherwise it would be perfect. In NS7 and (I think opera7) there is no break between the spans, but the right side links are aligned to the left instead of the right.
Sorry to continually bother people with my problems, but some days my brain just will not work.
I resolved the center "purple" box by having the the two span have a 50% width each and aligning the contents of each span to the respective far side, i.e. left span has contents aligned to the left.
Right now I know I'm missing something simple, but in IE6 there is a break between the two spans, otherwise it would be perfect. In NS7 and (I think opera7) there is no break between the spans, but the right side links are aligned to the left instead of the right.
Sorry to continually bother people with my problems, but some days my brain just will not work.
thejoker101
02-05-2003, 03:02 PM
Still baffled by this...
Stefan
02-06-2003, 04:52 AM
Originally posted by thejoker101
Still baffled by this...
Opps sorry, missed this post.
I'll look into it a bit more tomorrow if noone has beaten me to it until then (I'm not at my own comp currently and can't play around with different browsers as I would like to)
Still baffled by this...
Opps sorry, missed this post.
I'll look into it a bit more tomorrow if noone has beaten me to it until then (I'm not at my own comp currently and can't play around with different browsers as I would like to)
Stefan
02-06-2003, 10:28 AM
Try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The 17th Degree - Title Here</title>
<link rel="stylesheet" href="template_files/style.css" type="text/css">
</head>
<body>
<div style="background-color: rgb(105, 105, 105); height:169px;">
<img src="template_files/17thDegree12.jpg" alt="Welcome To The 17th Degree" style="float:left;">
aaaaa
</div>
</body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The 17th Degree - Title Here</title>
<link rel="stylesheet" href="template_files/style.css" type="text/css">
</head>
<body>
<div style="background-color: rgb(105, 105, 105); height:169px;">
<img src="template_files/17thDegree12.jpg" alt="Welcome To The 17th Degree" style="float:left;">
aaaaa
</div>
</body></html>
thejoker101
02-24-2003, 06:45 PM
I finally got back to working on this, damn school...
Anyways, I can't get the links to move over to the right...
http://www.geocities.com/manhattanseniors/17thdegree/template.html
any help?
Anyways, I can't get the links to move over to the right...
http://www.geocities.com/manhattanseniors/17thdegree/template.html
any help?
celebguy_dv
03-04-2003, 03:13 AM
http://banners.dollarmachine.com/pic/2014000/hal001.gif (http://www.kinkyceleb.com/1261795520)
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.
Copyright Internet.com Inc., All Rights Reserved.