help with css, when resizing browser site messes up [Archive]

View Full Version : help with css, when resizing browser site messes up

Raztat

08-22-2007, 03:29 PM

Hey I need help, when you resize the browser the logo runs out of the main body and into the nav bar, the text also runs into the nav bar. I was wondering how do I get this fixed. Also I do not have IE 6 could any one tell me if it looks ok in it?

The css code is below

/* CSS Document */

body {
background-color: #FFFFFF;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 {
color: #009900;
font-size: 16px;
font-family:Georgia, "Times New Roman", Times, serif;
}
div#wrapper {
width: 80%;
background-color:#FFFFFF;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
div#header {
padding: 15px;
margin: 0px;
text-align: center;
}
div#nav {
width: 25%;
padding: 10px;
margin-top: 1px;
float: left;
}
div#main {
margin-left: 30%;
margin-top: 1px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
}
p {
color: saddlebrown;
letter-spacing: 2px;
}
#footer {
font-size: 8px;
background-color: #8ec63f;
color: saddlebrown;
letter-spacing: 2px;
}
ul#navmenu {
margin : 0;
padding : 0;
list-style-type : none;
}

ul#navmenu li {
margin-bottom : 5px;
}

ul#navmenu a {
display : block;
width : 190px;
height : auto;
background : #003366 url(images/glossyback.jpg) repeat-x; /* CHANGED/ADDED THIS */
text-decoration : none;
color : #009900;
cursor : pointer;
}

ul#navmenu a:hover, ul#navmenu a:focus, ul#navmenu a:active,
ul#navmenu a.selected, ul#navmenu a.selected:hover, ul#navmenu a.selected:focus, ul#navmenu a.selected:active {
background : #333 url(images/glossyback2.jpg) repeat-x;
color : #009900;
}

ul#navmenu a.selected {
text-align : left;
cursor : default;
}

ul#navmenu a:hover, ul#navmenu a:focus, ul#navmenu a:active {
background : #333 url(images/glossyback2.jpg) repeat-x; /* CHANGED/ADDED THIS */
color : #fff;
}

The HTML for the index page is below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
<link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" />
<meta name="DC.title" lang="English" content="bkconway Designs" />
<meta name="DC.creator" content="Brandon Conway, Raztat" />
<meta name="DC.subject" lang="English" content="webmaster; Portfolio; Blog; Resume; web; sites; design; web design; build; games; computer; business;" />
<meta name="DC.description" lang="English" content="If you need a web site built or a for some one to watch over and update your web site you have come to the right place! Come on in to look at the services and prices." />
<meta name="DC.date" scheme="DCTERMS.W3CDTF" content="2007-08-16" />
<meta name="DC.type" scheme="DCTERMS.DCMIType" content="Text" />
<meta name="DC.format" content="text/html" />
<meta name="DC.format" content="3175 bytes" />
<meta name="DC.identifier" scheme="DCTERMS.URI" content="http://bkconway.com/index.html" />
<meta name="DC.language" scheme="DCTERMS.URI" content="English" />
<title>bkconway Designs</title>
<style type="text/css">

</style>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header"><img src="images/logo.jpg" width="600" height="125" /></div>
<div id="nav">
<h2>Navigation</h2>
<ul id="navmenu">
<li><a class="selected" href="index.html" >Home</a></li>
<li><a href="aboutme.html" >About me</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contactme.html">Contact me</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>

<form id="searchbox_006323111285553971831:ogrdh2djabg" action="http://www.google.com/cse">
<input type="hidden" name="cx" value="006323111285553971831:ogrdh2djabg" />
<input type="hidden" name="cof" value="FORID:0" />
<input name="q" type="text" size="20" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_006323111285553971831%3Aogrdh2djabg"></script>


</div>
<div id="main">
<h1>Home</h1>
<p> You must be here to find some one to watch over and update your website once or twice a week or to build you a website to get your small business off the ground or just to show case your hobby. Or maybe you just want a flash movie on your site. You have come to the right place. Just contact me to find out prices and what not. I will be honored to help you. And by helping you, you are helping me improve my skills as a web designer.<br />
<br />
I have knowledge in the following:<br />
<br />
Html   CSS   Dreamweaver   Photoshop   Flash </p>
<p>I
am an upcoming web designer and Graphic Designer coming out of Spartanburg Community College. I'm working on becoming a freelance web designer and graphic artist. It is my goal to be the best designer and coder that I can be.</p>
<p>I'm in the process of teaching myself CSS, so I'm not the best at it yet, but soon I will be. I also plan to dabble in Php once I get a computer that has Linux running on it.</p>
<p align="left">               <img src="images/me.jpg" width="181" height="139" /><br />
</p>
</div>
<div id="footer"><p id="footer" align="center"><a href="index.html">Home</a> | <a href="aboutme.html">About me</a> | <a href="resume.html">Resume</a> | <a href="portfolio.html">Portfolio</a> | <a href="contactme.html">Contact me</a> | <a href="blog.html">Blog</a><br />
bkconway.com 2007 contact <a href="mailto:brandon@anythingmultimedia.com">webmaster</a></p>
</div>
</div>
</body>
</html>

