The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> background issues., <div id="container"> </div> :P
L0G!C@LH34D$H0T
post Sep 8 2011, 06:09 PM
Post #1


Newbie
*

Group: Members
Posts: 11
Joined: 8-September 11
Member No.: 15,354
Hello all, im new here, but not so new to html. I used to use tables to design my websites, but that got difficult to make it look nice, so i decided id switch to div.

http://tieroneairsoft.net/NewSite/index.php is the layout im working on now, and im having issues with the background being full screen, and the margin that surrounds the hole thing. If i could get some help with it, that would be nice.

index.php:
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=utf-8" />
<title>Testing</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container" style="height:inherit;width:100%;background-image:url(images/combatbg.jpg);">

<div id="header" align="center">
<img src="images/site_logo1.png" /></div>

<div id="menu" style="background-image:url(images/transparent.png);height:auto;width:250px;float:left;">
<img src="images/cellpic4.gif" />
<a href="index.php">Menu</a><br />
<a href="#">Forums</a><br />
<a href="#">Team</a><br />
<a href="#">Servers</a>
<img src="images/cellpic4.gif" /></div>

<center><div id="content"style="background-image:url(images/transparent.png);height:auto;width:780px;">
<img src="images/cellpic5.jpg" />
<p class="welcometxt" align="center">
Welcome to the (Team Name) website! We are a new gaming team, formed on the 24th of August in 2011. We play Call of Duty: Modern Warfare 2 right now, and plan to expand to Battlefield 3(Opening October 25th, 2011) and Call of Duty: Modern Warfare 3(Opening November 8th, 2011). ((Team Name) was founded by L0G!C@LH34D$H0T and FROZ3NxSNIP3R. We are a selected team of individuals with great skill in our own departments, but together work as one to destroy the enemey in the fastest, strongest way possible, while minimizing our casualties. If you would like to enlist yourself as a mercenary in (Team Name), follow the instructions on <a href="#">this page!</a> You will recieve a email shortly after your application, with further instructions.
<br />
Good Luck
</p>
<p class="postedby" align="left">Posted by: <a href="#">L0G!C@LH34D$H0T</a></p>
<img src="images/cellpic5.jpg" /></div></center>

<br /><div id="footer" style="background-image:images/transparent.png;clear:both;text-align:center;">
Copyright © 2011 (Team Name)</div>

</div>

</body>
</html>


style.css:
CODE


container {
    background-image:url(../images/combatbg.jpg);
    background-attachment:scroll;
    background-repeat:repeat;
    background-position:center;
    border:0%;
    alignment-adjust:baseline;
    margin-left:0px;
    margin-top:0px;
    margin-bottom:0px;
}
menu-box {
    color:#FFF;
}
text-blocks {
    color:#FFF;
}
a:link {
    color:#FFF;
    text-decoration:underline;
}
a:visited {
    color: #FFF;
    text-decoration:underline;
}
logo {
    border:none;
    float:center;
}
.welcometxt {
    font-size: large;
    color: #FFF;
}
.postedby {
    color:#F00;
}
footer {
    color:#000;
}


-Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 8 2011, 06:11 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
See http://htmlhelp.com/faq/html/effects.html#no-margins . You only need the CSS bit though. The proprietary stuff is of no use anymore.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
L0G!C@LH34D$H0T
post Sep 8 2011, 06:19 PM
Post #3


Newbie
*

Group: Members
Posts: 11
Joined: 8-September 11
Member No.: 15,354
thank you for that. fixed my issues(working with easy php of my laptop atm.). Now this dosnt relate, but i dont see why i should open a new topic.

Is there a way for me to write text on those cellpics that i have set up (the camo images) without setting up tables?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 8 2011, 06:25 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
Cell pics? Don't see any pictures besides the background. Sorry, but I'm a little slow. blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
L0G!C@LH34D$H0T
post Sep 8 2011, 06:27 PM
Post #5


Newbie
*

Group: Members
Posts: 11
Joined: 8-September 11
Member No.: 15,354
np.

in each box, their is an image above the text, and below. they are stated in the code
CODE

<div id="menu" style="background-image:url(images/transparent.png);height:auto;width:250px;float:left;">
(HERE)<img src="images/cellpic4.gif" />
<a href="index.php">Menu</a><br />
<a href="#">Forums</a><br />
<a href="#">Team</a><br />
<a href="#">Servers</a>
(HERE)<img src="images/cellpic4.gif" /></div>

I wanted to put text on the first one, but without making tables. If its possible.

-Thanks

***EDIT***

just uploaded a new copy. tongue.gif

This post has been edited by L0G!C@LH34D$H0T: Sep 8 2011, 06:29 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Sep 8 2011, 06:36 PM
Post #6


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
You could use the "cellpics" as background images for something.

BTW, part of your page is centered, and part is aligned to the left edge. They'll line up the way you expect only at certain widths of browser windows.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
L0G!C@LH34D$H0T
post Sep 8 2011, 06:39 PM
Post #7


Newbie
*

Group: Members
Posts: 11
Joined: 8-September 11
Member No.: 15,354
QUOTE(Darin McGrew @ Sep 8 2011, 07:36 PM) *

You could use the "cellpics" as background images for something.

Wouldnt that be the same as using a table?

QUOTE(Darin McGrew @ Sep 8 2011, 07:36 PM) *

BTW, part of your page is centered, and part is aligned to the left edge. They'll line up the way you expect only at certain widths of browser windows.

What do you mean by that?


-Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 8 2011, 06:50 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
Ack, I thought those were borders. Well, what Darin said.

QUOTE
Wouldnt that be the same as using a table?


No. You can use a background image with anything if you do it with CSS.

QUOTE

What do you mean by that?


Make your browser window smaller and you'll see. You won't be happy. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
L0G!C@LH34D$H0T
post Sep 8 2011, 06:53 PM
Post #9


Newbie
*

Group: Members
Posts: 11
Joined: 8-September 11
Member No.: 15,354
QUOTE(pandy @ Sep 8 2011, 07:50 PM) *

Make your browser window smaller and you'll see. You won't be happy. wink.gif

Okay, so how do i fix it then? Im pretty confused. huh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 8 2011, 07:10 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
You could put the menu and the content in a common container and center that. You can still float the menu left, but this way it won't float further left than the container lets it. So, make the container just wide enough to accommodate the content and the menu. This is if you want it all centered, of course.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
L0G!C@LH34D$H0T
post Sep 8 2011, 07:30 PM
Post #11


Newbie
*

Group: Members
Posts: 11
Joined: 8-September 11
Member No.: 15,354
hmmm. thats very confusing... i dont know how i would even do that. xD



http://tieroneairsoft.net/
That is what im trying to recreate, without using tables, as that uses tables, but its different because that site ( http://tieroneairsoft.net/ ) is a CMS and includes different files, but uses tables, which is what im trying to not use. Im only going to recreate it to a point, but over all im trying to do that.

if that makes any sense.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 8 2011, 07:49 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
QUOTE(L0G!C@LH34D$H0T @ Sep 9 2011, 02:30 AM) *

hmmm. thats very confusing... i dont know how i would even do that. xD


Sure you do. Something like this. I wouldn't normally use all DIVs and I wouldn't use all those BR tags, but for demonstrational purposes...

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Using a container DIV</title>

<style type="text/css">
#container { width: 70%;
border: 3px dashed #000;
margin-left: auto; margin-right: auto }
#menu { float: left;
width: 10em;
background: #f00 }
#content { background: #ff0;
margin-left: 10em /*so the text won't wrap under the menu }

</style>

</head>


<body>


<div id="container">
<div id="menu">
linkie<br>
linkie<br>
linkie<br>
linkie<br>
linkie<br>
linkie<br>
linkie<br>
linkie<br>
linkie<br>
linkie
</div>

<div id="content">
Blah blah</br>
blah blah</br>
blah blah</br>
blah blah</br>
blah blah</br>
blah blah</br>
blah blah</br>
blah blah</br>
blah blah</br>
blah blah</br>
blah blah</br>
blah blah</br>
blah blah</br>
blah blah</br>
blah blah</br>
blah blah</br>
blah blah
</div>
</div>


</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
L0G!C@LH34D$H0T
post Sep 8 2011, 08:56 PM
Post #13


Newbie
*

Group: Members
Posts: 11
Joined: 8-September 11
Member No.: 15,354
Thank you for that, but that dosn't apply to what im trying to do. I dont want the blocks(boxes) to be touching, id like about the same gap in between. If you know what i mean?

-Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 8 2011, 09:27 PM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
It was just meant to show the layout principle. For a gap use more margin.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
L0G!C@LH34D$H0T
post Sep 12 2011, 01:43 AM
Post #15


Newbie
*

Group: Members
Posts: 11
Joined: 8-September 11
Member No.: 15,354
QUOTE(pandy @ Sep 8 2011, 10:27 PM) *

It was just meant to show the layout principle. For a gap use more margin.


Ok, I think I figured it out (sorry for the big time delay, got busy), and it works fine when i change the size of my browser (dosnt get all mushed up). I wanted to add another block on the left side, but when I do it over laps. Im currently working on a Member System with help from youtube videos, and I dont have it set up to run on my website, but I'd like to have the login block above the main menu block, with about the same amount of space between the block that has the Welcome and the image that has the links on it.

http://tieroneairsoft.net/NewSite/index.php

There is the link, and here is my index.php code:

CODE

<?php
error_reporting (E_ALL ^ E_NOTICE);
session_start();
$userid = $_SESSION['userid'];
$username = $_SESSION['username'];
?>
<!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=utf-8" />
<title>Testing</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body background="images/combatbg.jpg">

<div id="container" style="height:100%;width:100%;">

<div id="header" align="center">
<img src="images/site_logo1.png" /></div>
<div id="topbar">
<div id="welcome" align="left">Welcome</div><div id="date" align="right"><?php echo date("F d, Y");?></div><div id="links" align="center">| <a href="index.php">Menu</a> | <a href="#">Forums</a> | <a href="#">Team</a> | <a href="#">Servers</a> |</div>
</div>

<br />

<div id="login" style="background-image:url(images/transparent.png);height:auto;width:13%;float:left;">
<div id="cellpic4" align="center">Login</div>
    <a href="./login.php">Login</a>  
    <br />
    <a href="./register.php">Register</a>
    <br />
    <a href="./forgotpass.php">Forgot Password</a>
<div id="cellpic4"></div></div>

<div id="menu-box" style="background-image:url(images/transparent.png);height:auto;width:13%;float:left;">
<div id="cellpic4" align="center">Main Menu</div>
<img src="images/icon.png" />  <a href="index.php">Menu</a><br />
<img src="images/icon.png" />  <a href="#">Forums</a><br />
<img src="images/icon.png" />  <a href="#">Team</a><br />
<img src="images/icon.png" />  <a href="#">Servers</a>
<div id="cellpic4"></div></div>

<div id="menu" style="background-image:url(images/transparent.png);height:auto;width:13%;float:right;">
<div id="cellpic4" align="center">TS3 Block</div>
<center><iframe src="http://cache.www.gametracker.com/components/html0/?host=209.247.83.121:9215&bgColor=333333&fontColor=CCCCCC&titleBgColor=222222&titleColor=FF9900&borderColor=555555&linkColor=FFCC00&borderLinkColor=222222&showMap=0¤tPlayersHeight=200&showCurrPlayers=1&showTopPlayers=0&showBlogs=0&width=170" frameborder="0" scrolling="no" width="170" height="388"></iframe></center>
<div id="cellpic4"></div></div>

<center><div id="content" align="center" style="background-image:url(images/transparent.png);height:auto;width:70%;">
<div id="cellpic5" align="center">Welcome</div>
<p class="welcometxt" align="center">
Welcome to the (Team Name) website! We are a new gaming team, formed on the 24th of August in 2011. We play Call of Duty: Modern Warfare 2 right now, and plan to expand to Battlefield 3(Opening October 25th, 2011) and Call of Duty: Modern Warfare 3(Opening November 8th, 2011). (Team Name) was founded by L0G!C@LH34D$H0T and FROZ3NxSNIP3R. We are a selected team of individuals with great skill in our own departments, but together work as one to destroy the enemey in the fastest, strongest way possible, while minimizing our casualties. If you would like to enlist yourself as a mercenary in (Team Name), follow the instructions on <a href="#">this page!</a> You will recieve a email shortly after your application, with further instructions.
<br />
Good Luck
</p>
<p class="postedby" align="left">Posted by: <a href="#">L0G!C@LH34D$H0T</a></p>
<div id="cellpic5"></div></div></center>


<br /><div id="footer" style="background-image:images/transparent.png;clear:both;text-align:center;">
Copyright © 2011 (Team Name)</div>

</div>

</body>
</html>


And my style.css:

CODE


#topbar {
    background-image:url(../images/cellpic5.jpg);
    background-repeat:repeat;
    color:#FFF;
    width: 100%;
    height: 25px;
}
#welcome {
    float: left;
    height: 25px;
    color: #FFF;
}
#links {
    height: 25px;
    color: #FFF;
}
#date {
    float: right;
    height: 25px;
    color: #FFF;
}
#cellpic4 {
    background-image: url(../images/cellpic4.gif);
    width: auto;
    height: 25px;
    color: #FFF;
    border: thin;
}
#cellpic5 {
    background-image: url(../images/cellpic5.jpg);
    background-repeat: repeat;
    width: auto;
    height: 25px;
    color: #FFF;
}
#container {
    background-image:url(../images/combatbg.jpg);
    background-attachment:scroll;
    background-repeat:repeat;
    background-position:center;
    border:0%;
    alignment-adjust:baseline;
    margin: 1px;
}
#login {
    color: #FFF;
}
#menu-box {
    color:#FFF;
}
#text-blocks {
    color:#FFF;
}
a:link {
    color:#FFF;
    text-decoration: none;
}
a:visited {
    color: #FFF;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:active {
    color: #F00;
}
#logo {
    border:none;
    float:center;
}
.welcometxt {
    font-size: large;
    color: #FFF;
}
.postedby {
    color:#F00;
}
#footer {
    color:#000;
}
#content {
    color: #FFF;
}



-Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
L0G!C@LH34D$H0T
post Sep 12 2011, 03:42 AM
Post #16


Newbie
*

Group: Members
Posts: 11
Joined: 8-September 11
Member No.: 15,354
I did fix my issue. Got it all fixed up, including my member system!! xD

I cant upload it to the same domain though, so I will post another link when i get different webspace set up.

-Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
L0G!C@LH34D$H0T
post Sep 12 2011, 07:14 AM
Post #17


Newbie
*

Group: Members
Posts: 11
Joined: 8-September 11
Member No.: 15,354
http://teamnamesite.uphero.com/index.php

that is my most recent upload of my website. Took some advice from the helpful people here. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
L0G!C@LH34D$H0T
post Sep 12 2011, 07:15 AM
Post #18


Newbie
*

Group: Members
Posts: 11
Joined: 8-September 11
Member No.: 15,354
And the User's Functions do work. smile.gif

This post has been edited by L0G!C@LH34D$H0T: Sep 12 2011, 07:15 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 12 2011, 09:14 AM
Post #19


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,731
Joined: 9-August 06
Member No.: 6
There you go! smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 11:22 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC