PDA

View Full Version : CSS Alignment Problem...?

LuvinVanessa4
04-14-2004, 04:00 AM
K, I'm having a hard time trying to figure this out I though it would turn out alright seeing as before I added the pic in the alignment was great, but it changed right after I added the main image at the top in. I want it to where its that 3 column css with the header as a image. Could someone possibly tell me how what I did wrong? Also is their a way that I could get a footer too at the bottom of my page? lol And another quest how I have it set up in the middle column how would I go about making it to those things the date and the time are on the same line but one is aligned left and the other one is aligned right? Here's the link to my page http://www.geocities.com/ademainvasion/main4.htm Thanks for any help given:)

John
MaGiCSuN
04-14-2004, 08:42 AM
add id="header" to the <img> tag from your head image.

I'm not really sure what you want, but you do have to take out the <center> tags on your page becuase you are using absolute positioning you don't need them

Love,
Mirna
LuvinVanessa4
04-14-2004, 05:05 PM
for some reason its not showing up right. see what I want is I want my main image at the top to be my header. then the navigation is my left part of css, the updates with the date and stuff is my center part of css im using a iframe for that, and the right side that says featured site is my right part of css what I'm trying to do is just give it that 3-column css with the header at the top. the image is big but its not showing up all the way and i wanted it to. the footer part i meant was that I wanted like a footer at the bottom of the page sorta the exact same as the header just at the bottom of the page so I could put property of so and so stuff like that like a copyright thing.

Thanks!

John
LuvinVanessa4
04-16-2004, 04:07 AM
anybody have any ideas? please help. Thanks!
salomeyasobko
04-16-2004, 04:34 AM
can i see your whole source code? i may be able to find something that was done incorrectly :)
LuvinVanessa4
04-17-2004, 02:20 AM
It's pretty long so be prepared, but here it is:

<html>
<head>
<title>| ADEMA INVASION | *NEW AND IMPROVED*</title>
<style>
<!--

body {

SCROLLBAR-FACE-COLOR: #000000;

SCROLLBAR-HIGHLIGHT-COLOR: #25B0FF;

SCROLLBAR-SHADOW-COLOR: #25B0FF;

SCROLLBAR-3DLIGHT-COLOR: #000000;

SCROLLBAR-ARROW-COLOR: #62749B;

SCROLLBAR-TRACK-COLOR: #141414;

SCROLLBAR-DARKSHADOW-COLOR:; }

A:link
{ text-decoration: none color:#000000; }
A:visited
{ text-decoration: none color:#000000; }
A:active
{ text-decoration: none color:#000000; }
A:hover
{ text-decoration: underline overline color:#FFFFFF;

cursor: crosshair; }
-->
</style>
<SCRIPT LANGUAGE="JavaScript">

<!-- Original: Alex Tu <boudha1@hotmail.com> -->
<!-- Web Site: http://www.geocities.com/MadisonAvenue/4368 -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function formHandler(form){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
// End -->
}
</SCRIPT>
<SCRIPT language="JavaScript"><!--

<!-- Begin
var day="";
var month="";
var ampm="";
var ampmhour="";
var myweekday="";
var year="";
mydate = new Date();
myday = mydate.getDay();
mymonth = mydate.getMonth();
myweekday= mydate.getDate();
weekday= myweekday;
myyear= mydate.getYear();
myhours = mydate.getHours();
ampmhour = (myhours > 12) ? myhours - 12 : myhours;
ampm = (myhours >= 12) ? ' PM' : ' AM';
mytime = mydate.getMinutes();
myminutes = ((mytime < 10) ? ':0' : ':') + mytime;
year = (myyear > 100) ? myyear : 1900 + myyear;
if(myday == 0)
day = " Sunday, ";
else if(myday == 1)
day = " Monday, ";
else if(myday == 2)
day = " Tuesday, ";
else if(myday == 3)
day = " Wednesday, ";
else if(myday == 4)
day = " Thursday, ";
else if(myday == 5)
day = " Friday, ";
else if(myday == 6)
day = " Saturday, ";
if(mymonth == 0) {
month = "January ";}
else if(mymonth ==1)
month = "February ";
else if(mymonth ==2)
month = "March ";
else if(mymonth ==3)
month = "April ";
else if(mymonth ==4)
month = "May ";
else if(mymonth ==5)
month = "June ";
else if(mymonth ==6)
month = "July ";
else if(mymonth ==7)
month = "August ";
else if(mymonth ==8)
month = "September ";
else if(mymonth ==9)
month = "October ";
else if(mymonth ==10)
month = "November ";
else if(mymonth ==11)
month = "December ";
// End -->

</SCRIPT>
<style type="text/css">

body
{ margin-top: 30;
margin-bottom: 0;
margin-left: 10;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
position: absolute;
margin: 20px;
padding: 10px;
height: 126px;
width: 677px;

#left {
position: absolute;
left: 15px;
top: 170px;
width: 100px;
}
#center {
position: absolute;
top: 170px;
margin-left: 155px;
margin-right: 145px;
}
#right {
position: absolute;
right: 17px;
top: 170px;
width: 100px;
}
</style>
</head>
<body>
<IMG SRC="http://www.geocities.com/ademainvasion/images/main.gif" id="header">


