I'm VERY new to programming and am probably using a totally old way to program my site, but so far it's been frustrating at times, but has worked for me.
Now I have 2 problems that I can't seem to fix
First: background images. I've been checking it using Chrome, but when I open the page in IE, my background is not showing up. I've checked the syntax (some sites seem to indicate that I needed to add spaces) and I don't see where I've got a problem. I also tried saving the image as a png instead of jpg and that didn't work.
Here's what my code looks like:
body {
background-image: url('images/backrings.jpg'), url('images/backrings2.jpg');
background-position: left top, right top;
background-repeat: no-repeat;
}
Second: I'm getting a blue border around my footer navigation bar - I don't know why and have tried everything that I can think of to get rid of it.
Here's what the code for that looks like:
#footermenu ul {
background-color: #fff;
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
text-align: right;
border: none 0px;
}
#footermenu ul li {
display: inline;
}
#footermenu ul li a {
font-family:verdana;
font-style:normal;
font-size:12px;
text-decoration:none;
margin: 0;
padding: 5px 20px 5px 20px;
color: #fff;
background-color:83AFC7;
}
<div id="footermenu">
<ul>
<li class="first">home</li>
<li>about</li>
<li>gallery</li>
<li>contact</li>
</ul>
</div>
Any help would be GREATLY appreciated - thanks!
Related
html,body{
background-color: #5f5f5f;
margin: 0;
padding: 0;
font-family: sans-serif;
}
div.container{
max-width: 1200px;
margin: 0;
padding: 0 30px;
}
header{
background-color: #000000;
float: left;
width: 100%;
}
header h1{
color: #ffffff;
text-transform: uppercase;
float: left;
}
.nav {
float: right;
list-style-type: none;
list-style: none;
padding: 10px 100px;
}
.nav li {
display: inline-block;
}
.nav ul li a{
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
font-size: 15px;
font-family: "Roboto", sans-serif;
}
.nav li a:hover{
color: #D3D3D3;
border: 1px solid white;
}
.nav li.active a{
border: 1px solid white;
}
.banner-image {
width: 100%;
}
<DOCTYPE html>
<head>
<title> GWS News</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<header>
<div class="container">
<h1> Grass World Sport News</h1>
<ul class="nav">
<li class="active">Home</li>
<li>World Cup</li>
<li>Sports</li>
<li>Schedule</li>
<li>About</li>
</ul>
</div>
<div class="banner">
<img class="banner-image" src=img/banner1.jpeg>
</div>
</header>
</body>
I want to fix up my navigation bar but do not know how to do it.
Improvement I want to make are:
How do I change the font colour to white (I have tried font: #ffffff as you can see in the coding)?
How do I make the link spaced out?
How do I move the links to the very right (float does not seem to be working as you can see in the coding)?
How do I make the font bigger for the navigation bar (font: 20px does not seem to be working as you can see in the coding)?
How do I make the title "Grass World Sport News" bigger?
How do I change the font colour to white (I have tried font: #ffffff as you can see in the coding)?
The problem is your selector, should be ul.nav li a and not .nav ul li a
How do I make the link spaced out?
Just add to link element a left margin (since you want it to float right):
ul.nav li {
margin-left: 1rem // for example
}
How do I move the links to the very right (float does not seem to be working as you can see in the coding)?
The float is working correctly but you have a max width on parent container so it gets only to the far right of the container. If you want it to the right of the window remove max-width.
div.container{
margin: 0;
padding: 0 30px;
}
How do I make the font bigger for the navigation bar (font: 20px does not seem to be working as you can see in the coding)?
Same problem as number 1. Just set the selector to be ul.nav li a
How do I make the title "Grass World Sport News" bigger?
If you mean a bigger font just set a higher font-size.
header h1 {
// for example
font-size: 30px;
}
This is very broad, and looking at the code it appears much was either copy/pasted from another site expecting the same results which is not how coding works.
Here's a pen: https://codepen.io/codespent/pen/BVXyWO
To answer your questions:
To change font color, you use color: #fff in the parent rule.
Spacing can be done in multiple ways, but just learn box model before you start playing with anything so you know why you're using paddings or margin.
Moving the links to the right is also contextual, there's many ways you can do so, but you need to understand why you're doing it this way. text-align:right; may work, but Flexbox is recommended.
font is an outdated property. You may use font-size:20px; to change the font size.
This is also a broad question as there are many ways that are contextual to how you feel is best.
To understand these fundamentals, I highly recommend taking freeCodeCamp's Basic CSS courses and as well, you should see StackOverflow's "How to Ask" knowledge object to grasp how you should be presenting your questions when coming here for help.
Ok this is simple thing. I firstly created a usual "Home" Button linking to the Home Page of the website, but the word "Home" looked too obvious. Hence I tried to insert an icon in place of that word, but its not fitting properly. I have tried some things in my css but its messing up the whole (used to create the navigation menu). The screenshot is attached. Please if someone can see whats wrong.
CSS:-
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
text-decoration:solid;
}
ul#menu li a
{
color: black;
background-color: #f5b45a;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
HTML:-
<ul id="menu">
<li id="Home_Link"><img src="../../Image_Data/Home_Icon.ico" id="Home_Icon"/></li>
<li>MEN</li>
<li>WOMEN</li>
<li>KIDS</li>
<li>DESIGN!!</li>
With your current styles you will need to play around with the vertical-alignment and margins for the image, something like:
ul#menu li#Home_Link a img {
vertical-align: text-bottom;
margin-bottom: -5px;
}
As a side note, your use of ID's for elements is not recommended - use classes if needed. And reduce the specificity of your style declarations, e.g. .home-link img
I've noticed an odd loading issue on a site that I built. When the navigation links load at the top of the page, they are displayed in the left hand corner of the browser in their un-stylized form, with bullets, underlines, etc. before loading. Is there a way that I can code this differently so that it hides the loading process?
Here's a couple of images showing the problem during the page load:
Nav Loading:
Nav Loaded:
Here's a copy of the CSS:
/*Header Link Wrap & Align*/
#nav-wrap {
width: 100%;
overflow: hidden;
height: 52px;
background-image: url(/images/hlink-bg.jpg);
background-repeat: repeat-x;
}
#nav {
text-align: center;
margin:0px;
padding:0px;
}
#nav li {
list-style: none;
display: inline-block;
vertical-align: middle;
padding: 0px 10px 0px 0px;
}
#nav a {
color: #FFFFFF;
display: inline-block;
font-family:arial;
margin: 0;
padding: 9px 18px 9px 18px;
text-decoration: none;
vertical-align: middle;
}
#nav a:hover {
background-color: #ffa500;
color: #fff9;
}
.head-divider {
list-style: none;
vertical-align: middle;
display: inline-block;
margin: 0;
width:2px;
height:52px;
background-image:url(/images/h-divider.jpg);
background-repeat: no-repeat;
}
The HTML:
<div id="nav-wrap">
<ul id="nav">
<li>Custom Homes</li>
<li class="head-divider"></li>
<li>Inspection Services</li>
<li class="head-divider"></li>
<li>Energy Audits</li>
<li class="head-divider"></li>
<li>Complete Services</li>
<li class="head-divider"></li>
<li>Contact</li>
<li class="head-divider"></li>
<li>Blog</li>
</ul>
</div>
</div>
Your help is greatly appreciated!
You need to move your script calls so that they come after your CSS calls. What's happening is that when the page is being loaded, the browser is waiting for the scripts to be loaded before it moves on to reading your stylesheets, causing a flash of unstyled content.
It may be your server is slow. Is your stylesheet for the #nav is in a different host or something?
Try adding those styles to your <head> section and see. If you have images, but still basic HTML, CSS must load fast.
Thank you for the help, I realized that my Header PHP inclusion was loading after the Scripts & CSS,
So I placed it at the very top of the page, it's loading much faster now. Thank you for your help!
I haven't really ever done a background navigation rollover, I usually just change the colour of the text once it's been rolled over. However I'm try to do this now but can't seem to get it right.
I'm trying to do it all with CSS as I believe there is a way however I do see a lot of others using sprites and image rollovers. Which way is the best? I might end up having a lot of images on my website so I'm trying to stay away from them so I myself, am thinking strictly CSS. There is a way right?
This is my website
CSS
#main-navigation { width: 100%; height: 100px; background: url(../img/NAV-BG.jpg) top center no-repeat; text-transform: uppercase; font-size: 1em; letter-spacing: 1px; line-height: 90px; /*border: 1px solid #000;*/ }
#main-navigation ul { width: 860px; list-style: none; margin: 0 auto; text-align: center;}
#main-navigation li { float: left ;margin-left: 30px; }
#main-navigation li a { display: block; text-decoration: none; color: #000; }
#main-navigation li a:hover { color: #c7bd89; background-color: #900; width: 120%; height: 30px; -moz-border-radius: 5px; border-radius: 5px; margin: 0 auto; margin-top: 20px;}
HTML
<nav id="main-navigation">
<ul id="main-nav-left">
<li class="current">Home</li>
<li>About</li>
<li>Current Season</li>
<li>Past Seasons</li>
<li>Contact</li>
<li>Partners/Sponsors</li>
</ul>
</nav>
But I want it to look like this
What am I missing?
Use this
#main-navigation li a:hover {
color: #c7bd89;
background-color: #900;
width: 120%;
line-height: 30px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 30px;
}
All the problem is that you're defining a height ... You should define a line-height instead and it will work flawlessly ... But I still can find a space for improvement in terms of padding and margin.
see the fiddle for code and demo
fiddle: http://jsfiddle.net/quR4E/3/
demo: http://jsfiddle.net/quR4E/3/embedded/result/
screen shot:
Try changing your #main-navigation li a to this:
#main-navigation li a {
/*display: block;*/
text-decoration: none;
color: black;
padding: 5px;
}
Using display block was pushing the text outside the box. Adding the padding will give you some spacing around the text.
Sprites are definitely better than using multiple images but in the end they are essentially going to be the same thing. If you can create your images small enough (for bandwidth performance) it won't affect your site that much. Sprites are nice to group images. Using background colors and borders around text is also a very efficient way to go.
Have a look at what I did here: http://torontobanfffilmfest.com/splash
Each of the eight blocks has a single image in two versions, one light and one dark, attached side-by-side. In the top-left corner, for example, is an image, splash_buy_tickets_m.png, that is 582 pixels wide. But the space in which it's displayed is 291 pixels wide. We only see half the full image, and WHICH half depends on :hover.
The CSS that makes the image change on rollover is pretty simple:
#b1:hover, #b2:hover, #b3:hover, #b4:hover, #b5:hover, etc. {
background-position: -291px 0;
}
If each of the buttons in your button bar consists of an "active" and an "inactive" version, then you can just change the image position within the DIV in which it's shown, shifting horizontally or vertically.
I am pretty new at CSS but have been learning, doing my moms small business website to save her money but I'm having a little CSS trouble with my nav bar.
Basically if you go here: http://area25dallas.com/s and look at the nav bar, I'm having trouble with the il listing to have the images line up vertically (instead of aligning with the top which is what they currently do) with the text, also for some reason the images are going on top of each other instead of sitting next to each other (I don't want them in separate lists like the text links because the margins are too spread out).
I have been playing around with the CSS and also googled the hell out of this but still haven't found a solution. Is there any quick fix to this?
Thanks!
EDIT:
Here is the HTML and CSS blips though if you are using chrome I feel just inspecting the elements are the easiest way to see what's going on
<div id = "header">
<div class = "container">
<ul id = "main-menu">
<li class = "active">home</li>
<li>about</li>
<li>gallery</li>
<li>press</li>
<li>contact</li>
<li><img src="images/twitter_newbird_boxed_ white.png" />
<img src="images/Pinterest_Favicon white.png" /></li>
</ul>
</div>
</div>
and the CSS
#main-menu
{
float: right;
position:relative;
top:122px;
right:150px;
}
#main-menu li
{
float: left;
margin: 30px 12px 15px 12px;
padding:0;
height:23px;
list-style:none;
line-height:20px;
}
#main-menu li:hover, #main-menu li.active { background-position: 0 -23px;}
#main-menu li:hover a, #main-menu li.active a{
background-position: 100% -30px;
}
#main-menu li a
{
display:block;
padding:0px 15px 5px 10px;
font-size:17px;
color:#fff;
text-decoration:none;
}
The images are broken onto multiple lines because they reside inside an <a> tag which has been styled as a block level element. Change the style to something like:
#main-menu {
float: right;
position: relative;
right: 75px; /* Changed */
top: 122px;
}
#main-menu li a {
color: #fff;
display: inline-block; /* Changed */
font-size: 17px;
padding: 0 15px 5px 10px;
text-decoration: none;
}
/* New */
#main-menu li a img {
position: relative;
top: -10px;
}
The new rule at the bottom moves the images up a little bit. You can play around with your css and get the same results in a lot of different ways - I went with a method that didn't involve many changes to the existing work.
Thanks for the tips, guys, this helped me out too with images in my css navigation.
I'd also recommend some added code to alleviate your spacing issue ...
#main-menu li a img {
position:absolute;
background:inherit;
top: 0px;
margin-bottom:auto;
max-height: 33px;
}