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
Related
Currently I only have a text paragraph only on my About Us page. I have a main Navigation and a Side Navigation bar. The Side Navigation bar is where the problem lies with the paragraph. I'm sure the paragraph is causing a spacing between the Title of the Nav bar (currently it says Collaborations Platforms/Consoles) My interest is having my Side Nav Bar under the title. The paragraph is supposed to be underneath and centered.
.side-nav {
float: left;
list-style: none;
margin-top: 130px;
margin-left: -430px;
}
.side-nav li {
display: inline-block;
}
.side-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px font-family: "Roboto", sans-serif;
font-size: 15px;
background-color: darkviolet;
}
.side-nav li.active a {
border: 1px solid white;
}
.side-nav li a:hover {
border: 1px solid white;
}
p2 {
float: left;
color: white;
text-transform: uppercase;
font-size: 15px;
margin-top: 100px;
margin-left: -410px;
border: 1px solid white;
background-color: darkviolet;
}
<link href="styles/styles.css" rel="stylesheet" type="text/css">
<div class="header">
<img src="images/icon.png" class="logo" alt="Logo" width="150" height="150" />
<h1 style="color:darkviolet"> Collaborations </h1>
</div>
<div class="button">
<a class="discord-button" onclick=" window.open('https://discord.gg/8yAfreq','_blank')"> Join Our Discord Server </a>
<nav>
<ul class="main-nav">
<li>Home</li>
<li>Chat</li>
<li class="active">About Us</li>
<li>Contact Us</li>
</<ul>
</nav>
<p2><strong>Collaborations Platforms/Consoles<strong></p2>
<nav>
<ul class="side-nav">
<li><a>Ps4</a></li>
<li><a>XBox</a></li>
<li><a>Switch</a></li>
<li><a>PC</a></li>
</ul>
</nav>
<p style="color:white; font-size:175%;"> Collaborations is about bringing people together. People who make videos and live stream, whether it is on YouTube or on Twitch.
Are you looking for a specific platform/console to collaborate on? We are sure we have it listed. So far we have collaborations on Ps4, XBox, Switch and,
PC. If there is another platform/console that we have missed or forgot about please let us know and we will add it to the list. Now we understand that
playing alone is fun sometimes, but playing with a friend is much better. Wouldn't you want to celebrate a sweet victory with a friend, group, or team?
We sure believe it is much more fun! Come and join us see who wants to collaborate with YOU! </p>
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!
I am currently making a webpage, which has a side section, such as the one in this photo:
What I currently have is this:
Why is it that my side column isn't showing up like the one in the first picture? I tried to make the side column and test where it would be by putting the words "side column????", however it isn't showing up properly. My code is as follows:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>int222_162d16 - Assignment 2 - Home Page</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" />
</head>
<body>
<nav class="fixed-nav-bar">
<ul class="nav">
<li class="nav">♠ My Zenit Account</li>
<li class="nav"><a class="active" href="index.html">Home</a></li>
<li class="nav">Gallery</li>
<li class="nav">Video</li>
<li class="nav">Audio</li>
<li class="nav">Tables With CSS</li>
<li class="nav">Forms</li>
<li class="nav">CSS Used</li>
<li class="nav">Extra</li>
</ul>
</nav>
<h1>Welcome To The Home Page!</h1>
<div class="s">
<section class="s">
<h3>HTML5 & CSS Normalize</h3>
<p>The reason why we use normalize.css is due to it providing cross-browser consistency in the styling of HTML elements.</p>
<aside><p>SIDE COLUMN???</p></aside>
</section>
<aside><p>SIDE COLUMN???</p></aside>
<section class="s">
<h3>TEXT</h3>
<p>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
</section>
</div>
<hr />
<footer>
<script>
var dt=new Date(document.lastModified); // Get document last modified date
document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
</script>
</footer>
</body>
</html>
CSS:
/*nav.fixed-nav-bar
{
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
margin-top: 10px;
}
*/
ul.nav
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
border: 1px solid #e7e7e7;
box-shadow: 5px 2px 10px #808080;
}
li.nav
{
float: left;
}
li a
{
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color on hover*/
li a:hover:not(.active)
{
background-color: #ddd;
}
li a.active
{
color: #ffffff;
background-color: #9999ff;
}
section.s /*shadow on sections*/
{
background-color: #ccccff;
box-shadow: 5px 2px 10px #808080;
width:63%;
}
/*div.s
{
box-shadow: 5px 2px 10px #808080;
}
*/
footer
{
width:100%;
background:#ccccff;
color:#000000;
border:1px solid #cccccc;
position:absolute;
text-align:center;
font-weight:bold;
display:inline-block;
margin: 0px auto;
line-height:20px;
box-shadow: 5px 2px 10px #808080;
clear: both;
}
aside {
float: right;
width: 30%;
}
I would say, you need to change your HTML to
<div class="s">
<aside>
<section class="s">
<p>SIDE COLUMN???</p>
</section>
</aside>
<section class="s">
<h3>HTML5 & CSS Normalize</h3>
<p>The reason why we use normalize.css is due to it providing cross-browser consistency in the styling of HTML elements.</p>
</section>
<section class="s">
<h3>TEXT</h3>
<p>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
</section>
</div>
see, I moved <aside> out of the section, to make it floats to the right
You can use a framework / structure like this to lay out your page as desired.
Simple Example:
*{position:relative;box-sizing:border-box;font-family:arial;}
nav{position:fixed;height:50px;width:99vw;background:darkcyan;color:white;text-align:center;overflow:auto;font-size:1.2rem;}
nav div{float:left;width:30vw;}
nav ul{float:left;width:65vw;height:50px;list-style:none;}
nav ul li{display:inline-block;padding:0 5vw;}
#wrap{top:50px;overflow:hidden;}
.both{float:left;min-height:500px;margin-left:2vw;padding:20px;}
#main{width:60vw;border:1px solid orange;}
aside{width:29.5vw;border:1px solid blue;}
.sideDiv{margin-bottom:20px;}
<nav>
<div id="logo"><img src="http://lorempixel.com/80/48" /></div>
<ul><li>File</li><li>Edit</li><li>View</li></ul>
</nav>
<div id="wrap">
<section id="main" class="both">
PHOTO GALLERY goes in here
</section>
<aside class="both">
Side Area
<div class="sideDiv">Four other wonders</div>
<div class="sideDiv">Social Media Links</div>
</aside>
</div><!-- #wrap -->
I have a weird problem where my links work fine on one page or fail to do so on another. Here is my code for the non-working page:
<div id="wrapper">
<a href="frontPage.html"><header>
<img src="img/MOBILAX-LOGO.png" height="100" alt="logo">
<h1>MOBI & LAX</h1>
<p>CELLULAR REPAIR CENTER</p>
</header></a>
<nav>
<ul>
<li>
ABOUT US
</li>
<li>
SERVICES
</li>
<li>
IPHONE REPAIR
</li>
<li>
BLOG
</li>
<li>
CONTACTS
</li>
</ul>
</nav>
And the code for the working page:
<div id="wrapper">
<a href="frontPage.html"><header>
<img src="img/MOBILAX-LOGO.png" height="100" alt="logo">
<h1>MOBI & LAX</h1>
<p>CELLULAR REPAIR CENTER</p>
</header></a>
<nav>
<ul>
<li>
<a class="activeLink" href="side2.html">ABOUT US</a>
</li>
<li>
SERVICES
</li>
<li>
IPHONE REPAIR
</li>
<li>
BLOG
</li>
<li>
CONTACTS
</li>
</ul>
</nav>
I am able to see the links fine, but they are not clickable.
Here is the CSS for the nav, ul and wrapper:
nav {
background-color: #2a2a2a;
width: 50%;
height: 200px;
float: left;
}
nav ul {
list-style: none;
height: 200px;
}
nav ul li {
float: left;
margin-top: 86px;
margin-left: 25px;
}
nav a {
text-decoration: none;
color: white;
font-weight: bold;
}
nav a:hover {
color: #f25e44;
}
.activeLink {
color: #f25e44;
}
#wrapper {
width: 1400px;
/*border: 1px solid black;*/
margin-left: auto;
margin-right: auto;
box-shadow: 10px 5px 5px 10px #888888;
}
EDIT: I figured out the issue. I had a div overlapping my ul.
FIDDLE
The # would normally reference an anchor on your page and scroll there. Since you are just using the # it links to itself, so the page wouldn't reload, and would stay in the same place.
Your CSS also specifies not to decorate (underline) the hyperlinks, giving the impression that the link does nothing.
Edit: http://jsfiddle.net/2L3hL7w6/
I've added some CSS to highlight in red if a link has been visited - you'll see if you click on one of your links on the page it changes to red, showing the link does in fact work.
nav a:visited {
color: #ff0000;
}
All the links are the same in your example code. So when you once clicked one link....nothing more will happen since you are already there.
i am developing my first website for which i have navigational links at the top of every page. i noticed some very peculiar behaviour of the site which is : pages whose height is greater than or equal to the max vertical pixels, occupy a certain width, while pages whose content does not fill the height, have a different width even though the code for the menu is exactly the same.why does this happen and what is the remedy? here is the code:
html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About</title>
<link rel="stylesheet" type="text/css" href="about_style.css" />
</head>
<body>
<nav id="menu">
<ul>
<li id="home">Home</li>
<li id="news">News</li>
<li id="tragic_complexity">Tragic Complexity</li>
<li id="d_diary">D Diary</li>
<li id="geeks">Geeks = 1</li>
<li id="about">About</li>
</ul>
</nav>
<ul id="info">
<li>
About the site
</li>
<li>
About the founder
</li>
</ul>
</body>
</html>
css file:
body
{
background-image:linear-gradient(#336666, #66cccc);
}
#info,#menu
{
text-align:center;
}
#info li
{
display:block;
font-family:serif;
height:300px;
width:600px;
border:1px solid black;
overflow:hidden;
padding: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
margin:20px auto 20px auto;
background-color:white;
}
#menu ul li
{
display: inline-block;
margin:auto 20px auto 20px;
font-size: 150%;
font-family: Arial, Verdana, sans-serif;
}
It is very possible that this is simply due to the fact that a vertical scrollbar is introduced on those longer pages and not on the others. If you want to remove this behavior, you can force the scroll bar to be added regardless of content height.
Check these links on how:
http://egilhansen.com/2007/03/28/css-trick-always-show-scrollbars
http://css-tricks.com/snippets/css/force-vertical-scrollbar/
From the first link:
html {
overflow: -moz-scrollbars-vertical;
overflow: scroll;
}