Help - Search - Members - Calendar
Full Version: Beginner HTML & CSS Question
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Ross
Hi all,

I have been trying to customise a navigation bar within my website in creation however I am having problems as the css code doesn't seem to work. To be more specific, it seems that #menu and below does not configure.

Apologies if this is a small error as this is my first attempt at a website or even html.

Thanks for any help given.

Screenshots: http://imgur.com/a/WaD8t

Ross
If anyone could help with this that would be great.

- Why is the css code from #menu and down not responding?
Christian J
Please link to a sample page, or post the complete HTML and CSS here as real text (not an image of code).
Ross
HTML

<!DOCTYPE html>
<html>

<head>
<title>PRACTICE</title>
<link href="style-home.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>


<div id="menu">
<ul>
<li><a href="home.html" style="color: white; text-decoration: none;">HOME</a></li>
<li><a href="gamebattles.html" style="color: white; text-decoration: none;">GAMEBATTLES</a></li>
<li><a href="forum.html" style="color: white; text-decoration: none;">FORUM</a></li>
</ul>
</div>



</body>
</html>





CSS

body{
background-color: black;
margin: 0;
padding: 0;
height: 900px;
width: 900px;
}


#menu {
    width: 100%
    height: 35px;
    font-size: 25px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 3px 2px 3px #333333;
    background-color: #8AD9FF;
    border-radius: 8px;
}

#menu ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
}

#menu li {
display: inline;
padding: 20px;
}


#menu a:hover {
    color: #F90;
    background-color: #FFF;
}



In case it may be caused due to other parts of my html here is the other two pieces of html and css I have at the moment

<!DOCTYPE html>
<html>

<head>
<title>PRACTICE</title>
<link href="style-index.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>

<div class="background-photo">
<div id="background-text">
<h1>Test Yourself Against The Best</h1>
</div>
</div>

<div id="link">
<a href="Home.html" style="color: white; text-decoration: none;">ENTER</a>
</div>






</body>
</html>



body{
background-color: black;
margin: 0;
padding: 0;
height: 900px;
}

.background-photo{
background: url("http://wallpaperus.org/wallpapers/02/10/xbox-black-1920x1080-wallpaper-635409.jpg") no-repeat center center;
background-size: cover;
height: 900px;
}

#background-text{

text-align: center;
position: absolute;
top: 50px;
width: 100%;


color: white;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
word-spacing: 2em;
letter-spacing: 1em;
font-size: 20px;
}


#link{
font-family: 'Roboto', sans-serif;
font-size: 60px;
letter-spacing: 0.5em;
font-weight:900;

text-align: center;
position: absolute;
top: 800px;
width: 100%;
}


pandy
This is what I see.

Click to view attachment

Don't you get any styling at all? In that case it's fair to assume the URL to the CSS file is wrong. That includes using the wrong file name, maybe the wrong case.
Ross
Thanks for the help,

however, the url to the CSS file seems to be correct as it configures the styling until #menu.

home.html

<!DOCTYPE html>
<html>

<head>
<title>PRACTICE</title>
<link href="style-home.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>

<div class="header">
<div id="HEADING">
<h1>HEADING</h1>
</div>
<div id="HEADING2">
<H2>HEADING2</H2>
</div>
</div>


<div id="menu">
<ul>
<li><a href="home.html" style="color: white; text-decoration: none;">HOME</a></li>
<li><a href="gamebattles.html" style="color: white; text-decoration: none;">GAMEBATTLES</a></li>
<li><a href="forum.html" style="color: white; text-decoration: none;">FORUM</a></li>
</ul>
</div>



</body>
</html>


style-home.css

body{
background-color: black;
margin-top: 0px;
width: 900px;
}


.header{
background-color: grey;
height: 100px;
width: 100%;
}

#menu{
    width: 100%;
    height: 10px;
    font-size: 25px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 3px 2px 3px #333333;
    background-color: #8AD9FF;
    border-radius: 8px;
}

#menu ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
}

#menu li {
display: inline;
padding: 20px;
}


#menu a:hover {
    color: #F90;
    background-color: #FFF;
}

All I want to do is customise the navigation bar that I am trying to create.
Christian J
QUOTE(Ross @ Jan 8 2017, 11:02 PM) *

#menu {
width: 100%
height: 35px;

