Issues i am not sure about… please help.

@malikkSep 08.2008

Hello,
I am a new poster to this forum, so, instead of just saying what i need, I’d like to say hello and nice to meet you. Now on to my issues.

Okay i have a site i am making for a group at my college. the link at the moment is webtests.yakkel.com/GG.php . If you go to the news page you will notice that first of all, the text will overflow the specific area, and i am forgetting how to fix this. I know i can do overflow: auto; … but that will create a horizontal bar i do not want. I do not mind a vertical bar, though. So can anyone help me with the commands or look at my style.css file and tell me what is the mistake. I am sure it’s with my creation of the box and defining the paragraph css. Next. I have gone to a windows machine and looked at my site and the navigation and main content area are off center with the header that says gamer’s guild, while on my computer (mac os x tiger) it is just a little bit off center, but not as much. Can anyone help me/give advice on making it better so it looks the same, or as close to possible? I’d really appreciate it and it will help me learn about CSS more. As well the navigation bar and the content box are the same height but one is longer than the other.

Any help would be appreciate, and thanks so much! I have had a website i made like this one but it was a little different and i had so much trouble wiht that one and i want to make sure i am doing it right, so any comments would be appreciated!

Thanks,
Kamron

to post a comment

CSS

23 Comments(s) _↴

@CSSNINJASep 08.2008 — #You have defined two <body> and <html> tags.

Go here and read about the basic structure of laying out an html page, then write your code and validate the code here.

That should get you started.

@malikkauthorSep 09.2008 — #oh... i loaded in html pages and i see what my problem is i believe... in the loaded html pages i made them as html pages not thinking and that is why there's double html and body pages. That was a mistake on my part. I don't think that would be the problem though with my page, but i will check it may be.

As well i will validate my page then come back if the problems persist if i can not figure it out, looking at my new code.

@malikkauthorSep 09.2008 — #i fixed the html/body problem it seems and i am working on validation but that still wouldn't fix my CSS problem, cause when you take out the <p>'s it will go to the second paragraph, so obviously it's my CSS that is wrong.

@malikkauthorSep 09.2008 — #so if anyone has any ideas about my CSS that'd be great... i'm going to look for some typ of CSS validator but i dont' know if that exists so help would be great, thanks ?

@WebJoelSep 09.2008 — #... i'm going to look for some typ of CSS validator but i dont' know if that exists..[/QUOTE] Oh they exist! ?

@malikkauthorSep 09.2008 — #well i found them. And i fixed my problem with my text... instead of making the <p> move over i made padding (stupid me)... but i still have a problem with making my boxes look the same on every screen. Right now i was trying to make them go where they are with percents and be the size they are with percents but that didnt' sezem to work. What's the best way... pxs? I am trying to make it so it looks the same, as good as possible, on other browsers and screen.s is pxs/percents/ems best for positioning the content areas and then what's best for picking the size (height/width) of the boxes?

Thanks,

Kamron

@malikkauthorSep 09.2008 — #can anybody provide help?

@WebJoelSep 09.2008 — #can anybody provide help?[/QUOTE]
You have everything positioned "absolute". This makes some rigid assumptions about the monitor that every must use to see your site the same way that you do.

