I'm very new to web development. I feel confident in my knowledge in HTML and CSS to start building my webpage and I was exposed to a very small amount of bootstrap. My question is regarding a personal webpage I am building for myself. I want to have a navigation bar on the top that will link to different pages such as: "Home", "about me", "Projects". But I still have a hard time understanding how to position them where I want. My idea is to make these 3 fields a list, take out the list styling, and then make these elements inline-block. But for some reason, my code does not translate to what I want which is all 3 phrases on a single line and spaced out evenly. Further, even if I can manage that how can I control where it goes beside floating left or right or using bootstrap? Even though it may be less efficient can anyone explain to me the naive way of hardcoding it with just HTML and CSS just so I have an understanding? Do I have to manipulate the margins and padding through trial and error? Any advice would be appreciated, I have just begun to learn HTML and CSS but I am determined to get good at web development.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>First WebPage</title>
<link rel="stylesheet" type="text/css" href = "style.css">
</head>
<body>
<div class = "top-border">
<ul class = "navbar">
<li>Home </li> <br>
<li>About Me </li> <br>
<li>Projects </li>
</ul>
</div>
</body>
</html>
My CSS is
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.top-border {
width: auto;
height: 100px;
background-color: #D46A6A;
}
.navbar{
float:left;
display: inline-block;
list-style: none;
margin-left: 20px;
}
Using <br> tag is not proper way for layout implementation, Please omit them, I proffer using flex, the flex-box methods are very simple and useful. see below code:
.navbar {
display: flex;
flex-direction: row;
}
For more styles, use your past CSS.
to make your menu single line, remove <br> from your list and set li to float: left
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.top-border {
width: auto;
height: 100px;
background-color: #D46A6A;
}
.navbar {
float: left;
display: inline-block;
list-style: none;
margin-left: 20px;
}
.navbar li {
float: left;
border-right: 1px solid yellow;
padding: 2px 5px
}
<div class="top-border">
<ul class="navbar">
<li>Home </li>
<li>About Me </li>
<li>Projects </li>
</ul>
</div>
Not using bootstrap here, as you have mentioned in your question
<div class="top-border">
<div class="navbar">
<a class="links" href="you can add your page links here" > Home </a>
<a class="links" href="#" > About </a>
<a class="links" href="#" > Project </a>
</div>
</div>
<style>
.top-border{
width:100%;
height:auto;
position:absolute; #or use float if you don't want a fixed navbar
top:0; #add as per requirement
left:0;
}
.navbar{
height:100px;
width:800px;
margin-left:auto;
margin-right:auto;
}
.links{
float:left;
height: 50px;
width: 100px;
padding-top: 25px;
padding-bottom : 25px;
text-align: center;
text-decoration: none;
}
</style>
Also, don't forget to make the body margin 0.
I found that w3css (https://www.w3schools.com/w3css/) was easier than Bootstrap, had enough structure to produce the types of layouts you describe, AND has the added bonus of having a really small code footprint. Standard CSS only (No jQuery or JavaScript library).
Each feature links to a 'Tryit' editor. This link shows the layout you describe with two cells.
(https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_layout_container)
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Just add one more cell block, and you're there.
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<!--HERE-->
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Hope this helps, good luck!
Related
So, I have this menu:
What can I do to the menu fill horizontally the entire page? Am I using the wrong bootstrap classes? It just fills a part of the page. Can someone teach me what to do here?
ul {
list-style-type: none;
border-bottom-style: solid;
border-bottom-color: green;
position: relative;
}
li {
display: inline;
padding: 30px;
}
#menu a {
color: black;
}
#menu a:hover {
color: green;
font-weight: 700;
text-decoration: none;
border-bottom-style: solid;
border-bottom-color: green;
border-bottom-width: 6px;
border-radius: 4px;
}
<body>
<section>
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid wrapper">
<div class="navbar-header">
<ul id="menu">
<div class="row">
<div class="col-md-12">
<li><img src="Imagens/Logo.png"></li>
<li id="menu1">About us</li>
<li> Act</li>
<li> News</li>
<li> Videos</li>
<li> Contact us</li>
</div>
</div>
</ul>
</div>
</div>
</div>
</section>
</body>
Im not an expert at bootstrap and I don't know for what the class is used to do but if I remove the div-element: <div class="navbar-header"></div> it worked in my Chromium.
With Chromes Developer Tools you are able to find bugs like this
(Ctrl+Shift+I or Ctrl+Shift+C to use the Element Inspector directly)
Maybe you could add style="text-align: justify"; on the wrapping div around your <li> tags to set the spaces between the menu entry's dynamically.
Hope it would help you.
You can set the width of navbar-header to 100% with the below code to make the varbar cover the full length horizontally however it's not going to perfect functional navbar.
.navbar-header{
width:100%
}
The reason being, it does look like this is possibly a Bootstrap 3 navbar that you're trying to use with bootstrap 4 which is why it's not working. The classes are different between BS3 and BS4.
Check http://getbootstrap.com/docs/4.0/examples/navbars/ for examples for how to implement a bootstrap 4 navbar.
I am trying to build a site (just to learn, is not an actual website) and at the top there's links to different sections of the page. The HTML goes as follows:
<!DOCTYPE html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li>Airbnb logo</li>
<li>Browse</li>
</ul>
<ul>
<li>Sign Up</li>
<li>Log In</li>
<li>Help</li>
</ul>
</div>
</div>
<div class="header">
<div class="container">
<h1>Find a place to stay.</h1>
<p>Rent from people in over 34,000 cities and 192 countries.</p>
</div>
</div>
<div class="learn-more">
<div>
<div>
<div>
<h3>Travel</h3>
<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
<p>See how to travel on Airbnb</p>
</div>
<div>
<h3>Host</h3>
<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
<p>Learn more about hosting</p>
</div>
<div>
<h3>Trust and Safety</h3>
<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
<p>Learn about trust at Airbnb</p>
</div>
</div>
</div>
</div>
</body>
</html>
Now I am trying to style the page, but I want all the elements of the navbar in the same line.
So far I have:
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.header {
background-image:url('http://bit.ly/1KIFZoI');
background-size: cover;
height: 300px;
}
.header h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.header p {
font-size: 20px;
color: #fff;
}
However, the display: inline; still leaves my navbar in two lines. I want them all in the same line if possible not putting all the elements in the same list (same ul)
Thanks!
Just do this:
ul{
display: inline-block;
vertical-align: middle;
}
Beware: you have default padding in the <ul>, because of that you
have a gap between them. Just add padding:0 and/or margin:0to the
<ul> to eliminate the gap ( adjust your needs ).
DEMO HERE
So I've just started with HTML/CSS, and I decided to start with something simple, like a nav bar. But the thing is all the tutorials online only go up to this point (below code) and completely ignore how to put a space between each list item. I've tried adding width, but it makes an uneven space. Could someone please show me how to do this? Thanks!
Here's my code; a working model is here
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="bannercontent">
<ul id="banner">
<li id="bannerlinks"><a id= "links" href="#">What We Do </a></li>
<li id="bannerlinks"><a id= "links" href="#"> Pricing </a></li>
<li id="bannerlinks"><a id= "links" href="#"> Contact Us </a></li>
<li id="bannerlinks"><a id= "links" href="#"> Wholesale</a></li>
</ul>
</div>
</body>
</html>
CSS:
#import url(http://fonts.googleapis.com/css?family=Quicksand:300);
#bannercontent{
font-family: 'Quicksand:300';
text-align: center;
font-size: 25px;
}
#banner{
list-style-type: none;
margin: 0;
padding: 0;
}
#links{
text-decoration: none;
}
#bannerlinks
{
display: inline;
}
Use a margin value on li elements:
li { margin-right: 20px; }
This will add a space of 20px between all li elements.
DEMO
Please note: ids are supposed to be unique, classes are made for adding the same style to similar elements, so instead of <li id="bannerlinks"> it should be <li class="bannerlinks">. In your CSS you need to update #bannerlinks to .bannerlinks.
I will second the concept of class usage over id.
For the purpose of your question, I did not change that, but was able to get results using a padding on your bannerlink elements:
#bannerlinks
{
display: inline;
padding: .5em;
}
You can tweak the number to set spacing as wide as you want, for example 5em forced it to multiple lines in the JSFiddle window.
Im really new to web design and i need to create a simple website for a class. For some reason no matter what i try my unordered list wont float right. please help! my unordered list will only stay on the left side of the page for some reason.
This is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <title> PhiladelphiaEagles.com - Summary Page </title> <link href="style.css" rel="stylesheet">
</head>
<body>
Go To Home Page
<h1 align="center"> Jacob Kaneff</h1>
<h2> Website Evaluation: - Summary Page <h2>
<figure>
<img src="eagles.png" alt="Homepage screen shot" width="650" height="650">
<figcaption align="center">Homepage Screen Shot</figcaption>
</figure>
<div id="wrapper">
The official Philadelphia Eagle's website is your one stop for all things Philadelphia Eagles. Whether you want the Latest updates or want to participate in online discussions, this page is for you. Sponsered by the NFL, this page is beautifully laid out and is easily navigated. The news is always well written, and up to date with breaking news coming in daily.
</div>
<ul>
<li> Summary </li>
<li> Audience </li>
<li> Task </li>
<li> Navigation </li>
<li> Functionality </li>
</ul>
<footer>
</footer>
</body>
</html>
This is my css
body{
background-color:gray;
color:#000000;
width:910px;
font-family:Georgia,Arial,Serif;
font-size: 12px;
}
figure {
float:right;
}
#wrapper{float:left; width: 150px; border: 1px solid brown; }
ul {
float:right;
border: 1px solid blue ;
float: right;
}
li:link {color:green;}
li:visited {color:green;}
li:hover {color:red;}
li:active {color:yellow;}
Alright, so there are a couple things going on you may want to change :D
body{
background-color:gray;
color:#000000;
width:910px;
font-family:Georgia,Arial,Serif;
font-size: 12px;
}
Notice you have
width:910px;
This will change the entire webpage to only take up 910 pixels of your browser window. You haven't aligned the body with the rest of the window so the whole thing stays left.
To fix this you can do a couple things, one solution is to change width:910px; to width:100%;
Another solution is to center your body, you can do this by adding the two following lines to the body{} css block
margin-left:auto;
margin-right:auto;
There are several other things going on in your page that need some looking into, such using the deprecated align="center" along with your css, but one step at a time. You're doing great, keep on chugging along!
Check this FIDDLE
Just give your ul a <ul class="right">
Then in CSS
.right {
float: right;
width: 100px;
}
It's floated to the right already!
it says it in your css twice!
ul {
float:right;
border: 1px solid blue ;
float: right;
}
first you need to change that to
ul {
float:right;
border: 1px solid blue ;
}
second maybe you want the li's floated right?
in this case it's a bit different:
ul li{
float:right;
}
but this will put your ul underneath the figure element!
In conclusion: Your ul is already floated to the right, reading from your css, but on a page it's hard to see because the figure element that contains an image will not let ul to be all the way on the right side of the page.
I think the problem is width and float,
i just rewrite the code....
html code like
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> PhiladelphiaEagles.com - Summary Page </title>
</head>
<body>
Go To Home Page
<h1 align="center"> Jacob Kaneff</h1>
<h2> Website Evaluation: - Summary Page </h2>
<div class="leftside">
<figure>
<img src="eagles.png" alt="Homepage screen shot" width="650" height="650">
<figcaption align="center">Homepage Screen Shot</figcaption>
</figure>
<div id="wrapper">
The official Philadelphia Eagle's website is your one stop for all things Philadelphia Eagles. Whether you want the Latest updates or want to participate in online discussions, this page is for you. Sponsered by the NFL, this page is beautifully laid out and is easily navigated. The news is always well written, and up to date with breaking news coming in daily.
</div>
</div>
<div class="rightside">
<ul>
<li> Summary </li>
<li> Audience </li>
<li> Task </li>
<li> Navigation </li>
<li> Functionality </li>
</ul>
</div>
</body>
</html>
css like
<style type="text/css">
body{
background-color:gray;
color:#000000;
width:910px;
font-family:Georgia,Arial,Serif;
font-size: 12px;
}
figure {
float:left;
}
#wrapper{float:left; width: 150px; border: 1px solid brown; }
ul {
border: 1px solid blue ;
float: right;
}
.leftside { float:left; width:400px;}
.rightside{float:right; width:400px;}
</style>
Try this code...
Am a newbie in CSS and am writting this code and the main content and the sidebar are falling out of place. Anyone know why?
Here is the HTML and CSS used
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> WEB HELPDESK</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles/polaris.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<p class="banner"> WEB HELP DESK <p>
</div>
<div id="pathway">
</div> <!-- pathway -->
<div id="main">
<div id="menu_bar">
<div class="menu">
<ul>
<li> Manufacturers </li>
<li> Add Manufacturer </li>
<li> Edit manufacturer </li>
<li> Delete Manufacturer </li>
</ul>
<ul>
<li> Asset types </li>
<li> Add Asset types </li>
<li> Edit Asset Types </li>
<li> Delete Asset Types </li>
</ul>
<ul>
<li> Asset Status </li>
<li> Add Asset Status </li>
<li> Edit Asset Status </li>
<li> Delete Asset Status </li>
</ul>
<ul>
<li> Assets </li>
<li> Add Asset </li>
<li> Edit Asset </li>
<li> Delete Asset </li>
</ul>
</div>
</div> <!-- Menu bar -->
<div id="sidebar">
sidebar
</div> <!-- Menu bar -->
<div id="main_content">
<div id="errors">
</div> <!-- Errors -->
<div id="content">
content goes here
</div> <!-- Content -->
am floating here
</div>
</div> <!-- Main -->
<div id="footer">
</div> <!-- Footer -->
</div> <!-- Container-->
</body> <!-- Body -->
</html>
And the CSS:
body {
font-family: arial, san serif;
color: #000000;
}
#container {
margin: 0em 1.5em 1.5em 1.5em;
border: 1px solid #46A5E0;
}
#header{
margin: 0.1em 0em 0.1em 0.1em;
border: 1px solid #46A5E0;
width: 99%;
height: 5em;
}
#header .banner {
color: #333399;
text-align: centre;
font-size: 1.6em;
}
#pathway {
}
#main {
margin: 0.1em 0.1em 0.1em 0.1em;
border: 1px solid #000000;
}
#menu_bar {
margin: 0.1em 0.1em 0.1em 0.1em;
border: 1px solid #46A5E0;
width: 13em;
}
#menu_bar .menu {
font-size: 0.7em;
}
#sidebar {
margin: 0.1em 0.1em 0.1em 0.1em;
border: 1px solid #46A5E0;
float: right;
width: 13em;
}
#main_content {
margin: 0.1em 0.1em 0.1em 0.1em;
border: 1px solid #46A5E0;
float: right;
}
#errors {
}
#content {
}
#footer {
}
Check the Holy Grail article from A List Apart. The article shows the best way to create a 3 column layout.
Don't go the easy path and just use tables for your layout! Use the table tag only for "real tables", for everything else use divs, spans, lists, etc.
The benefit of a table-less layout is mostly that it's more accessible: An older browser, or a mobile browser, will simply ignore the CSS and display only the HTML-contents of the page. Div tags will be ignored, while a table would clutter your layout... It's true, there will be LOTS of divs! But using tables for layouting isn't necessary anymore these days!
Also, personally, I wouldn't start with a WYSIWYG tool. If you want clean HTML you will have to write it yourself. Also, with a little practice, you will write HTML faster by hand than with a tool. All the professional layouters I have worked with write HTML in plain text...
Your sidebar is floated right; the main content isn't. Try moving the sidebar above the main content in the markup. Alternatively, try specifying a float for the main content as well.
Go with a float:left for the left resting div tags with float right for the right side div, I suspect you are just missing the float parts.
not sure exactly what you're trying to get to, but I suspect something like...
replace the following css class definitions: #menu_bar, #main_content, #footer with
#footer {
clear:both;
}
#main_content {
margin: 0.1em 0.1em 0.1em 0.1em;
border: 1px solid #46A5E0;
float: left;
}
#menu_bar {
margin: 0.1em 0.1em 0.1em 0.1em;
border: 1px solid #46A5E0;
width: 13em;
float:left;
}
What was required was a div within the at the end indicated as
that would have the following property in CSS
clear {
clear: both;
}
this would solve the positioning problem, it will bring the sidebar and the main_content to the right positions and from here adjustments can be made to the sidebar and main_content in terms of width and margins