I made a layout of a size and im wondering what size it should be because i made one site that was 800 x 600 and it was fien for me and then my friend looked at it and he said it was reapeting and is there a way to make it to adjust to ever monitor?
Printable View
I made a layout of a size and im wondering what size it should be because i made one site that was 800 x 600 and it was fien for me and then my friend looked at it and he said it was reapeting and is there a way to make it to adjust to ever monitor?
Ideally we would need to see your code to give you answers that relate to you.
However, if you are using CSS, you probably have somethng like
[code]
.content
{
width: 800px;
}
[/cpde]
If you use a percentage vakue, such as
That element will have whatever percent of it's parent.Code:.content
{
width:70%;
}
Post your code?
Oh, I just made an image and set it as my background i didnt use any codes. could you help me out on coding a template? Im using Photoshop cs2 and dreamweaver.
How did you do it then?Quote:
Originally Posted by Rjhoops92
Alright heres a sample of my site www.scargaming.awardspace.com hers my codesHTML Code:<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>#scArGaming Idle And Support :: Coming Soon!</title>
<style type="text/css">
<!--
body,td,th {
font-family: Arial;
font-size: 12px;
color: #000000;
}
body {
background-color: #FFFFFF;
background-image: url(images/coming.jpg);
background-repeat: repeat-x;
}
-->
</style></head>
<body>
<p align="center">
<h1>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
Yeah, i still need hel pwith the sizes because i want to make a site like www.complexityclan.com and i REALLY dont know where to start. Just how its centered and then i can do the rest. I dont want a login system or flash.
Is the layout size the issue? or is it the background? If your friend is seeing more of the background than you are, a tiling of sorts, it could be because you set the background to repeat-x. If that's the issue you can resolve it easily. [minicode]background-repeat: no-repeat;[/minicode]
Other comments:
The link to your site doesn't work.
Here on WDF, when you are posting html code blocks, use [html] instead of [code]to get fancy color-coding in your post ;)
The centering thing, CSS, banner, columns questions have been
popping up a lot lately ... I had this test site set up to answer another
question, but it might fit here too:
http://catpin.com/ets/
Demonstrates how to center a page that fits on an 800 pixel browser
without the horizontal scroll bar.
The CSS page used is:
http://catpin.com/ets/main.css
Go ahead and copy the HTML and CSS to see if you might be able
to utilize any of the ideas provided ...
Thanks for the download im foolin around with it, although im wondering if it is possible to change the width of the center area in the css code. Also is it possible to put an image for the border on the sides?
Heres the css code
HTML Code:/* ----------------------------------------------------------------+----------------------
| Cascading Style Sheet | |
-----------------------------------------------------------------+---------------------*/
html, body {
background-color: black;
cursor: default;
font-family: "Verdana", arial, "MS Sans Serif", Geneva, sans-serif;
font-weight: normal;
font-size: 10px;
line-height: normal;
margin: auto;
padding: 0px 0px 0px 0px;
min-width: 770px;
text-align: center;
}
a:link,a:active,a:visited {
background-color: transparent;
color: #151515;
text-decoration: none;
font-family: Helvetica, "MS Sans Serif", Geneva, sans-serif;
font-weight: bold;
font-size: 10pt;
}
a:hover {
background-color: #fff8a8;
color: #151515;
text-decoration: none;
font-family: Helvetica, "MS Sans Serif", Geneva, sans-serif;
font-weight: bold;
font-size: 10pt;
}
h1 {
background-color: #ffffff;
padding: 10px 0px 10px 0px;
MARGIN: 0px;
FONT: bold 110% Verdana,sans-serif;
COLOR: #000000;
TEXT-ALIGN: center;
}
/*
-----------------------------------------------------------------------------------------
| Temp Folio ID's and Classes
-----------------------------------------------------------------------------------------
*/
#banner {
background: url(logo.gif) no-repeat;
background-color: #ffffff;
margin: 0px auto;
clear: both;
padding: 0px 0px 0px 0px;
width: 770px;
height: 200px;
text-align: center;
}
#content {
background-color: #ffffff;
margin: 0px auto;
padding: 0px 0px 0px 0px;
width: 770px;
border-style:solid;
border-color:#000;
border-width: 2px;
}
#wrapper {
padding: 0px 0px 0px 0px;
overflow: hidden;
}
#center {
background-color: #ffffff;
font-family: Verdana, "MS Sans Serif", Geneva, sans-serif;
font-weight: normal;
padding: 0px 20px 0px 20px;
width: 400px;
font-size: 10pt;
color: #000000;
border-right: 1px solid #f7d794;
border-left: 1px solid #f7d794;
text-align: justify;
float: left;
}
#center_left {
background-color: #ffffff;
font-family: Verdana, "MS Sans Serif", Geneva, sans-serif;
font-weight: normal;
padding: 0px 10px 0px 10px;
width: 115px;
font-size: 10pt;
color: #000000;
text-align: left;
float: left;
}
#center_right {
background-color: #ffffff;
font-family: Verdana, "MS Sans Serif", Geneva, sans-serif;
font-weight: normal;
padding: 0px 5px 0px 10px;
width: 160px;
font-size: 9pt;
color: #000000;
text-align: left;
float: left;
}
#content_bottom {
background-color: #ffffff;
margin: 0px auto;
width: 100%;
clear: both;
font: 11px Verdana,Arial,sans-serif;
color: #5a5a5a;
border-top: 2px solid #f7d794;
text-align: center;
}
#nav{
font-family: Helvetica, "MS Sans Serif", Geneva, sans-serif;
margin: 0px auto;
height: 26px;
padding: 0px 0px 0px 0px;
border-bottom: 2px solid #f7d794;
}
div.spacer {
/* width: 74px; */
/* height: 141px; */
float: left;
}
div.button {
padding: 4px 7px 4px 7px;
text-align: center;
border-style:solid;
border-color:#a5aed6;
border-width: 1px;
float: left;
}
div.button2 {
padding: 4px 7px 4px 7px;
text-align: center;
font-size: 10pt;
font-weight: bold;
background-color: #fff8a8;
border-style:solid;
border-color:#a5aed6;
border-width: 1px;
float: left;
}
Yes, adjust the widths for the <div> sections as defined ...
And add a border to whatever <div> section you want.
That's the whole point of having the .css file. It's there for you
to define whatever things you want for each section.
You might want to search Google for a tutorial, as the changes you
want you need to make yourself ... to get it exactly the sizes and
border colors you desire.
I don't know of a way to make a border out of an image, but you can fake it w/ nested divs, the outer one w/ the background image and the inner one w/ a solid background color and a wee bit smaller.
CSS:
Code:#div1{
width: 250;
background: url(image.gif);
}
#div2{
width: 240;
position: relative;
margin: auto auto;
}
HTML Code:<div id="div1">
<div id="div2">all the cool stuff you want to tell people</div>
</div>
I guess I mis-read the post ...
I just need to know the code on how to change the widht of the center area where all my text is....Quote:
Yes, adjust the widths for the <div> sections as defined ...
And add a border to whatever <div> section you want.
That's the whole point of having the .css file. It's there for you
to define whatever things you want for each section.
You might want to search Google for a tutorial, as the changes you
want you need to make yourself ... to get it exactly the sizes and
border colors you desire.
#center {
background-color: #ffffff;
font-family: Verdana, "MS Sans Serif", Geneva, sans-serif;
font-weight: normal;
padding: 0px 20px 0px 20px;
width: 400px;
font-size: 10pt;
color: #000000;
border-right: 1px solid #f7d794;
border-left: 1px solid #f7d794;
text-align: justify;
float: left;
}
You can make it bigger. If the 3 widths (center-left, center, center-right) exceed
the maximum width of your page, it will shift the sections, so if you make the number
400 too much larger, make the other sections smaller to make-up for the difference.
... and you can adjust padding and all that.
The padding values go like this:
padding: top right bottom left;
so, it's currently set as:
padding: 0px 20px 0px 20px;
Ohh thankyou! I woulda never found that without your help (im a bad proofreader =\ ) thankyou soo much =]