<div id="left">
<body bgcolor="#141414" link="#COCOCO" vlink="#COCOCO">
<P>
<form name="form">

<select name="site" size=1>

<option value="">Take Me To...</option>
<option value="http://ademainvasion.proboards15.com/">Message Board</option>
<option value="http://launch.groups.yahoo.com/group/ademainvasion/">Fanlisting</option>
<option value="http://www.geocities.com/ademainvasion/affiliates.htm" target="main">Affiliates</option>
<option value="http://www.geocities.com/ademainvasion/linkme.htm" target="main">Link Me</option>
<option value="http://www.geocities.com/ademainvasion/staff.htm" target="main">Staff</option>
<option value="http://www.geocities.com/ademainvasion/contact.htm" target="main">Contact</option>
<option value="http://pub.alxnet.com/guestbook?id=2551924">View Guestbook</option>
<option value="http://pub.alxnet.com/guestbook?id=2551924">Sign Guestbook</option>
<option value="">------------</option>
<P>
<option value="http://www.geocities.com/ademainvasion/main4.htm" target="main">Main</option>
<option value="http://www.geocities.com/ademainvasion/biography.htm" target="main">Biography</option>
<option value="http://www.geocities.com/ademainvasion/discography.htm" target="main">Discography</option>
<option value="http://www.geocities.com/ademainvasion/pictures.htm" target="main">Pictures</option>
<option value="http://www.geocities.com/ademainvasion/lyrics.htm" target="main">Lyrics</option>
<option value="http://www.geocities.com/ademainvasion/audio.htm" target="main">Audio</option>
<option value="http://www.geocities.com/ademainvasion/news.htm" target="main">News</option>
<option value="http://www.geocities.com/ademainvasion/tour.htm" target="main">Tour Dates</option>
<option value="http://www.geocities.com/ademainvasion/tabs.htm" target="main">Tabs</option>
<option value="http://www.geocities.com/ademainvasion/downloads.htm" target="main">Downloads</option>
<option value="http://www.geocities.com/ademainvasion/fanencounters.htm" target="main">Fan Encounters</option>

</select>

<input type=button value="Go!" onClick="javascript:formHandler()">

</form>
<P>
<p><img border="0" src="http://www.geocities.com/ademainvasion/images/THilfiger0218/navigator2.gif" width="143" height="25">
<table border="2" width="143" bordercolor="#313A4D" cellpadding="2">

<td width="131" bordercolor="#313A4D" bordercolorlight="#313A4D" bordercolordark="#313A4D" border="0" td bgcolor="141414"><font size="1" color="#FFFFFF" face="Comic Sans MS">&gt;&gt;</font><font color="#C0C0C0" face="Century Gothic" size="2"><a href="http://ademainvasion.proboards15.com/">Message
Board</a></font><br>
<font color="#FFFFFF" face="Comic Sans MS" size="1">&gt;&gt;</font><font color="#C0C0C0" size="2" face="Century Gothic"><a href="http://launch.groups.yahoo.com/group/ademainvasion/">Fanlisting</a></font><br>
<font size="1" face="Comic Sans MS" color="#FFFFFF">&gt;&gt;</font><font color="#C0C0C0" face="Century Gothic" size="2"><a href="http://www.geocities.com/ademainvasion/affiliates.htm" target="main">Affiliates</a></font><br>
<font size="1" face="Comic Sans MS" color="#FFFFFF">&gt;&gt;</font><font color="#C0C0C0" face="Century Gothic" size="2"><a href="http://www.geocities.com/ademainvasion/linkme.htm" target="main">Link
Me</a></font><br>
<font color="#FFFFFF" face="Comic Sans MS" size="1">&gt;&gt;</font><font color="#C0C0C0" size="2" face="Century Gothic"><a href="http://www.geocities.com/ademainvasion/staff.htm" target="main">Staff</a></font><br>
<font face="Comic Sans MS" size="1" color="#FFFFFF">&gt;&gt;</font><font color="#C0C0C0" size="2" face="Century Gothic"><a href="http://www.geocities.com/ademainvasion/contact.htm" target="main">Contact</a></font><br>
<font face="Comic Sans MS" size="1" color="#FFFFFF">&gt;&gt;</font><font color="#C0C0C0" face="Century Gothic" size="2"><a href="http://pub.alxnet.com/guestbook?id=2551924">View
Guestbook</a></font><br>
<font face="Comic Sans MS" size="1" color="#FFFFFF">&gt;&gt;</font><font color="#C0C0C0" face="Century Gothic" size="2"><a href="http://pub.alxnet.com/guestbook?id=2551924">Sign
Guestbook</a></font>
</td>

