HTML & CSS Help! Resolution problems, and not expanding!

celexia

07-01-2010, 08:26 AM

Hello, I am currently pretty new to HTML and CSS, I do know most of the functions of it but I am stuck on a couple things. Also, I have read some of the previous threads but I can't find what I'm looking for, but I am sure these questions are asked all the time on a forum like this, so I'm sorry but I really need some help. :thumbsup:

I am currently coding a layout I made for one of my friends, and I have a couple problems.

#1) I put it together using the <div> tags, but when I change resolutions it is all messed up and doesn't look how it should look. Am I doing the coding wrong? Can you check to see why this is happening in my code?

#2) I don't know how to make my content area stretch down when I have more content then my current part of the layout will allow. Right now, if I have more type then should be there, it runs down on the other parts of my template where I don't want it to be, I want it to extend the area that the type goes rather then have a scrolling box. How do I do this? I have no idea of even where to start. Let me give a screenshot so you can see what's what.

If you see the circled area, the text is going down into the bottom where I don't want it. I want the area above to get longer and adapt to having more text and have the bottom go down more. I'm not so sure I told this correctly, but I don't know how to explain it.

Here are my codes, so you know what is going on.

HTML

<html>
<head>
<title>Everlasting Sacred Path</title>
<script type="text/javascript" src="java.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="shortcut icon" href="images/flavicon.png" type="image/png" />

</head>

<body>
<div id="logo"><img src="images/esp.png"></div>

<div id="navbar"><img src="images/navbar.png"></div>

<div id="body"><img src="images/body.png"></div>

<div id="bottomright"><img src="images/bottomright.png"></div>

<div id="bottomleft"><img src="images/bottomleft.png"></div>

<div id="topleft"><img src="images/topleft.png"></div>

<div id="topright"><img src="images/topright.png"></div>

<div id="navtop"><img src="images/navtop.png"></div>

<div id="navbottom"><img src="images/navbottom.png"></div>

<div id=home><a href="index.html" onmouseover="image1.src='images/home2.png';"
onmouseout="image1.src='images/home1.png';">
<img name="image1" src="images/home1.png" border=0></a>
</div>

<div id=about><a href="about.html" onmouseover="image2.src='images/about2.png';"
onmouseout="image2.src='images/about1.png';">
<img name="image2" src="images/about1.png" border=0></a></div>

<div id=lore><a href="lore.html" onmouseover="image3.src='images/lore2.png';"
onmouseout="image3.src='images/lore1.png';">
<img name="image3" src="images/lore1.png" border=0></a></div>

<div id=alliance><a href="allies.html" onmouseover="image4.src='images/alliance2.png';"
onmouseout="image4.src='images/alliance1.png';">
<img name="image4" src="images/alliance1.png" border=0></a></div>

<div id=members><a href="members.html" onmouseover="image5.src='images/members2.png';"
onmouseout="image5.src='images/members1.png';">
<img name="image5" src="images/members1.png" border=0></a></members></div>

<div id=forums><a href="forums.html" onmouseover="image6.src='images/forums2.png';"
onmouseout="image6.src='images/forums1.png';">
<img name="image6" src="images/forums1.png" border=0></a></div>

<div id="content">
About Our Guild

The Everlasting Sacred Path Guild entered the realm of Guild Wars on June 18th, 2005. Since that time we have grown into a large gaming community that has enjoyed a consistent and dedicated membership with a focus on camaradarie.

We maintain a high level of intereaction among guild members by hosting a variety of activities and events each week for the guild and for the alliance. While our primary focus in Guild Wars is PvE we explore all arenas within the game, from quests and missions to all the various formats of player vs player combat. The Everlasting Sacred Path is a founder of a Guild Wars alliance, and we shall be here with our allies for the entire span of adventures in this game, as well as any that we choose to expand into in the future.

Our members are always at the ready to band together and embark upon the next quest or to assist those who are in need of reliable companions. The Everlasting Sacred Path stands to foster trust and honor in a realm that is so often surrounded by chaos.

Rules And Standards

Guild members and those wishing to be considered for membership agree to the following rules and standards of conduct. Our rules and simple, and rely upon a certain degree of common sense and courtesy. If you are accepted into the guild, then chances are it is apparent that this is no issue for you.

*
No game cheats or exploits of any kind are allowed. Anyone found to be taking an unfair advantage through these means will be removed from the guild. Thankfully, Guild Wars is a game where this is not much of an issue, but should something arise, I do not want to see anyone in an ESP cape found taking advantage of a hack or exploiting a bug in the game for the purpose of self advancement.

*
Everlasting Sacred Path is a roleplay optional guild. We do not have any rules to determine if/when a member has to act in-character. However, all are encouraged to write background stories for their characters and support for RP is provided through a variety of roleplay forums and events.

*
All character names used in the guild must fit within a roleplay envorinment, even if you do not choose to write a background stories for your characters. (i.e. no "I Heelz You Gud" or "Leet Assassin" type names)