"position:absolute;" should only be used when an element is expected to either move, or expected to 'overlap' another element and not affect the flow (hence, "absolute;" is said to be "out of the document flow" meaning that it is 'lifted up' off of the flow, and does not affect other elements around it.

What is this supposed to look like? I view it in Firefox, and see something rather odd that includes a horizontal scrollbar. Horizontal scrolling is taboo for site, really. Nobody wants to scroll left-right repeat, left-right repeat, left-right repeat etc. to access your content. Vertical scrolling is acceptable. I try to limit to 2-3 screen-heights for vertical scrolling (if at all). Else, there is need for another page (or a good copy-editor.)

If you can sketch-up an image design of how this is supposed to look I could whip-up something fast that achieves it and work on all browsers. ?

@malikkauthorSep 10.2008 — #well, it's supposed to not have the horizontal scrollbar... right now it is kind of in the middle of me fooling around with it trying to get it to work. But basicaly i'm trying to have the header and then the left navigatioin bar and the right area (it is blue right now) next to the navigation bar... pretty basic. But i was viewing it on my friend's computer and it looked different so i was trying to figure out what was the problem. I don't mind doing it myself i'm just not sure how to make it so it works perfectly with all browsers... i've done it before but it takes me so long cause i'm not the best at CSS yet. I don't know all the different browser rules and what does/doesn't work. But, thanks for your offer. Maybe could you look at the CSS for maincontent, navigation and header... those are what the header the navigation bar and maincontent is the big area that's blue is. The horizontal bar should be gone at this point. I tried positioining everything with percents, thinking that it will work becuase it will base it on other people's resolutions and adjust... but that didn't work and i realized i was being stupid/doing it wrong afterwards.

@CentauriSep 10.2008 — #Do you want the site to be a fixed width (centred) or to vary in width with the browser window? - at the moment, you have the main content area and the navigation column fixed widths, but the header is a % width which will vary with screen size.

Best way to do this is to enclose everything within a container div, which can have the width and be centred. Nothing will need absolute positioning at all - let things flow naturally. The navigation column can be floated left and the main content area can just get a left margin with no width set.

@malikkauthorSep 10.2008 — #Well... what i was trying to do was make it so it the navigation bar and the header would be set with percents to see if that fixed the browser issue... but it didn't cause on my friend's screen and my screen the browser is in a different area. Maybe i will put everything in a div and have it float. But what's the best way to position the container and the header in the middle of the screen and make the positioning work for every browser?

@CentauriSep 10.2008 — #Positioning in the centre is no problem by just using auto side margins on the container. However, I'm still not sure whether you want the site to vary in width depending on the user's screen, or stay at the one fixed width and always be in the centre.

@malikkauthorSep 10.2008 — #i'd just like it one fixed width. I think that would be the best.

@malikkauthorSep 10.2008 — #I redid the CSS so that it's done by pixels mostly and got the text to not overflow and a scrollbar to appear. Is there a better way to work the pixels for the size of the site or is ems/pts/%'s. I'm trying to make this site efficent with CSS as possible so i can learn/as well as use it better.

@CentauriSep 11.2008 — #Noticed you have been working on it. Still no need for absolute positioning, and that centering method causes the left of the layout to disappear on small screens. Better to use a wrapper element around the whole site, and set the site width and centering here - all the content can just sit within naturally. You should also have an encoding and title in your <head> section. Any main sections which only appear once on the page are probably better identified via id's rather than classes. A <h1> heading is usually a main heading and usually is only found once on a page - the main title can be a <h1> and the headings within the content can be <h2>s. Try this html:

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Gamer's Guild</title>
 <link rel="stylesheet" href="style.css" type= "text/css" >
 </head>
 
 <body>
 <div id="wrapper">
 <div id="header">
 <h1>Gamer's Guild</h1>
 </div>
 <ul id="navigation">
 <li><a href="?page=news">News</a></li>
 <li><a href="?page=files">Files</a></li>
 <li><a href=" http://bgamersguild.runboard.com">Forum</a></li>
 <li><a href="?page=upcoming">Upcoming Events</a></li>
 <li>Other Resoures</li>
 </ul>
 <div id="maincontent">
 <p>content here</p>
 </div>
 <div id="footer">
 <p>This site was designed for the Gamers Guild</p>
 </div>
 </div>
 </body>
 </html>
 [/CODE]

with this css :

[CODE]* {
 margin: 0;
 padding: 0;
 }
 body{
 background-color: #663300;
 font-family: sans-serif;
 color: red;
 padding-top: 20px;
 } 
 #wrapper {
 width: 780px;
 margin: 0 auto;
 border: 1px solid #000;
 background-color: #C0C0C0;
 }
 #header {
 background-color: white;
 height: 138px;
 color: #061359;
 border-bottom: 18px solid #061359;
 text-align: left;
 }
 #header h1 {
 font-size: 150%;
 text-align: center;
 font-weight: normal;
 }
 #navigation{
 float: left;
 width: 200px;
 padding: 5px;
 }
 #navigation li{
 margin-top: 2px;
 list-style: none;
 }
 #navigation a{
 text-decoration: none;
 color: red;
 }
 #navigation a:visited{
 color: red;
 }
 #navigation a:hover{
 color: brown;
 }
 #maincontent{
 margin-left: 230px;
 background-color: white;
 padding: 6px;
 min-height: 300px;
 }
 * html #maincontent {
 height: 300px;
 }
 #maincontent p {
 text-align:justify;
 padding-left: 5%;
 padding-right: 5%;
 }
 #maincontent h2 {
 text-decoration: underline;
 font-size: 100%;
 }
 #footer{
 position: relative;
 clear: both;
 border-top: 1px solid gray;
 background-color: white;
 padding: 2px 6px;
 text-align: center;
 font-size: 8pt;
 }[/CODE]