</table>
<img border="0" src="http://www.geocities.com/ademainvasion/images/THilfiger0218/adema.gif" width="143" height="25">
<table border="2" width="143" bordercolor="#313A4D" cellpadding="2">
LuvinVanessa4
04-17-2004, 02:21 AM
<td width="131" bordercolor="#313A4D" bordercolorlight="#313A4D" bordercolordark="#313A4D" border="0" td bgcolor="141414"><font size="1" color="#FFFFFF" face="Comic Sans MS">&gt;&gt;</font><font color="#C0C0C0" face="Century Gothic" size="2"><a href="http://www.geocities.com/ademainvasion/main4.htm">Main</a></font><br>
<font color="#FFFFFF" face="Comic Sans MS" size="1">&gt;&gt;</font><font color="#C0C0C0" size="2" face="Century Gothic"><a href="http://www.geocities.com/ademainvasion/band.htm" target="main">Biography</a></font><br>
<font size="1" face="Comic Sans MS" color="#FFFFFF">&gt;&gt;</font><font color="#C0C0C0" face="Century Gothic" size="2"><a href="http://www.geocities.com/ademainvasion/discography.htm" target="main">Discography</a></font><br>
<font size="1" face="Comic Sans MS" color="#FFFFFF">&gt;&gt;</font><font color="#C0C0C0" face="Century Gothic" size="2"><a href="http://www.geocities.com/ademainvasion/pictures.htm" target="main">Pictures</a></font><br>
<font color="#FFFFFF" face="Comic Sans MS" size="1">&gt;&gt;</font><font color="#C0C0C0" size="2" face="Century Gothic"><a href="http://www.geocities.com/ademainvasion/lyrics.htm" target="main">Lyrics</a></font><br>
<font face="Comic Sans MS" size="1" color="#FFFFFF">&gt;&gt;</font><font color="#C0C0C0" size="2" face="Century Gothic"><a href="http://www.geocities.com/ademainvasion/news.htm" target="main">News</a></font><br>
<font face="Comic Sans MS" size="1" color="#FFFFFF">&gt;&gt;</font><font color="#C0C0C0" face="Century Gothic" size="2"><a href="http://www.geocities.com/ademainvasion/tour.htm" target="main">Tour
Dates</a></font><br>
<font face="Comic Sans MS" size="1" color="#FFFFFF">&gt;&gt;</font><font color="#C0C0C0" face="Century Gothic" size="2"><a href="http://www.geocities.com/ademainvasion/tabs.htm" target="main">Tabs</a><br></font>
<font color="#C0C0C0" size="1" face="Comic Sans MS">&gt;&gt;</font><font color="#C0C0C0" face="Century Gothic" size="2"><a href="http://www.geocities.com/ademainvasion/downloads.htm" target="main">Downloads</a></font><br>
<font color="#C0C0C0" face="Comic Sans MS" size="1">&gt;&gt;</font><font color="#C0C0C0" face="Century Gothic" size="2"><a href="http://www.geocities.com/ademainvasion/fanencounters.htm" target="main">Fan
Encounters</a></font>
</td>

</table>
</div>


<div id="center">
<SCRIPT LANGUAGE="JavaScript"><!-- Begin
var nn = navigator.appName;
var nnv = parseInt(navigator.appVersion)
if((nn == "Netscape") && (nnv < 4)){
}
else{
document.write("<span class=date>" + day + month + myweekday + ", " + year + "</span>");
}
// End -->
</SCRIPT>
<span id=tick2>
</span>
<span align="right">
<script>
<!--
/*By JavaScript Kit
http://javascriptkit.com
Credit MUST stay intact for use
*/

function show2(){
if (!document.all&&!document.getElementById)
return
thelement=document.getElementById? document.getElementById("tick2"): document.all.tick2
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="PM"
if (hours<12)
dn="AM"
if (hours>12)
hours=hours-12
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var ctime=hours+":"+minutes+":"+seconds+" "+dn
thelement.innerHTML="<b style='font-size:14;color:white;'>"+ctime+"</b>"
setTimeout("show2()",1000)
}
window.onload=show2
//-->
</script></span>
<P>
<P><center><IMG SRC="http://www.geocities.com/ademainvasion/images/updates.gif">
<P>
<center><IFRAME name="main" src="main.htm" width=430 height=5000 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no style="FILTER: chroma(color=#ff0000)" allowtransparency="true"></IFRAME>