*
People wishing to join must have a strong interest in grouping with guild members and taking part in guild events at times when they are able.

*
Guild members are expected to treat other members and members of the alliance with respect and understanding. In the event that a conflict does arrise please contact a guild leader or officer with your concerns.

*
We are a guild that enjoys providing assistance to other members with any and all parts of the game. We do ask that when a member requests help, they do so in a curteous manner and understand that prior commitments may prevent people from being able to take immediate action. Persistant whining, begging, and making unreasonable demands will be taken as grounds for dismissal from the guild.

*
Guild members should act appropriately in all settings and always serve as a representative of the guild to the gaming community.

*
Members who are absent from the guild for more than a month without explanation may be removed and will hence have to reapply for membership should they later wish to come back. Members may take a leave of absence for as long as they need so long as some form of notification is provided. They may return as an active member at any time.
</div>

</body>
</html>

CSS

a {
outline:none; /* FF1.5+ IE7+*/
-moz-outline: /* FF<=1.5*/
}

body
{
background-image:url('images/sylvthackerybg.jpg');
background-attachment: fixed;
background-position: center top;
background-color: black;
color:#c0b79a;
font-family:georgia, "times new roman", serif;
}

#navbar {
position: absolute;
top: 15%;
left: 2%;
width: 977px;
height: 50px;
}

#logo {
position: absolute;
top: 0px;
left: 30%;
width: 330px;
height: 75px;
}

#body {
position: absolute;
top: 25%;
left: 2%;
width: 659px;
height: 179px;
}

#bottomright {
position: absolute;
top: 100%;
left: 68%;
width: 659px;
height: 179px;
}

#topright {
position: absolute;
top: 31%;
left: 68%;
width: 659px;
height: 179px;
}

#bottomleft {
position: absolute;
top: 100%;
left: 28%;
width: 659px;
height: 179px;
}

#topleft {
position: absolute;
top: 31%;
left: 28%;
width: 659px;
height: 179px;
}

#middle {
position: absolute;
top: 59%;
left: 33.2%;
width: 636px;
height: 279px;
}

#navtop {
position: absolute;
top: 31%;
left: 4%;
width: 636px;
height: 279px;
}

#navbottom {
position: absolute;
top: 43%;
left: 4%;
width: 636px;
height: 279px;
}

#home {
position: absolute;
top: 17.3%;
left: 8.3%;
width: 132px;
height: 33px;
}

#about {
position: absolute;
top: 17.3%;
left: 21.5%;
width: 132px;
height: 33px;
}

#lore {
position: absolute;
top: 17.3%;
left: 34.7%;
width: 132px;
height: 33px;
}

#alliance {
position: absolute;
top: 17.3%;
left: 52.9%;
width: 132px;
height: 33px;
}

#members {
position: absolute;
top: 17.3%;
left: 66.2%;
width: 132px;
height: 33px;
}

#forums {
position: absolute;
top: 17.3%;
left: 79.5%;
width: 132px;
height: 33px;
}

#content {
position: absolute;
top: 33%;
left: 30%;
width: 636px;
height: 33px;
}

Java

<SCRIPT LANGUAGE="JavaScript">


</script>

bennyy007

07-01-2010, 09:48 AM

celexia

07-01-2010, 05:13 PM

Hey,

It looks like the content is overflowing so therefore inner content will go outside of the holding DIV element and I've encounter this myself a few times in my time of designing websites with CSS.

So all you need to do is on the div "content" add the following to it's css:

The one in bold is the one you should add to it.

#content {
position: absolute;
top: 33%;
left: 30%;
width: 636px;
height: 33px;
overflow:hidden;
}

This usually solves it in some cases, but just to be on the correct side of things I'd also add padding-bottom:14px; this will make sure that the bottom of the DIV element will have that extra padding and the inner content can't go beyond the padding line.

Hope this solves it, if not then do let me know :thumbsup:

Hey! Thanks for the reply.

I did this, and it stopped the text from going where I didn't want it, but it also cut off half of my content that I need on the page. I need the "content area" to stretch when I have more content. Like I need the graphic to get larger when the text overflows so it looks like the same page, just longer because there is more content then other pages.

Edit//
Okay I have the same problem as this: http://www.webhostingtalk.com/showthread.php?t=511892

But I AM using CSS. I think I may need to cut the bottom of my template and make the top part repeat down the page when the page is longer, but I have NO idea how to do this. I followed the instructions in the link I showed you, and it didn't stretch the bottom of my template down still.

celexia

07-01-2010, 07:29 PM

Hey! Thanks for the reply.

I did this, and it stopped the text from going where I didn't want it, but it also cut off half of my content that I need on the page. I need the "content area" to stretch when I have more content. Like I need the graphic to get larger when the text overflows so it looks like the same page, just longer because there is more content then other pages.

