Jump to content
Foe Clan Structure Final Ownage Elite Presents Foe Quick Links
[ Founder ] Bonesaw Pk, Ilx Ace Ilx [ Leader ] Danny
[ High Council ] Colin
don
Kruck
Polar
TBR
[ Council ] Rob
[] Teamspeak
ts.foe-rs.com
[] Discord
https://foe-rs.com/discord/
[] Public Clan Chat
Foe Public
[] Homeworld
World 333
[ Apply Here ]
[ Application Form / Requirements ]

New website design.

severed arow

By severed arow ,
in GFX

Recommended Posts

severed arow

severed arow

Posted
  • Author
Posted

Ikz and cholesterol post sometimes. Robin and dan are basically gone. dan posts very rarely, robin hasn't posted in forever.

Ah, shame. Anyhow I'll fix the highlights now and them begin slicing and coding :) I'll post the finished static website when it's done.

Link to comment
I C0NN0R I

I C0NN0R I

Posted
Posted

Ok here's the thing coded in it's static form, theres one thign though... The shadow at the top... I'm not sure how to fix it, does anyone know how to start a background image a specified amount of pixels away fro mthe top of the page?

http://relent.dyndns.org/sharks/index.php <--- you can only see this when my computer is on.

Looks so much better  :nice:

I havn't done any html in ages, but i'm pretty sure you can add like {margin:0; padding:0;} to pretty much anything, one of which is like a border that'll push it down. I'm also sure there's a way you can just set co-ords.

Like i said i havn't done html in ages but when i was doing some i pretty much put everything inside a hierarchy of containers and just floated shit so it can scale to fit dif screens.

Link to comment
severed arow

severed arow

Posted
  • Author
Posted

Ok here's the thing coded in it's static form, theres one thign though... The shadow at the top... I'm not sure how to fix it, does anyone know how to start a background image a specified amount of pixels away fro mthe top of the page?

http://relent.dyndns.org/sharks/index.php <--- you can only see this when my computer is on.

Looks so much better  :nice:

I havn't done any html in ages, but i'm pretty sure you can add like {margin:0; padding:0;} to pretty much anything, one of which is like a border that'll push it down. I'm also sure there's a way you can just set co-ords.

Like i said i havn't done html in ages but when i was doing some i pretty much put everything inside a hierarchy of containers and just floated shit so it can scale to fit dif screens.

Well yes I certainly have a hierarchy of containers, unfortunately that means if i paf or margin the shdaow it pushed EVERYTHING down, as for typing in where the background image should start... that works but not when its repeating on the y axis, you see that shadow is really like 1 pixel high or something small, and repeated down the page so that it can easily be the size of the content. Oh and glad it looks better :).

This is how i have my "hierarchy of containers" set up.

This is the header:

<!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" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Kamisoyokaze" />

<title>Beware of Sharks</title>
    <link href="headerstyle.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
    <div id="shadow">
        <div class="container">
            <div id="head"><h1>Beware of Sharks!</h1></div><!--end head-->
                <div id="nav1">
                <ul id="navlist">
                    <li class="nav1link"><a href="?page=home">Home</a></li>
                    <li class="nav1_divider"><span></span></li>
                    <li class="nav1link"><a href="?page=highscores">Highscores</a></li>
                    <li class="nav1_divider"><span></span></li>
                    <li class="nav1link"><a href="?page=map">Map</a></li>
                    <li class="nav1_divider"><span></span></li>
                    <li class="nav1link"><a href="?page=forums">Forums</a></li>
                    <li class="nav1_divider"><span></span></li>
                </ul>
            </div><!--end nav1-->
            <div style="clear: both;"></div>
            <div id="links">
            <div id="cont">
                <div class="inline">                 
                    <div id="forums"><h1><a href="?page=forums">Forums</a></h1></div>
                    <div id="forumstext"></div>      
                </div>
                <div class="inline">
                    <div id="map"><h1><a href="?page=map">Map</a></h1></div>
                    <div id="maptext"></div>
                </div>
                <div class="inline">
                    <div id="highscores"><h1><a href="?page=highscores">Highscores</a></h1></div>
                    <div id="highscorestext"></div>
                </div>
            </div>
        </div><!--end links-->
    </div> <!--end container-->
    </div><!--end shadow-->
</body>
</html>

This is the content area

<!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" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Kamisoyokaze" />

