Now, I'm a real beginner, just starting, figuring out things, testing and trying html and css. I want to make something more or less like this (see picture). I want it to fully scale to fit the browser/resolution preserving aspect ratio.
my layout
My html and css code is below. The background image scales fine but now I want my navigation to scale the same way. How to do it? What to change? I also want to have a dotted line under the solid one (above the navigation). Any advice? :) Just starting/learning/making mistakes :)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Layout</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="navigation">
<ul>
<li> HOME </li>
<li> O MNIE </li>
<li> PORTFOLIO </li>
<li> OFERTA </li>
<li> STREFA ŚLUBNA </li>
<li> PUBLIKACJE </li>
<li> WSPOŁPRACA </li>
<li> BACKSTAGE </li>
<li> KONTAKT </li>
</ul>
</div>
</body>
</html>
And css:
html
{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#navigation
{
width: 100%;
height: 60px;
background-color: black;
margin-left: auto;
margin-right: auto;
padding: 0 0 0 0;
position: absolute;
bottom: 0px;
border-top-style: solid;
border-color: white;
border-width: thin;
}
#navigation ul
{
list-style-type: none;
float: right;
margin-left: auto;
margin-right: auto;
}
#navigation ul li
{
float: left;
list-style: none;
margin-left: 18px;
margin-right: 18px;
}
#navigation li a
{
color: #FFF;
text-decoration:none;
font-family: "Calibri";
text-transform:uppercase;
}
#navigation li a:hover
{
text-decoration:none;
color: #F69;
}
#navigation li a:active
{
color: #F69;
}
You need to set any widths, heights, margins and paddings of the navigation elements to a percentage value. Maybe also set a percentage value to font-size. Just play around with numbers to see how thats affects your layout. In short, don't use fixed pixel values for the layout. You may use them to style individual buttons or similar elements in the layout.
BTW: Browser Support for background-size values contain and cover:
Chrome 3.0
Firefox (Gecko) 3.6 (1.9.2)
Internet Explorer 9.0
Opera 10.0
Safari (WebKit) 4.1 (532)
(as stated at https://developer.mozilla.org/en-US/docs/CSS/background-size)
To your dotted border: you could use a horizontally repeated background image for such a layout or you set a solid border to a wrapper-element and a dotted border to the inner navigation-element.
do you try on
#navigation
{
width: auto;
}
?
Your margin attributes to the nav items need to be % or em. Right now you have them set explicitly to pixels. This is preventing them from "scaling"
if you are using static html or deriving them from a database all you need to do is the following :
(100 / #ofNavs) /2 = left || right margin value.
If you use borders or such, you'll need to add that into your figure math.
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.
I am new to HTML, I have created circle using border-radius and i have put some text in it. the Text is displaying on the lower part of the Box and its also appearing after the circle. I want to put the Text in the circle.
Kindly check this and guide me.
<ul>
<li>HOME</li>
<li id="skills" class="navText" >Work - Work Experience</li>
<li id="web" class="navText">Skills </li>
<li id="video1" class="navText">Web - Web Projects </li>
<li id="video2" class="navText">Video - Video Projects </li>
</ul>
Style
#navText
{
position:absolute;
top:-90px;
}
nav ul
{
list-style-type:none;
padding:0;
margin:20px 0px 0px 130px;
}
nav ul #skills
{
position:absolute;
line-height:-200px;
background-color:#EA7079;
display: inline-block;
border:6px solid;
border-color:white;
border-radius:110px;
padding: 91px 31px 31px ;
width:80;
height:25;
text-align:center;
#margin-left:35px;
}
Line-height equal to height of the div/li also works - FIDDLE
This works fine for short lines, for long lines, you'll have to use another technique as mentioned.
The top circle in the fiddle is a div in a div changed to inline-block
CSS
.centerofcircle1 {
width: 100px;
height: 100px;
border-radius: 50%;
line-height: 100px;
font-size: 15px;
background-color: red;
color: white;
text-align: center;
}
This is one of the thing that css dosen't do very well. However there is a solution, here is a great article by Chris Coyier that helped me with this problem.
You could add the vertical-align property to your text class.
vertical-align: middle;
Also, if that doesn't work, try to manually place in the middle with margin-bottom or/and margin-top.
margin-bottom: 10px;
And your #navText is an id. Use div id="navText" instead of class="navText"
Sorry, I'm really new to HTML5 and CSS3 and my searches haven't turned up anything to what I'm sure is a really basic thing. What I'm trying to do is create a row of clickable images / links for my website. Much like how stack overflow has there questions, tags users links above.
So far my css looks like the following:
a#header {
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url('img url') no-repeat bottom;
width: 50px;
height: 100px;
}
But this isn't doing what I'm after. It's only placing the image in the centre of the screen. Could someone please help me? Also, is there a best practise for doing something like this?
The margin:0 auto is what is putting it in the center of the screen. You will probably want to drop this, or put it on the container element rather than the individual boxes.
What you probably want for putting several boxes in a line is either float:left or display:inline-block. Either of these will work; they work differently, and there are things you need to know about both of them in order to get the layout working the way you want it, but I'll leave those extra details for you to do further research on.
It's worth noting that none of the code you quoted is specific to HTML5 or CSS3 -- it's all basic HTML/CSS syntax that has been around for a long time.
Since you didn't provide any markup, I'll use the stackoverflow example you cited:
<div class="nav mainnavs ">
<ul>
<li class="youarehere">Questions</li>
<li>Tags</li>
<li>Users</li>
<li>Badges</li>
<li>Unanswered</li>
</ul>
</div>
While you could use your own divs to do this markup, this is the most semantic and concise way of representing a navigation list.
To style this list the way you want, you only need to apply the following styles:
.nav ul {
list-style-type: none;
}
.nav li {
display: block;
float: left;
}
.nav a {
display: block;
padding: 6px 12px;
/* Any other styles to disable text decoration, etc. */
}
Then just position the .nav container where ever you want on the page.
If you're lazy like me, you can put a few <a> tags in a <header> or <nav>, and use display: inline-block.
http://jsbin.com/ivevey/3/edit
HTML
<header>
<a href></a>
<a href></a>
<a href></a>
<a href></a>
<a href></a>
</header>
CSS
header {
text-align: center;
}
header > a { /* assuming a <header> contains your <a> tags */
display: inline-block; /* make sure every image/link is treated like text, ltr */
width: 15px; /* width/height or padding. either works */
height: 15px;
background-color: red; /* This should work for a 15px x 15px image instead */
}
Just be careful of the space between the links. Those are whitespace characters. I generally use header {font-size: 0;} to clear that up.
Ideally, I'd have a structure where there's a <ul> in a <nav>, since it is a list of navigation links, after all.
Maybe something like this?
http://jsfiddle.net/MRayW/6/
<nav>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
</nav>
a[id^='header_'] {
border: none;
background: url('xxx.jpg') no-repeat bottom;
width: 50px;
height: 50px;
text-align:center;
color:red;
list-style:none;
float:left;
margin:5px;
}
ul {
padding:0px;
margin:0px;
background-color:#EDEDED;
list-style:none;
background: none repeat scroll 0 0 red;
height: 60px;
margin: auto;
width: 420px;
}
nav {
margin:0 auto
width:500px;
}
I have a website im creating in notepad , and i cant seem to get the css menu to line up
exactly rite with my javascript slideshow
i can mess with the padding to make the menu longer but it still wont line up corerctly
here is a image of the webpage
http://img27.imageshack.us/img27/2/websitequestion1.jpg
and here is the code ,
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.8.js"></script>
<style>
#galleria{ width: 1020px; height: 386px;margin:0px auto;}
body
{
background-image:url('bg.jpg');
background-repeat:no-repeat;
}
body {
text-align: center;
}
/* Menu Start Here */
#menu li {
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
border: 1px solid white;
padding: 15px 40px 15px 40px;
text-decoration: none;
color:black;
margin-left: -5px;
/* This is the background used for the animation */
background-image: url('image2.jpg');
/* Align the image position to the left of the a */
background-position: left;
-webkit-transition: all 0.8s ease-in-out;
/* Animation with transition in Firefox (No supported Yet) */
-moz-transition: all 0.8s ease-in-out;
/* Animation with transition in Opera (No supported Yet)*/
-o-transition: all 0.8s ease-in-out;
}
#menu li a:hover {
color: white;
/* Align the image position of the background to the right*/
background-position:right;
}
</style>
</head>
<body>
<div id="wrap">
<h1> </h1>
<ul id="menu">
<li> Home </li>
<li> Products </li>
<li> Services </li>
<li> About </li>
<li> Contact </li>
</ul>
</div>
<div id="galleria">
<img src="pic1.jpg">
<img src="pic2.jpg">
<img src="pic3.jpg">
<img src="pic4.jpg">
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run("#galleria");
</script>
</body>
</html>
Add something like this:
margin: 0 auto;
width: 380px;
To the desire divs that you want to centered. In you case I would add a DIV arround the galeria just to centered it.
It may be that the default user agent stylesheets are causing the unordered list to be shifted as well.
#menu { margin-left: 0; padding-left: 0; }
Might help with that, many browsers add left margin to list elements by default
First, you'll want your #galleria and #wrap divs to have the same width and margin, so add:
#wrap {
margin: 0 auto;
width: 1020px;
}
Next, for your menu items to be the right size, you'll need to ditch display:inline; for your list items (because you can't set a width on inline items. So you'll want something like:
#menu li {
float: left;
width: 20%;
}
#menu li a {
display: block;
}
You could just as easily use display:inline-block; depending on the browsers you need to support. There are several ways to go about it, but this should get you going in the right direction. Also, if you're floating your li, you'll need to add overflow:hidden; or float:left; or use a clear fix method on the ul so that the floats are contained.
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets\sets1.css">
</head>
<style type="text/css">
body /* site bg color */
{
margin: 0;
background-color:#b0c4de
}
#navbar ul {
margin: 0;
padding: 5px;
cellspacing: 0;
cellpadding: 0;
border: 0;
list-style-type: none;
background-color: #8B008B;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: white;
background-color: #8B008B;
}
#navbar ul li a:hover {
color: #0EC6D7;
background-color: #8B008B;
}
</style>
</head>
<body>
<div id="navbar">
<ul>
<li><img src="images/logo.png" alt="Site Logo" height="50" width="68"></img></li>
<li>Forum's</li>
<li>Chat's</li>
<li>Login</li>
<li>Sign up</li>
</ul>
</div>
</body>
</html>
added margin: 0; to body tag and it works like fb header covering whole top of page no white space or ignorant breaking or any thing like that also its cross browser so thanks alot .thank all you users who have helped me with this
Set the margin to 0px in the body
body{
margin:0px;
background-color:#b0c4de
}
This will remove any white spaces around the body
If you want the navigation bar to span the top of the entire page try setting the width to 100%
#navbar{
position:relative;
width:100px;
height:auto;
background-color: #8B008B;
}
This will make a Magenta bar across the top of the page. Not sure about what height you want so I get it to auto so it will re-size depending on the content. You can then place your logo image inside this div.
If you mean a "sticky" header then use position:fixed
#navbar{
position:fixed;
top:0;
left:0;
}
You may need to define width, z-index, or anything else specific to your design, but this is the basic idea.
If you didn't mean sticky, then maybe william got the answer right.
You need to put margin: 0; in the body tag. I recommend to use a reset style that you can find in google to reset all spaces that browsers put.