A semi-colon is missing above. There might be more errors in the actual CSS file, use http://jigsaw.w3.org/css-validator/ to check.

As a sidenote it's best to avoid inline styles (the STYLE HTML attribute). It's also safest to declare color and background for the same element (instead of e.g. background for BODY, and color for LI).
pandy
So it is. In the browsers I tried it only affects the width and height declarations though, and so it should. The height isn't honored. The width isn't needed to make the DIV span all available space so that it doesn't work doesn't show.

Would be odd if that was a show stopper in some browser. But there are no other errors. What browser(s) do you use, Ross?
Christian J
The OP has posted different versions of the CSS in this thread, first this:

CODE
#menu {
    width: 100%
    height: 35px;

and then this:

CODE
#menu{
    width: 100%;
    height: 10px;

so maybe the CSS he uses in his test page is different from what we see in the thread?
Ross
QUOTE(Christian J @ Jan 10 2017, 08:24 AM) *

The OP has posted different versions of the CSS in this thread, first this:

CODE
#menu {
    width: 100%
    height: 35px;

and then this:

CODE
#menu{
    width: 100%;
    height: 10px;

so maybe the CSS he uses in his test page is different from what we see in the thread?


Apologies for this as I copied and pasted twice on a different reply after altering it a bit to see if I can get it to work.

I actually did manage to get it working after a long time but I have another question now that would be great if I can get an answer to.

This is part of my code: (with a real URL)

<img src=".....png")>

All I want to do is center it to the middle of the webpage and have it about 400px down the page.

I can't seem to get it to work for some reason so I hope one of you can help me.

It would be better if I can do it through CSS.

Whenever get it to be 400px down it does not center.

Please help if you can.
pandy
QUOTE(Ross @ Jan 10 2017, 02:28 PM) *

I actually did manage to get it working after a long time


So what was the problem? We are curious. wink.gif


CODE
but I have another question now that would be great if I can get an answer to.

This is part of my code: (with a real URL)

<img src=".....png")>

All I want to do is center it to the middle of the webpage


If it's in a block level element (and it doesn't also contain stuff you don't want centered) you can use text-align: center (with the block level element).

CSS: centering things

http://www.w3.org/Style/Examples/007/center.html



QUOTE
and have it about 400px down the page.


Typically done with a margin. Where to place the margin depends on the context.
Ross
QUOTE(pandy @ Jan 10 2017, 09:44 AM) *

QUOTE(Ross @ Jan 10 2017, 02:28 PM) *

I actually did manage to get it working after a long time


So what was the problem? We are curious. wink.gif


CODE
but I have another question now that would be great if I can get an answer to.

This is part of my code: (with a real URL)

<img src=".....png")>

All I want to do is center it to the middle of the webpage


If it's in a block level element (and it doesn't also contain stuff you don't want centered you can use text-align: center (with the block level element).

CSS: centering things

http://www.w3.org/Style/Examples/007/center.html



QUOTE
and have it about 400px down the page.


Typically done with a margin. Where to place the margin depends on the context.


Believe it or not I actually do not know exactly what the problem was...

As mentioned before this was my first go at html after learning the very basics so someone who has had more experience just cleaned up my code so far and made it a lot easier to read by removing some of the useless pieces...and it worked biggrin.gif

Sorry it wasn't a really good finding tongue.gif

As for my problem at the moment I have tried that and it still doesn't seem to work.

Code:

<img src="http://cdn.wccftech.com/wp-content/uploads/2015/02/20130522005626Microsoft_Xbox_One_logo.png" style="text-align: center;")> (I tried it without the style also)

CSS:

img {
position: relative;
margin-top: 300px;

}
Darin McGrew
QUOTE
<img src="http://cdn.wccftech.com/wp-content/uploads/2015/02/20130522005626Microsoft_Xbox_One_logo.png" style="text-align: center;")>
The text-align property does not apply to inline elements like IMG. It applies to block-level elements like paragraphs (P) and headings (H1, H2,...).

See the link in pandy's message for an explanation of how to center various elements.
pandy
My fingers slipped and skipped a few words. I meant to say if it's IN A block level element.... (corrected above).

Maybe you don't know the difference between block and inline elements, Ross? See here http://htmlhelp.com/reference/html40/block.html .
Ross
Thanks a lot for the help, much appreciated
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.