<title>Like a baws</title>
    <link href="homestyle.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
    <div id="shadow">
        <div class="container">
                <div id="nav2">
                <ul id="nav2list">
                    <li class="nav2link"><a href="?page=home§=updates">Updates</a></li>
                    <li class="nav2_divider"><span></span></li>
                    <li class="nav2link"><a href="?page=home§=events">Events</a></li>
                    <li class="nav2_divider"><span></span></li>
                    <li class="nav2link"><a href="?page=home§=polls">Polls</a></li>
                    <li class="nav2_divider"><span></span></li>
                    <li class="nav2link"><a href="?page=home§=donate">Donate</a></li>
                    <li class="nav2_divider"><span></span></li>
                </ul>
            </div><!--end nav1-->
            <div style="clear: both;"></div>
            <div id="content">
            <div id="cont">
                <div class="inline2">
                    <div id="area1">
                        <h3 class="title">Lorem ipsum</h3> <h5 class="date">20/03/2013</h5>
                        <p class="textbody">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Sed urna turpis, tempus id egestas vel, pretium eu
                        ligula. Maecenas consequat fermentum libero, non
                        sollicitudin quam euismod a. Nulla et nunc diam, 
                        ut ullamcorper metus. Sed non mi vel dolor cursus 
                        ultricies nec vitae nibh. In hac habitasse platea 
                        dictumst. In enim odio, ullamcorper eget dignissim 
                        laoreet, lobortis sed orci. Vivamus ac ipsum sed purus 
                        semper rhoncus malesuada sit amet mi. Pellentesque 
                        habitant morbi tristique senectus et netus et 
                        malesuada fames ac turpis egestas. Aliquam mauris 
                        tortor, scelerisque quis ultricies a, tempor id magna. 
                        Phasellus at quam id libero cursus malesuada non in 
                        sapien. Morbi dictum adipiscing dolor ut lacinia. 
                        Praesent elementum dignissim convallis. Donec dolor 
                        dolor, volutpat sit amet cursus vel, posuere ac eros. 
                        Curabitur in eleifend sem.</p> <h5 class="poster">Posted by Kamisoyokaze</h5>
                    </div>
                </div>
                <div class="inline2">
                    <div id="area2">
                        <h3 class="title">Lorem ipsum</h3> <h5 class="date">20/03/2013</h5>
                        <p class="textbody">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Sed urna turpis, tempus id egestas vel, pretium eu
                        ligula. Maecenas consequat fermentum libero, non
                        sollicitudin quam euismod a. Nulla et nunc diam, 
                        ut ullamcorper metus. Sed non mi vel dolor cursus 
                        ultricies nec vitae nibh. In hac habitasse platea 
                        dictumst. In enim odio, ullamcorper eget dignissim 
                        laoreet, lobortis sed orci. Vivamus ac ipsum sed purus 
                        semper rhoncus malesuada sit amet mi. Pellentesque 
                        habitant morbi tristique senectus et netus et 
                        malesuada fames ac turpis egestas. Aliquam mauris 
                        tortor, scelerisque quis ultricies a, tempor id magna. 
                        Phasellus at quam id libero cursus malesuada non in 
                        sapien. Morbi dictum adipiscing dolor ut lacinia. 
                        Praesent elementum dignissim convallis. Donec dolor 
                        dolor, volutpat sit amet cursus vel, posuere ac eros. 
                        Curabitur in eleifend sem.</p> <h5 class="poster">Posted by Kamisoyokaze</h5>
</div>
                </div>
                <div class="inline2">
                    <div id="area3">
                        <h3 class="title">Picture of The Week</h3> <h5 class="date">20/03/2013</h5>
                        <img src="images/potw.png" /> <h5 class="poster">Posted by Kamisoyokaze</h5>
                    </div>
                </div>
            <div style="clear: both;"></div>
            </div>
            <div id="footer"><p>Simple server Website (Lomz.dyndns.org) | Designed and coded by Kamisoyokaze | Server ran by Lomz | Beware of Sharks!</p></div>
        </div><!--end content-->
    </div> <!--end container-->
    </div><!--end shadow-->
</body>
</html>

Link to comment
severed arow

severed arow

Posted
  • Author
Posted

try "{position: absolute; top: x; left: y}"

x and y obv. being the co ords.

The problem with that is it is inside a div wich contains pretty much everything. if you move it, you move everything else. Usually you can specify the y coords of where you want the bg to start, unfortunately not when its repeating y.

There's definitely a way, also why does the background need to repeat?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go to topic listing

  • Recently Browsing   0 members, 0 Anonymous, 0 Guests

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept