Question:
How do I style different elements of a HTML website properly? I've looked all over the internet and read books but am still sort of struggling.
Issue:
My problem is that I have a main heading, which is like the main "title" for my website which displays the website name, but to the left of my heading, I want to style a vertical navigation bar which will be in-line with my heading. Yet I am having trouble styling the navbar and heading to work next to each other, rather than one of them being on top of the other.
JSFiddle
HTML:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="homepage.css">
<head>
<title>CSGOWin | Win Big!</title>
</head>
<body>
<div class="navbar">
<ul>
<li>Jackpot</li>
<li>Coinflip</li>
<li>Giveaways</li>
<li>About Us</li>
<li>Contact Us<li>
</ul>
</div>
<h1>CSGO Win</h1>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
background-image: url(bgimg.jpg);
width: 100%;
height: 100%;
background-size: 100%;
}
h1 {
font-family: Arial, Verdana, sans-serif;
background-color: #FFA500;
border-style: solid;
border-radius: 25px;
text-align: center;
margin-top: 50px;
margin-left: 350px;
margin-right: 350px;
padding-top: 1%;
padding-bottom: 1%;
font-size: 45px;
}
ul {
list-style-type: none;
margin-left: 50px;
margin-right: 85%;
margin-top: 50px;
background-color: #FFA500;
}
li a {
font-family: Arial, Verdana, sans-serif;
display: block;
}
.navbar{
}
Finally, I am very new to stack overflow, so I apologise if my question is not fully detailed. I will answer questions if there are any. Thanks for your kind help.
Like mentioned in the comment you can use float: left see this pen http://codepen.io/anon/pen/bpWzeK?editors=1100. Another way to do it is by using flex.
you can add class or id attributes to certain html tags and then in your stylesheet reference that class or id
->.navbar{
}
that references any tag with "navbar" class will get the style in that block
->#thisIsAnID{
}
that references any tag with the id " thisIsAnID" id
so . is used for classes
is used for ids
Related
I'm trying to replicate a webpage template solely for the purpose of becoming more familiar with the works of HTML/CSS. I want to use an image in my documents as a background for a DIV, but for some odd reason, it will not import. Keep in mind, I'm still pretty new to coding.
I pulled a random stock photo address off of Google as a test, and that would work. So, I'm thinking either I have the photo located in the wrong folder (It's in the same exact folder as the document I'm calling it from), or there's something else in my code that is conflicting with the called image/file. I'm still not sure, though.
HTML file:
<html>
<head>
<title>conquer</title>
<link rel="stylesheet" type="text/css" href="conquer.css" />
</head>
<body>
<div class="navbar">
Homepage
About Us
Services
Contact
External
</div>
<div class="topbanner"></div>
</body>
</html>
CSS file:
body {
background-color: #fff;
margin: 0;
}
/** Navigation Bar **/
.navbar {
background-color: #383E4C;
height: 100px;
width: 100%;
position: fixed;
text-align: center;
margin-top: 0px;
}
.navbar a {
color: #F6F6F7;
text-decoration: none;
font-size: 22px;
font-family: "Helvetica", sans-serif;
border: 1px solid #646D7C;
padding: 15px;
margin-top: 20px;
margin-right: 20px;
display:inline-block;
}
.navbar a:hover {
background-color: #49505F;
}
/** Top Banner **/
.topbanner {
height: 500px;
width: 300px;
background-image: url('/city.jpg');
background-repeat: no-repeat;
}
I want the image to display in the DIV, but when I open the console elements, it's just a huge invisible block.
In paths, the leading slash /, tells the browser to goto the ROOT folder.
So you will want to change this:
background-image: url('/city.jpg');
to
background-image: url('city.jpg');
I'm new to coding and I'm in the process of creating a website for my father to help build experience and a portfolio.
I'm using unsemantic & normalize.
The problems I am having are as follows;
1) I can't seem to align the bottom of the words "Michael Gilsenan" with the text in my nav bar. I have tried using the line-height property but it's behaving inconsistently and moving in all sorts of strange ways.
2) I'm trying to create a line under the header either by using the <hr> tag or by using the border-bottom property. Both of which eventually create a scroll bar on the <div> which houses my <nav> element.
I have been trying to find a solution for a good 4 hours and have done lots of reading. I apologise if I'm missing something obvious, I'm very tired now!
Thanks very much.
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<link rel="stylesheet" type="text/css" href="../external/css/normalize.css">
<link rel="stylesheet" type="text/css" href="../external/css/unsemantic-grid-responsive-tablet.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body class="grid-container">
<header class="grid-parent">
<div class="grid-50">
Michael Gilsenan
</div>
<div class="grid-50">
<ul>
<li>About</li>
<li>Bio</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</header> <!-- end of header-->
</body>
* {
margin: 0;
text-decoration: none;
}
hr {
border-style: solid;
border-color: #cacaca;
position: relative;
top: -40px;
}
/* header styles */
header {
font-family: 'Open Sans', sans-serif;
margin-top: 80px;
overflow: auto;
border-bottom: solid #cacaca 1px;
}
header a {
color: #332e2d;
}
.headertext {
font-family: 'Montserrat', sans-serif;
font-size: 300%;
letter-spacing: -0.01em;
line-height:
}
ul li {
display: inline;
}
ul {
word-spacing: 0.5em;
text-align: right;
}
On the ul
line-height: 55px; /* match the height of the headertext. */
On the header
overflow-y: hidden;
https://jsfiddle.net/wazz/ad6g2woq/63/
The trick was to find out what was causing the scrollbar. I selected the ul and went through the options and for scroll a 2nd scrollbar was added, so I new it wasn't that. Eventually I found that the scrollbar was on added on the header.
P.S. You should use a header tag <h1> for the headertext instead of making the text bigger (300%). Search engines look for header tags to understand the page (SEO). You can adjust the size of header tags in your css if it's too big or small, and still use the tag.
The scrollbar is appearing because you have the overflow property set to auto in the style declaration for the header element:
header {
font-family: 'Open Sans', sans-serif;
margin-top: 80px;
overflow: auto; <-- change or remove this
border-bottom: solid #cacaca 1px;
}
Auto gives the browser control over what to do when the contents of a container do not fit within the dimensions of the container and will often add scrollbars where you don't intend them. Removing the overflow property or setting it to none will eliminate the scrollbar.
I am not familiar with the unsemantic stylesheet that you are using but it appears to apply a float-based layout. This makes alignment of items within a container very difficult. As an alternative, I would suggest looking into flexbox. There are a few good tutorials out there. I have used all of these and can vouch for their quality:
What the Flexbox by Wes Bos - https://flexbox.io/
A Complete Guide to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox Froggy - https://flexboxfroggy.com/
To achieve the layout I think you are aiming for with flexbox requires the following:
Remove the unsemantic grid classes from your HTML
Replace your CSS with the following
* {
margin: 0;
text-decoration: none;
}
/* hr {
border-style: solid;
border-color: #cacaca;
position: relative;
top: -40px;
} */
/* header styles */
header {
display: flex;
align-items: flex-end;
height: 80px;
font-family: 'Open Sans', sans-serif;
/* overflow: auto; */
/* the overflow property is setting your scrollbar. If you don't want the scrollbar, set to none : */
/* border-bottom: solid #cacaca 1px; */
/* Here, your properties are in the wrong order.
it should be:
1. border size
2. border type/style
3. border color.
Like this: */
border-bottom: 1px solid #cacaca;
}
header a {
color: #332e2d;
}
.header-text {
font-family: 'Montserrat', sans-serif;
font-size: 3.5rem;
letter-spacing: -0.01em;
/* line-height: */
/* When you leave in style properties with no value, this will often break your stylesheet. I've commented this out. */
}
header nav {
padding: 10px;
display: flex;
}
header nav ul li {
display: inline;
align-items: flex-end;
margin: 0 20px;
}
I added in some comments about a few other things I noticed in your CSS. To see a working sample, you can check out this pen:
https://codepen.io/danyadsmith/pen/mKjyKQ
Normally, I would attempt to answer the question by telling you what you could do to achieve the result you want with the technologies you are using, but in this case I think the grid system you selected is causing your frustration. Flexbox is gaining adoption in modern browsers and can safely be used in projects that don't need to support legacy browsers. For more information on that, check the flexbox section on Can I Use:
https://caniuse.com/#feat=flexbox
Hope this helps. Good luck!
So I'm working on an assignment that builds on itself at the end of every chapter in my textbook, and my professor took points off for the header image and the footer not being aligned correctly with the main content of my page, but I can't seem to figure out how to fix this problem.
body {
background-color: #3F2860;
color: #3F2860;
font-family: Verdana, Arial, sans-serif;
}
header {
background-image: url(lilyheader.jpg);
height: 150px;
background-repeat: repeat-y;
position: relative;
}
h1 {
padding-top: 50px;
padding-left: 2em;
}
nav {
font-weight: bold;
padding: 1em;
float: left;
width: 160px;
}
nav a {
text-decoration: none;
display: block;
text-align: center;
font-weight: bold;
border-style: outset;
border-color: #CCCCCC;
padding: 1em;
margin-bottom: 1em;
}
nav a:link {color: #3f2860;}
nav a:visited {color: #497777;}
nav a:hover {color: #a26100; border: 3px inset #333333;}
nav ul {
list-style-type: none;
padding-left: 0;
}
.studio {
font-style: italic;
}
footer {
background-color: #9BC1C2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #F5F5F5;
min-width: 1200px;
max-width: 1480px;
}
main {
padding-left: 2em;
padding-right: 2em;
display: block;
margin-left: 170px;
padding-top: 1em;
}
* {
box-sizing: border-box;
}
.floatleft {
float: left;
margin-right: 4em;
}
.clear {
clear: both;
}
header,nav,main,footer {display: block;}
<head>
<meta charset="UTF-8">
<title>Path of Light Yoga Studio</title>
<link rel="stylesheet" type="text/css" href="yoga.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<! [endif]-->
</head>
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<main>
<div id='wrapper'>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<img class='floatleft' src='yogadoor2.jpg' alt="Yoga Door">
<h2>Find Your Inner Light</h2>
<p><span class="studio">Path of Light Yoga Studio</span> provides all levels of yoga practce in a tranquil, peaceful envirionment. Whether you are new to yoga or an experienced practitioner, our dedicated instructors can develop a practice to meet your needs. Let your inner light shine at the <span class="studio">Path of Light Yoga Studio</span>.</p>
<ul>
<li>Hatha, Vinyasa, and Restorative Yoga Classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<div class='clear'>
Path of Light Yoga Studio<br>
612 Serenity Way<br>
El Dorado, CA 96162<br><br>
888-555-5555<br><br><br>
</div>
</div>
<footer>
Copyright © 2016 Path of Light Yoga<br>
</footer>
</main>
I think I formatted that correctly (first time using this site).
Alright... So there's a lot of issues with your CSS and you also have invalid HTML. HTML requires a body tag... Which you don't have. Browsers were probably adding this because it's something they do. They take invalid html and guess what the developer was trying to build.
So first of, keep in mind, the base of all html pages is as following:
<html>
<head>
<title>title</title>
</head>
<body>
</body>
</html>
Next up, there was a lot stuff going on with CSS. The biggest thing I saw involved floats. Floats are a way to easily make a mess. They have their uses; but, usually there is a better way now a days.
Now looking at your alignment problem at its roots...
From what I understand, you want your header and footer to be the same width as the main content and be the same distance from the left of the screen.
You setup your main content to use #wrapper div and did aligment with that. This is fine. The problem is how you set stuff up is more directed to a webpage where the header and the footer are glued to top/bottom of the page, and full up the width completely.
<html>
<head>
<title>title</title>
</head>
<body>
<header>
</header>
<main>
<div id="wrapper">
//This guy had the common margin auto with a width percentage.
</div>
<footer>
</footer>
</main>
</body>
</html>
Having the alignment of the page set on the wrapper means it can't really be applied to the footer and header that well. It will get really messy. Of course this isn't a problem if you the header and footer just take up all the width at the top and bottom of the page.
What did I do to fix this?
First off, let's clean up your HTML. It would make more sense to break your page into 3 pieces. Header, Main, Footer. Right now your footer is inside your main.
So what I did is this:
<html>
<head>
<title>title</title>
</head>
<body>
<header>
</header>
<main>
<div id="wrapper">
//This guy had the common margin auto with a width percentage.
</div>
</main>
<footer>
</footer>
</body>
</html>
Next up, I moved the alignment. So instead of having this rule:
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #F5F5F5;
}
I have these rules:
header, main, footer {
width: 80%;
margin-right: auto;
margin-left: auto;
}
#wrapper{
background-color: #F5F5F5;
}
By doing this, we the alignment rules is being applied to the 3 elements inside the body tag. I do NOT apply to this the body tag itself; because, we should avoid changing the width of the body.
Finally, you also had some weird padding on the main element:
main {
padding-left: 2em;
padding-right: 2em;
}
I don't know why this is here; but, I moved that to the body.
body {
padding-left: 2em;
padding-right: 2em;
}
By placing it on the body it will affect the header, main and footer.
Those are the changes to fix alignment. In addition to those changes I removed various rules and statements that might have been causing issues or not... I do not believe these will have any impact on your page; but, just in case if they were required for some unknown reason you should take a look at your requirements and ensure everything is still correct.
Here is the JSFiddle
I want to delete the margin top of my page. I will show you what I mean with a screenshot
You can see in my pic there are a red arrow that indicate my problem. How I can delete this margin?
I post here my css:
div#header {
background-color: #6495ED;
background: -moz-linear-gradient(100% 100% 90deg, black, gray);
background: -webkit-gradient(linear, center top, center bottom, from(gray), to(black));
margin: 0px;
width: 100%;
}
body {
background-color: #000000;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
h1 {
text-align: center;
color: #FFFFFF;
font-family: sans-serif;
font-size: 26px;
font-weight: bold;
padding: 5px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
color: #FFFFFF;
font-family: sans-serif;
}
p {
color: #FFFFFF;
font-family: sans-serif;
padding: 5px;
}
a {
text-decoration: none;
color: #FFFFFF;
}
So any suggestion about how I can delete this margin just above my header?
Here you can see my html:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<title>Lista coupon</title>
<script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../js/memoria.js" type="text/javascript"></script>
<style src="../css/style.css" type="text/css"></style>
</head>
<body onload="loadJson();">
<div id="header">
<h1>Lista coupon salvati</h1>
</div>
<div id="content">
<p>Di seguito trovi tutte le promozioni salvate</p>
<div id="list">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
Set margin: 0; to <h1> element
Demo: http://jsfiddle.net/5w6Es/
Same problem as with the margin-left of <ul> elements, or margin-top / margin-bottom of <p> elements, etc.
You need to reset their default styles when using them at the borders of your page.
Try removing padding and margin also for the html element, (not only the body)
Try also to remove the default margin (differently) applied by every browser to the h1 element that you didn't redefined/reset and which is probably collapsing over the #header element
html {
margin: 0;
padding: 0;
}
h1 {
...
margin: 0;
}
You need to add margin:0px; to this CSS: http://jsfiddle.net/vv6DL/
h1 {
text-align: center;
color: #FFFFFF;
font-family: sans-serif;
font-size: 26px;
font-weight: bold;
padding: 5px;
margin:0px;
}
You don't say what browsers its occuring in.
If you use Firebug and its tools you should be able to see what is causing the spacing and then set that to zero, however, a "cheat" would be to use a reset css script such as Meyers http://meyerweb.com/eric/tools/css/reset/ to clean up all those browser inconsistencies.
Try This
h1
{
margin:0px;
}
The best way I've found to do this is by adding the :first-child pseudo-element in your css to your first element such as <h1> or <ul> etc etc within your body-element.
So an example using your mark up above would be
h1:first-child { margin-top: 0; }
This eliminates interfering with all further <h1> elements in your code and also without needless css classes added to your html mark-up.
I hope this helps as I was having the sam problem with little luck with the answers provided.
I'm very new to html and css so feel free to critique any bad practices you see in the code below...
I am trying to create a centered column that's 800 pixels across and the banner will be resized to 800 pixels. When view this page in chrome or firefox it looks great. When I view it in IE8 the font is huge, there is a giant empty spot on the right side of the banner all the way down to the bottom, and the size of the "container" will not change no matter what I do in the css file.
CSS:
body {
font-family: Arial;
font-size: small;
background-color: #FFFFFF;
background-image: url(../images/victorianBackground.jpg);
background-position: top;
background-repeat: repeat;
color: #000000;
}
#container {
margin: -10 auto;
background-color: #D3CDBA;
text-align: left;
}
html>body #container {
width: 800px;
min-height:800px;
padding: 0 0px;
}
#banner {
width:800px;
}
#banner img {
width:800px;
padding:45 0px;
}
#content {
width:500px;
padding: 15px;
background-color: transparent;
}
/* Navigation */
#navigation ul {
list-style-type: none;
width: 800px;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-color: #D3CDBA;
}
#navigation li:hover {
float: left;
color: #4676A4;
background-color: #D3CDBA;
}
#navigation a {
font-weight: bold;
text-decoration: none;
color: #000000;
display: block;
padding: 5px;
}
#navigation a:hover {
font-weight: bold;
text-decoration: none;
color: #992332;
}
#content a {
color:teal;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Park Avenue Neighborhood Association</title>
<meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
<link rel="stylesheet" type="text/css" href="../styles/style1.css">
</head>
<body>
<div id="container">
<div id="banner">
<img src="../images/banner.jpg" id="banner">
<br/>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>History</li>
<li>Houses</li>
<li>Local Business</li>
<li>Events</li>
<li>Contacts</li>
</ul>
</div>
<div id="content">
<h2>Content Header 1 </h2>
<p>Awesome Content </p>
<h2>Content Header 2 </h2>
<p>Awesome Content </p>
</div>
</body>
</div>
</html>
There are multiple issues I see with your source. Non-exhaustive list:
1) You need a doctype. Otherwise, browsers will render items in a non-standard way.
Example:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2) You have a <div> ending after the </body> tag. This is invalid.
Fix:
<p>Awesome Content </p>
</div>
</div>
</body>
</html>
3) You don't need the extra <br> in <div id="banner">.
Fix:
<div id="banner">
<img src="../images/banner.jpg" id="banner">
</div>
4) Now, if you want <div id="container"> to be centered and have a width of 800px, try the following.
Centering code that goes in your css (replaces existing):
body { text-align: center; }
#container {
text-align: left;
width: 800px;
margin: auto;
}
5) For your font-size declaration, you're using small. This will behave unpredictably. Instead, consider using either em or px for font size.
Font size with em:
body { font-size: 100%; line-height: 1.125em; }
#container { font-size: 0.875em; }
Font size with px:
body { font-size: 16px; line-height: 1.125em; }
#container { font-size: 12px; }
First thing I saw, you need to add this to the very first line of your HTML to force IE to render in standards mode, instead of quirks mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In regard to centering the banner, try adding the following:
in body selector:
text-align: center;
in banner:
margin-right: auto;
margin-left: auto;
In regard to font size try using em or % sizing.
Other than that just tackle the problems one at a time, fine tune the details incrementally. Throwing in everything all at once will only create confusion - chances are it wont work as expected, but will frustrate you.