@malikkauthorSep 11.2008 — #what are the advantages with the wrapper (basically the mainpage thing i have) around the whole site compared to how i have it, besides the mention of the small screens? Also in your CSS what's the * for?

@CentauriSep 11.2008 — #With a wrapper element, there is only one thing to centre, and it sets the width - no need to specify individual widths and everything will be contained and align the same.

The * is the "universal selector" - it selects everything, and in this case is used to zero all default browser-applied margins and paddings, as these can vary considerably between browsers. This gives an even cross-browser starting point.

@malikkauthorSep 12.2008 — #http://webtests.yakkel.com/test/GG.php?page=news here's the wrapper css/html that you provided integrated (besides the colors i've chosen for the original) with my php. I was curious. It seems to work well, and i thank you, but... i noticed when i clicked news it will go really big and when i click files it will go fairly small... is this automatic and is there a way to say it should be a minimum of 700px or something like that, that is fairly universally acceptable.

would i just use min-height?

@CentauriSep 12.2008 — #The site needs to expand with content. In the code above I set min-height of #maincontent to 300px - you can increase this if you wish.

You would also need to adjust the height set on * html #maincontent to match.

@malikkauthorSep 12.2008 — #Oh okay. I didn't notice the min-height. What's the point of the * html #maincontent height: 300px. I assume that is becuase, I believe IE cannot understand min-height, but why does it have it's own id/class?

As well, thanks for helping me out. I know a litle CSS, but i haven't worked with it extensively yet, and I'm not knowledgable about a lot of the cross-browser problems. So sorry if I was a little annoying, I apologize. And thanks again.

@CentauriSep 13.2008 — #Only IE6 does not understand minimum height (IE7 is ok) and it treats height like min-height. The "star-html" hack will target IE less than v7, as these browsers think that the html element is wrapped in something else.

@malikkauthorSep 13.2008 — #Okay, that's what i figured. http://webtests.yakkel.com/test/GG.php?page=news this is what i have so far. I am working on rounded corners and i was wondering if there's a way to limit the border or if i have to draw a line as well for every border part and manual position it? As well is there an easier way to get a rounded corner image because i think mine look pretty crappy. The rounded corners i'mt alking about are on the upper left and upper right of the heading.

@WebJoelSep 13.2008 — #A all-browser way to get 'rounded corners' is to make the 'container' be "position:relative;" and inside of that container, "position:absolute;" the corner-images with 'negative' values, to offset & overlap the 'border' of the container.

Something like:

<div style="width:500px; height:300px; padding:25px 20px; [B]position:relative;[/B]">

<img alt="" src="#" style="[B]position:absolute; left:-1px; top:-1px;[/B]" />

<img alt="" src="#" style="[B]position:absolute; right:-1px; top:-1px;[/B]" />

</div>[/QUOTE]

Because the images are "position:absolute;", they exert no 'pressure' on internal content, so you will need to "padding:value;" to push content from possibly overlapping the corner images.

And, CSS3 allows for "[B]-moz-border-radius:value;[/B]"

http://www.css3.info/preview/rounded-border/

Mozilla/Firefox and Safari 3 obey.

Caveat: IE will not comply (It can't even get CSS2 right yet most of the time...)

Also in #CSS _↴

IE 6 Hover Issue mouse hover on an HTML Select Box DIV>> Removing part of the usual DIV box?

Success!

Help @malikk spread the word by sharing this article on Twitter...

Tweet This

Issues i am not sure about… please help.

23 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Issues i am not sure about… please help.

23 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

23 Comments(s) _↴

Also in #CSS _↴