</div>

<div id="right">
<p><img border="0" src="http://www.geocities.com/ademainvasion/images/THilfiger0218/featuredsite.gif" width="150" height="25"><table border="2" width="150" bordercolorlight="#62749B" bordercolordark="#62749B" height="48">
<tr>
<td width="138" align="center" height="42" border="0"></td>
</tr>
</table>
</div>

</body>
</html>
<DIV id=yl0
style="LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden">
<DIV id=yl1
style="LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden">
<DIV id=yl2
style="LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden">
<script>
function stoperror(){
return true
}
window.onerror=stoperror
</script>
<NOSCRIPT>
<!--
<!--geoguide-->
-->
</NOSCRIPT>
<NOSCRIPT>
<NOSCRIPT>
<NOSCRIPT>
salomeyasobko
04-17-2004, 05:38 AM
well i don't see the three column layout code in your CSS. go to www.lissaexplains.com/css3.shtml and read it over. you'll see what i mean :)
LuvinVanessa4
04-17-2004, 08:10 AM
It's the 3 column layout with the header, I know it's not showable in all that source coding because there is so much content, but if you goto the page listed with my message above, this is how it would be. The header would be the main image that is somehow showing up in the links to the left. The links to the left are the left 1st column. The center or the 2nd column is a iframe I put in. And where it says featured site is my right or 3rd column. The iframe might not be showing up but theirs another image in that 2nd column that says updates. What I'm trying to do is to get them to all line up perfectly. But for some reason my image is moving off to the left I mean the main image and whenever I have it put up in the header its moving my center and right columns to the right and not centering the center column and keeping the right column in place. Its like I want the main image to where its above all 3 columns as a header. I hope this explains it alot more. Thanks for the help!

John
bourdelson
04-17-2004, 04:24 PM
I don't know how much this will help, but I cleaned up your CSS coding, because you had two sets of <style> tags, and for your body margin stuff, you didn't specify a unit of measure [px].


<style type="text/css">
<!--
body {background-color:#141414;
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #25B0FF;
SCROLLBAR-SHADOW-COLOR: #25B0FF;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #62749B;
SCROLLBAR-TRACK-COLOR: #141414;
SCROLLBAR-DARKSHADOW-COLOR:;
margin-top: 30px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px; }

A:link
{ text-decoration: none; color:#COCOCO; }
A:visited
{ text-decoration: none; color:#COCOCO; }
A:active
{ text-decoration: none; color:#000000; }
A:hover
{ text-decoration: underline overline; color:#FFFFFF;
cursor: crosshair; }

#header {
position: absolute;
margin: 20px;
padding: 10px;
height: 126px;
width: 677px;

#left {
position: absolute;
left: 15px;
top: 170px;
width: 100px;
}
#center {
position: absolute;
top: 170px;
margin-left: 155px;
margin-right: 145px;
}
#right {
position: absolute;
right: 17px;
top: 170px;
width: 100px;
}
-->
</style>

Take out this: <body bgcolor="#141414" link="#COCOCO" vlink="#COCOCO">. You have two body tags, so I put all of the stuff in that tag into your CSS, so it doesn't need to be in your HTML.

For your text, because you have a lot of <font> tags, you can use CSS to change all of that. If you want it, put this in your CSS:

body, table, tr, td, a {font-family: Century Gothic;
font-size: 10pt;
color:#C0C0C0;}
LuvinVanessa4
04-19-2004, 02:38 AM
Hmmmm I think alittle bit of your coding work, but my image is still not showing up at the top like I want it too. I want it to show up as just like a main image at the top with the rest of my content right below it in three separate columns like its supposed to be with a 3 column with a header layout. Could anybody possibly tell me what the problem seems to be with my layout? Here's the link: http://www.geocities.com/ademainvasion/main5.htm Thanks for all the help!

John
LuvinVanessa4
04-21-2004, 05:29 AM
Hello anybody out there? I need help still lol
Calidris
04-21-2004, 08:03 AM
Just as a note (I'm off to work and dont have time to answer this right now), the page is distorted in non-IE browsers so in fact the CSS isn't too hot.

It needs more work to make it more accessible :)
LuvinVanessa4
04-22-2004, 05:35 AM
Oh, could someone help me then? lol I mean I'm guild with html pretty good I just want my page to turn out great looking and its not aligning right thats the problem I'm having.