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 -->
Related
.about:hover > .left {
color: #DAFDBA;
}
HTML: >
<div class="navbar">
<!--Lines above Links-->
<hr class="left">
<hr class="middle">
<hr class="right">
<!--Links (Text)-->
<p class="about">About.</p>
<p class="projects">Projects.</p>
<p class="contact">Contact.</p>
</div>
What should be the statement between .about:hover and .left?
You can use code like this if you just want to have three links with one line above each one, and hovering over the link the line turns green
a{
color:inherit;
text-decoration: none;
border-top: 2px solid #000;
padding:.2em 0 0;
margin: 0 .2em;
}
a:hover {
border-color: #DAFDBA;
}
<nav>
About
Projects
Contact
</nav>
As my title suggests, my content goes off screen.
I've looked through my css file, and there's isn't any margins with minus something. So why is the content going off screen at both sides?
Appreciate any suggestions to why this is.
Thanks.
body{
background: linear-gradient(rgb(100,50,50), rgb(80,20,20)) no-repeat;
color: white;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
img{
margin: 1%;
}
/*Header*/
header {
background-color: #1d1e21;
height: 100vh;
position: relative;
}
header span {
color: #fff;
}
header input {
margin-top: 20px;
}
p#slogan {
color: #fff;
letter-spacing: 2px;
}
ul {
list-style-type: none;
}
ul li {
display: inline;
padding: 0 0 0 10px;
}
ul li a {
color: #fff;
list-style-type: none;
}
ul li a:hover {
color: black;
list-style-type: none;
text-decoration: none;
}
/*Main*/
/*sloganAndSocial*/
#sloganAndSocial {
background-color: #1d1e21;
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NBC 2011</title>
<link rel="stylesheet" href="css/main.css" type="text/css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
<!--Header section-->
<header>
<div id="topBar">
<div class="row">
<h1 class="pull-left"><span>NORDIC </span>BARISTACUP</h1>
<form class="pull-right">
<input type="text" name="search" placeholder="Search..">
</form>
</div>
<div class="row">
<p class="pull-left" id="slogan">be together act together learn together</p>
<ul class="pull-right">
<li>ABOUT NBV</li>
<li>2011 EVENT</li>
<li>NORDIC ROASTER</li>
<li>RESULTS</li>
<li>LINKS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<!--Main section-->
<div class="main">
<img src="" alt="bo!" class="cover" />
</div>
<div id="sloganAndSocial">
<div class="container">
<div class="row">
<h2 class="pull-left">"To create an environment in which knowledge<br>about coffee and its sphere can be obtained"</h2>
<ul class="share-buttons">
<li><img alt="Share on Facebook" src="images/flat_web_icon_set/inverted/Facebook.png"></li>
<li><img alt="Tweet" src="images/flat_web_icon_set/inverted/Twitter.png"></li>
<li><img alt="Share on Google+" src="images/flat_web_icon_set/inverted/Google+.png"></li>
<li><img alt="Pin it" src="images/flat_web_icon_set/inverted/Pinterest.png"></li>
<li><img alt="Send email" src="images/flat_web_icon_set/inverted/Email.png"></li>
</ul>
</div>
</div>
</div>
</header>
<!--Section1-->
</body>
</html>
You have two divs in your topBar with class row but which are not inside an element with class container. That is not intended by Bootstrap and therefore leads to unintended behaviour. You have to wrap those two divs in another div with class container.
Also, as #nik_m mentioned: Why are you wrapping the whole page in a header? That's not, what headers are supposed to do.
Remove pull-left and pull-right classes from the elements and better use flexbox for your alignments. It will make your life much easier!
Also, why the wrapper of the whole site is inside a header???
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
I've been trying to figure this out for a while but I can't seem to get it to work. All I want is to add text in the middle of the list item (see code) however it creates an extra line and makes the row bigger. I tried using the tag but it doesn't work. How can I add the text to be centered without changing the row size?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<style>
.ui-icon-myicon:after {
background-image: url("http://people.mozilla.org/~shorlander/files/australis-linux-svg-test/images-linux/toolbarButton-bookmark.svg");
}
.ui-icon-myicon2:after {
background-image: url("http://forum.librecad.org/images/gear.png");
}
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
</style>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true" >
<li data-icon="myicon"><span class="ui-icon-myicon2 ui-btn-icon-notext inlineIcon"></span>Center this text</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>My page footer</h1>
</div>
</div>
</html>
There is a better solution than adding spans. Copy jQuery Mobile button's CSS, that are used for icons. Do the changes you want to them. Of course, add a custom class to a tag.
See it working here.
<li>
Center Text
</li>
jQuery Mobile uses :after, use :before for your left side icon.
.ui-icon-myicon:before {
content:"";
left: .5625em;
position: absolute;
display: block;
width: 22px;
height: 22px;
background-color: #666;
background-color: rgba(0, 0, 0, .3);
background-position: center center;
background-repeat: no-repeat;
-webkit-border-radius: 1em;
border-radius: 1em;
background-image: url("http://forum.librecad.org/images/gear.png");
}
To center text, follow CSS hierarchy to override default settings.
Thanks to ezanker for his valuable input. Adding padding: 40px makes center alignment just perfect!
.ui-listview > li > a.ui-btn {
text-align: center;
padding: 40px; /* see ezanker's comment below */
}
Use text-align: center to center align the text.
Set the extra icon to display: block and use the ui-btn-icon-left class to align left.
li.x-center > a.ui-btn {
text-align: center;
}
li.x-center > a > span {
display: block;
}
<ul data-role="listview" data-inset="true">
<li data-icon="myicon" class="x-center">
<span class="ui-btn-icon-left ui-icon-myicon2"></span>Center this text
</li>
</ul>
Fiddle
Add style="text-align:center" to your <a> tag:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<style>
.ui-icon-myicon:after {
background-image: url("http://people.mozilla.org/~shorlander/files/australis-linux-svg-test/images-linux/toolbarButton-bookmark.svg");
}
.ui-icon-myicon2:after {
background-image: url("http://forum.librecad.org/images/gear.png");
}
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
</style>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true" >
<li data-icon="myicon"><span class="ui-icon-myicon2 ui-btn-icon-notext inlineIcon"></span>Center this text</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>My page footer</h1>
</div>
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