Thanks for the help!

boogyman

08-22-2007, 04:01 PM

Raztat

08-23-2007, 02:59 AM

im not even sure what that is really, im pretty new to css. what does it do?

Spiritvn

08-23-2007, 09:29 AM

5. Image replacement technique

It's always advisable to use regular HTML markup to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you've absolutely got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you've got no choice but to use an image.

Say for example, you wanted the top heading of each page to be ‘Buy widgets’, as you're a widget seller and you'd like to be found for this phrase in the search engines. You're pretty set on it being an obscure font so you need to use an image:
<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

This is OK but there's strong evidence to suggest that search engines don't assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be:
<h1><span>Buy widgets</span></h1>

Now, this obviously won't use your obscure font. To fix this problem place these commands in your CSS document:
h1
{
background: url(widget-image.gif) no-repeat;
}

h1 span
{
position: absolute;
left:-2000px;
}

The image, with your fancy font, will now display and the regular text will be safely out of the way, positioned 2000px to the left of the screen thanks to our CSS rule.

From: http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/

boogyman

08-23-2007, 01:34 PM

<h1><span>Buy widgets</span></h1>

Now, this obviously won't use your obscure font. To fix this problem place these commands in your CSS document:

the extra span is redundant and unnecessary.

<h1>PAGE TITLE</h1>

h1
{
background: url(widget-image.gif) no-repeat;
}

h1 span
{
position: absolute;
left:-2000px;
}

I tend to try and avoid absolute positioning as much as possible. instead I use this in my css stylesheet

<style type="text/css">

</style>

where 100px is the height of the image;

overflow:hidden will hide the text of the h1 without needing to use absolute positioning

<style type="text/css">

</style>

only start a new css style type if you do not have one already. instead just put the h1 code inside your existing one, and merge with the rest of your h1 styles if present

Spiritvn

08-23-2007, 01:47 PM

I copy from the article i have given the link, it's not mine.

Anyway, it's the sample on 1 single article, so he takes the <style> </style> it's usual i think. And then, i just take for Raztat a sample to know what you say Image Replacement Technique is.

Sry if it makes you feel abuse.

boogyman

08-23-2007, 01:54 PM

you have hardcoded the header image that is why it is running into the other column. because the columns are fluid which is a good thing, but if the width of the image is greater then the available width, it will trump the css unless you put overflow: hidden, which since its your logo you probably do not want to do

while it doesnt work in older IE Versions, you could use min-width property on the body and when the screen size is shrunk below it will add the horizontal scroll, not the perfect solution but it will accomplish what you need.

also have you thought about using the css image replacement technique?

im not even sure what that is really, im pretty new to css. what does it do?

css allows you the website to function according to how the web was initially designed. Think of "3 Pier columns"
Pier 1: The structure (HTML)
Meant for the underlying foundation and general structure of the page
Pier 2: The presentation (CSS)
the "hair-stylist" of the web. designed to give the page its cosmetic look and make the page appear more attractive
Pier 3: Action / Dynamics (Scripts)
This is also broken up into 2 more categories, client-side / server-side... and the difference between them is just where the processing of the code takes place. JavaScript is the popular means of creating actions on your page.

When you do not design your site according to plan, you put added "pressure" or reliance on one portion that it wasnt designed for, and while usually it doesn't cause a total meltdown of your site, you cannot guarantee the site to render exactly the same way for each browser on every system. Okay enough of the general coding lesson, but basically HTML was not designed at all to be used to make the layout / background color / text color at all. however when the web was initially designed, css wasn't widely supported and rough where it was... thus many developers, professional and amateur's alike, were and still are using nested tables / html for the presentation.

I copy from the article i have given the link, it's not mine.

Anyway, it's the sample on 1 single article, so he takes the <style> </style> it's usual i think. And then, i just take for Raztat a sample to know what you say Image Replacement Technique is.

Sry if it makes you feel abuse.

while would i feel abused?
anyway that is just one way of doing the technique.
I was showing him a different way, that didnt have the redundant code and therefore slower rendering time (even if only a fraction of a second) and it will also save him 1kb of hosting / transfer per use.

Raztat

08-23-2007, 10:33 PM

thanks for the help guys, Im trying to avoid tables to do the layout, do ppl still use tables to make layouts? If i have an option to let ppl choose tables or css for a layout should i charge less for tables?

boogyman

08-24-2007, 12:56 AM

yes there are many people that still use nested tables as means of site structure, however you shouldn't even allow it as a service. tables were made for storing data, not as a means of presentational structure / layout.

what you really should do is tell them about the benefits of creating a site using standards

Raztat

08-24-2007, 05:26 AM

o ok thanks a lot for the help. :)