« previous next »
Pages: [1]

Author Topic: CSS Help!  (Read 778 times)

Johnny Blockhead

April 24, 2014, 04:10:57 PM
Hello, forums. I'm experimenting in CSS right now, but having some issues. I don't like the space between the toolbar and the header, is there any way to get rid of it? It has something to do with margins, but everything I have tried has failed. Also, is there a good way to separate the words in the banner? I want them around 10px apart, any way?
My site can be found at this link.
-snip-
« Last Edit: April 26, 2014, 03:08:34 PM by Johnny Blockhead »

Ad Bot

Advertisement

Night Fox

April 24, 2014, 04:19:08 PM
set the banner's bottom margin to 0px? have you already tried that?
and in the banner, do you want to separate the words or the letters? if you separate the words a lot, it'll just look weird. but I do suggest a bigger font

but if you want the letters separate, it's
#banner {
letter-spacing: 10px
}

also, I'd use less line breaks in the code. it doesn't really matter, but it makes it a lot easier to read
and you don't have to capitalize all of the style properties if you don't want to
« Last Edit: April 24, 2014, 04:22:01 PM by Night Fox »

Headcrab Zombie

April 24, 2014, 04:33:31 PM
Change margin-top in #toolbar to -15px. It seems to me as a strange thing to do, but I can't find anything else that works.



Quote from: Night Fox on April 24, 2014, 04:19:08 PM
use less line breaks in the code
This, please

Quote from: Night Fox on April 24, 2014, 04:19:08 PM
you don't have to capitalize all of the style properties
It's better not to.
Or rather, it's best to stick to one capitalization pattern, it doesn't matter which one (uncapitalized is more common) as long as you don't constantly change it



Also, I'd try to straighten up the indenting, it's all over

A few FYIs:
It's called a navbar, not a toolbar
HTML5 includes new semantic tags, such as <header> and <nav> so you don't have to use a ton of <div>s for everything. It works the same but the new tags are more descriptive
« Last Edit: April 24, 2014, 04:48:44 PM by Headcrab Zombie »

Night Fox

April 24, 2014, 04:58:48 PM
here
I changed some things extra that I thought would be better for the page
also added some links with the URLs that I figured you'd end up using but you can easily change that if you wanted
you might want to change some of the class or ID names that I used, too
and last but not least I tried to make the code itself look better

http://foxscotch.us/johnny.html
« Last Edit: April 24, 2014, 05:01:36 PM by Night Fox »

TheBlackParrot

April 24, 2014, 05:14:32 PM
Try using a CSS reset as well, helps with getting it to look the same in other browsers.

Johnny Blockhead

April 26, 2014, 02:57:58 PM
<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1252">
      
         <title>Spooky Sushi - Homepage</title>
      
         <style>
                  #banner
                  {
                      width: 1000px;
                      height: 60px;
                      background-color: #949494;
            color: #000000;
            font-size:10px;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            margin-top: 15px;
         }

         .navbar
         {
            width: 1000px;
            height: 30px;
            background-color: #D1D1D1;
            margin-right: auto;
            margin-left: auto;
            text-align: center;
            margin-top: -15px;
            margin-bottom: 0px;
         }
                     
         #whitespace
         {
            width: 1000px;
            height: 700px;
            background-color: #F2F2F2;
            margin-right: auto;
            margin-left: auto;
            margin-top: -25px;
            margin-bottom: 0px;
            font-family: "Century Gothic";
         }
                     
         #footer
         {
            width: 1000px;
            height: 60px;
         }

         #wrapper
         {
            text-align: left;
            font-size: 15px;
            font-family: "Georgia";
         }

         .title
         {
            font-size: x-large;
            margin: 0px;
         }

         .subtitle
         {
            margin-top: 1px;
            margin-left: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            font-size: medium;
         }
                     
         #whitetext
         {
            adding-top: 30px;
            width: 700px;
            margin-right: 50px;
            margin-left: 50px;
         }
                     
        </style>

    </head>
   
    <body bgcolor="#E8E8E8">
      <div id="wrapper">
            <div id="banner">
            <p class="title">Spooky Sushi</p>
               <div></div>
                <p class="subtitle">Game Development</p>
         </div>
         <div class="navbar">
            <p>Company Information | Released Games | Help and Support</p>
         </div>
         <div id="whitespace">
            <div id="whiteText">
                  <div class="almostTitle">
                     <center>
                        <p>Welcome!</p>
                     <center>
                  </div>
                  <p>
                     Hello! We are a game design company that is just getting our groundings. We are developing a retail game. In the meantime, though, we are going to be releasing some games testing a few design processes. We don't have an exact release date on these games, but it is definitely going to be held back until the website is completed. Keep tabs on us, we will impress you.
                  </p>
            </div>
         </div>
         <div class="navbar">
         </div>
   </body>
</html>
http://spookysushi.com
I tried to fix the code up a bit, but I have another question. What would be the most effective way to  have the sides of whitetext be separated from the sides of whitespace? It looks a little scrunched. I messed around with the margins, nada. Maybe something to do with padding?

Side Note: The formatting on #banner gets messed up whenether I copy/paste it somewhere (seen above). It looks regular in my text editor, though. http://imgur.com/ktu3kGf
« Last Edit: April 26, 2014, 03:01:40 PM by Johnny Blockhead »

Doomonkey

April 26, 2014, 03:04:38 PM
Google the box model.

Steve5451²

April 26, 2014, 03:06:35 PM
body {
margin: 0;
}

at least from what I can tell, but I hardly have any idea what you're trying to say, you need to elaborate.
You have me on steam and I told you I'd help you with any web things you needed.
« Last Edit: April 26, 2014, 03:08:46 PM by Steve5451² »

MrKitKat

April 26, 2014, 03:22:49 PM
counter strike source!?

Steve5451²

April 26, 2014, 03:25:34 PM
Quote from: MrKitKat on April 26, 2014, 03:22:49 PM
counter strike source!?

Yeah, he's remaking CSS.

Headcrab Zombie

April 26, 2014, 03:43:39 PM
Quote from: Johnny Blockhead on April 26, 2014, 02:57:58 PM
Maybe something to do with padding?
Yes
padding-left and padding-right
Either in another div class, another p class, or an inline style

dargereldren

April 26, 2014, 04:42:03 PM
Not really related to what you're wondering about (but still a good idea to mention):

Quote from: Johnny Blockhead on April 26, 2014, 02:57:58 PM
font-family: "Century Gothic";
Quote from: Johnny Blockhead on April 26, 2014, 02:57:58 PM
font-family: "Georgia";
Just in case someone doesn't have a font you're using, you can supply multiple fonts.
For example:
Code: (http://forum.blockland.us/Themes/Blockland/style.css?fin11) [Select]
font-family: verdana, arial, helvetica, sans-serif;
http://www.w3schools.com/cssref/pr_font_font-family.asp
Quote
The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
Quote from: /Pacha on April 26, 2014, 04:46:01 PM
or just use google and its font api
Also this. Though I still recommend using fallbacks just in case a browser doesn't support it.
« Last Edit: April 26, 2014, 06:26:34 PM by dargereldren »

/Pacha

April 26, 2014, 04:46:01 PM
Pages: [1]
« previous next »