Edit//
Okay I have the same problem as this: http://www.webhostingtalk.com/showthread.php?t=511892

But I AM using CSS. I think I may need to cut the bottom of my template and make the top part repeat down the page when the page is longer, but I have NO idea how to do this. I followed the instructions in the link I showed you, and it didn't stretch the bottom of my template down still.

Alright, I've solved this on my own, could I get some help on #1 please?

Apostropartheid

07-01-2010, 11:43 PM

celexia

07-02-2010, 12:00 AM

Well, it's because you're using absolute positioning. Absolute positioning is meant to be used for when you want to take an element out of the natural flow of the document, which here is not appropriate and will result in an inflexible page. In addition, you are using both pixels and percentages to indicate width and position. Why?

Because sometimes the percent doesn't move it when the pixels did.

Should I use only percent? Or only pixels?

What should my code look like then if not absolute positioning?

jhaycutexp

07-02-2010, 01:16 AM

quick heads up tip bro... Stay away from absolute positioning on your elements..

What should my code look like then if not absolute positioning?
definitely it will break apart.. try to use floats... its much easier..

Should I use only percent? Or only pixels?
They are just basically the same... not really in concept.. percents gets their initial value of the parent block element

so for example you have #wrapper{width:800px;} and you got #percent{width:100%;} inside the 3 #wrapper

<div id="wrapper">
<div id="percent"></div> 
</div>

did you get it? the computed percent width will be based upon its parents width..

Hope it helps..

celexia

07-02-2010, 05:09 AM

quick heads up tip bro... Stay away from absolute positioning on your elements..

definitely it will break apart.. try to use floats... its much easier..

They are just basically the same... not really in concept.. percents gets their initial value of the parent block element

so for example you have #wrapper{width:800px;} and you got #percent{width:100%;} inside the 3 #wrapper

<div id="wrapper">
<div id="percent"></div> 
</div>

did you get it? the computed percent width will be based upon its parents width..

Hope it helps..

Hey, I get the percent thing, but I think the problem is I have no parent, is that correct?
How do I use the <div> without specifying the exact location I want with the absolute tag? If I just throw it on there, it just appears in the top left on top of every other image, so I used the top:50%;, etc. to move them to their correct place. Is this wrong? Well actually dumb question because it obviously isn't working, but could you go into a little more detail as to how it is done, because clearly my way is not working. Thanks so much, appreciate it.

bennyy007

07-02-2010, 07:13 AM

What he means is use floats inside of absolute (I hardly ever use them myself) here's a little example of what he meant:

div#content
{
float:right;
position:relative; /* I use relative a lot and have no problems! */
left:20px;
right:20px;
top:20px;
}

BTW: That's just an example so you would have to play around with left, right, and top to get it perfect... I have built a fully functional website around using relative positioning and have no problems with content overflowing and so on.

Hopefully this clears things up for you...

Apostropartheid

07-02-2010, 04:00 PM

Don't use relative (yes sometimes it can be useful but is unpredictable, esp. with footers.) Nor do I mean use them in addition to absolute positioning (although this is appropriate in some cases, it isn't for a basic layout.)

A simple, two columned floated layout with header and footer would look like this:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="application/xml; charset=utf-8"/>
<style type="text/css">
* {
margin: 0;
padding: 0; /* universal reset */
}
body {
font: .825em/1.6 'lucida sans unicode', 'lucida grande', sans-serif;
}
#wrapper {
margin: 0 auto;
width: 800px;
}
h1 {
font-weight: normal;
font-size: 36px;
border-bottom: 1px #ddd solid;
padding: 20px;
}
p {
margin-bottom: 1.6em;
}
#header {
padding-bottom: 20px;
border-bottom: 1px #ddd solid;
}
#sidebar {
width: 209px;
float: left;
padding: 20px;
border-right: 1px #ddd solid; /* width: 209 + 20 + 20 + 1 */
}
#content {
width: 510px;
padding: 20px; /* width: 510 + 20 + 20 */
border-left: 1px #ddd solid;
margin-left: -1px; /* this makes the border extend all the way down the page despite whether the sidebar or

content is longer. can be removed along with the border. */
float: right;
}
#footer {
clear: both; /* required to put underneath floats. */
border-top: 1px #ddd solid;
padding-top: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Lorem Ipsum</h1>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu orci velit. Nulla aliquam sem vitae

leo interdum blandit. Integer mi ante, venenatis a rutrum ac, imperdiet eu nulla. Praesent pretium interdum

vulputate. Suspendisse potenti. Phasellus bibendum mauris eu ipsum ornare a molestie felis vestibulum. Phasellus

augue nibh, volutpat et bibendum lobortis, sodales eu sem. In sodales posuere mauris id consectetur.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div id="content">
<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue.

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit

tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu

pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu

erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique

cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
</div>
<div id="footer">
<p>(c) copyright quelqu'un que tu es.</p>
</div>
</div>
</body>
</html>
No positioning needed.