Something really simple

delusion · #1 Jul 3rd, 2007, 16:04

Ok, I've created something really simple, but I need to put buttons at the right place. What's the best way to accomplish this in CSS?

html:

Code: Select all

<!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>
<title>fotonijkamp2007</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
    <div id="header"></div>
    <div id="mainback">
        Main
    </div>
    <div id="footer"></div>
</div>
</body>
</html>

css:

Code: Select all

body {
    background-color: #969696;
    background-image: url(background.jpg);
    background-repeat: repeat-x;
}
#container #header {
    background-image: url(images/header.jpg);
    width: 660px;
    height: 78px;
}
#container #mainback {
    background-image: url(images/mainback.jpg);
    background-repeat: repeat-y;
    height: auto;
    width: 660px;
    padding: 10px;
}
#container #footer {
    background-image: url(images/footer.jpg);
    height: 15px;
    width: 660px;
}

The tabs in the following attachment need to be filled with an Arial font with 3 menu-items..

kapyrossi · #2 Jul 4th, 2007, 08:41

So where do you want to put the buttons?

delusion · #3 Jul 4th, 2007, 08:44

Quote:

Originally Posted by kapyrossi

So where do you want to put the buttons?

In the little tabs on the top-right..

kapyrossi · #4 Jul 4th, 2007, 09:14

If I get it right, all of the attached image is one solid piece of graphics. If so, then, by my opinion you should crop the button image to a separate file and then use it as background for the <div> or <ul> <li> or other element that you will use for creating navbar. Within that navbar element you specify font-family: arial and font-size:whatever px;.

This is how I would do it. Position the navbar buttons either relative to <div id="header"></div> or absolute.

delusion · #5 Jul 4th, 2007, 09:26

The image I provided is a mock-up I made in Photoshop. My thought was to use the images (header) as a background and create text-links over it in the right position. It doesn't have to do anything fancy, it just has to be clickable..

delusion · #6 Jul 4th, 2007, 10:07

Hmm, I've been putzing around with the css.. I've cut up the header, bade seperate button-background-images, positioned them, but now the text is all over the place!

Lookie lookie: http://www.poppen.ca/showcase/fotonijkamp/

html:

Code: Select all

<!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>
<title>fotonijkamp2007</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
    <div id="logo"><img src="images/logo.jpg" width="386" height="78" /> </div>
    <div id="button2">Portfolio</div>
    <div id="button3">Contact</div>
    <div id="button1">Home</div>
    
  <div id="mainback">
        Main
  </div>
    <div id="footer"></div>
</div>
</body>
</html>

CSS:

Code: Select all

body {
    background-color: #969696;
    background-image: url(background.jpg);
    background-repeat: repeat-x;
}
#container #logo {
    width: 386px;
    height: 78px;
    float: left;
}
#container #button1 {
    background-image: url(images/button1.jpg);
    float: none;
    height: 78px;
    width: 87px;
    position: relative;
    left: 386px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bolder;
    padding: 0px;
    color: #FFFFFF;
    margin: 0px;
}
#container #button2 {
    background-image: url(images/button2.jpg);
    left: 87px;
    height: 78px;
    width: 86px;
    position: relative;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bolder;
    color: #FFFFFF;
}
#container #button3 {
    background-image: url(images/button3.jpg);
    float: left;
    left: 87px;
    height: 78px;
    width: 101px;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bolder;
    color: #FFFFFF;
}

#container #mainback {
    background-image: url(images/mainback.jpg);
    background-repeat: repeat-y;
    height: auto;
    width: 660px;
    padding: 10px;
}
#container #footer {
    background-image: url(images/footer.jpg);
    height: 15px;
    width: 660px;
}

I don't get it.. What am I doing wrong?

fuzzee · #7 Jul 4th, 2007, 13:09

I fixed the secon and the third button by adding padding to the divs they were in: you had the divs sitting at the top of the page, so the text went up there too. The first button you'll have to see what you do!

Code: Select all

#container #button2 {
background-image:url(images/button2.jpg);
color:#FFFFFF;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:18px;
font-weight:bolder;
height:30px;
left:87px;
padding:35px 0px 0px 6px;
position:relative;
width:80px;
}



#container #button3 {
background-image:url(images/button3.jpg);
color:#FFFFFF;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:18px;
font-weight:bolder;
height:30px;
left:87px;
padding:35px 0px 0px 6px;
position:relative;
width:95px;
}

Hope that helps!

You can make them look better with more padding, just remember to toggle the height and the width to keep it looking good.

delusion · #8 Jul 4th, 2007, 13:19

I asked a friend of mine too about this, and he came up with this css:

Code: Select all

body {
    background-color: #969696;
    background-image: url(images/background.jpg);
    background-repeat: repeat-x;
    
    color: #fff;
}
div#logo {
    position: relative;
    width: 386px;
    height: 78px;
    float: left;
}

div#menu {
    position: relative;
    float: left;
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bolder;
    
}
div#menu div {
    padding: 33px 0 0 8px;
    height: 45px;
}
div#button1 {
    position: relative;
    float: left;
    width: 79px;
    background: url(images/button1.jpg) no-repeat;
}

div#button2 {
    position: relative;
    float: left;
    width: 78px;

    background: url(images/button2.jpg) no-repeat;
}
div#button3 {
    position: relative;
    float: left;
    width: 93px;

    background: url(images/button3.jpg) no-repeat;
}

#container #mainback {
    position: relative;
    margin:0;
    background: url(images/mainback.jpg) repeat-y;
    height: auto;
    width: 660px;
    padding: 10px;
    clear:both;
}
#container #footer {
    background-image: url(images/footer.jpg);
    height: 15px;
    width: 660px;
    clear: both;
}

I'll try yours too fuzzee. See what works best for me..

delusion · #9 Jul 4th, 2007, 15:08

Ok,

I got it!
http://www.poppen.ca/showcase/fotonijkamp/

pa007 · #10 Jul 4th, 2007, 18:00

Looks great! I love tabbed menus. I like your dangly header too.

Pete.

delusion · #11 Jul 4th, 2007, 18:59

Quote:

Originally Posted by pa007

Looks great! I love tabbed menus. I like your dangly header too.

Pete.

Thanks.. I wanted to put the site in the free website critique, but I'm not sure if I want to make more changes to it

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Simple Job	MetallicWarfare	Job Opportunities	0	May 24th, 2008 13:30
Just some simple css help! Please??	lefty	Starting Out	9	Apr 28th, 2008 11:19
Very Simple Cms	christopher	Website Planning	3	Apr 26th, 2008 18:19
Just want simple Background Song (.mp3) and a simple start/stop.	BlackReef	Flash & Multimedia Forum	4	Jun 28th, 2007 08:04
simple GET	moiseszaragoza	JavaScript Forum	4	Mar 24th, 2007 01:35

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Something really simple