I am new to the world of XHTML and CSS. I put together a page that requires 3 column layout. The code gives me the desired effect across Internet Explorer, Firefox and Google Chrome however am unsure if it is the correct way to code.
I have posted the code for it before it worked and after applying the necessary changes to make it work.
Questions
Is this the correct way to code it?
Is it the best way to code?
What issues can I run into with the code?
Before it worked
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample page</title>
<link rel="stylsheet" type="text/css" href="web.css" media="all" />
<style type="text/css" media="all">
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: medium;
font-weight: normal;
font-style: none;
text-decoration: none;
}
img#bg {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
border: 1px solid #eeeeee;
width: 960px;
margin: 0px auto;
position: relative;
z-index: 1;
}
#header {
background-color: orange;
}
#container {
overflow: auto;
}
#leftnav {
background-color: yellow;
float: left;
width: 100px;
}
#rightnav {
background-color: blue;
float: right;
}
#rightnav p {
border: 1px solid #000000;
font-size: small;
font-style: italic;
}
#content {
background-color: gray;
}
#footer {
clear: both;
background-color: green;
}
ul {
margin: 0px;
padding: 5px;
}
ul li {
list-style-type: none;
display: inline;
}
</style>
</head>
<body>
<div>
<img src="images/background.jpg" alt="background" id="bg" />
</div>
<div id="wrapper">
<div id="header">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<div id="container">
<div id="leftnav">
<ol>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ol>
</div>
<div id="rightnav">
<p>Test</p>
</div>
<div id="content">
content
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
After it worked
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample page</title>
<link rel="stylsheet" type="text/css" href="web.css" media="all" />
<style type="text/css" media="all">
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: medium;
font-weight: normal;
font-style: none;
text-decoration: none;
}
img#bg {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
border: 1px solid #eeeeee;
width: 960px;
margin: 0px auto;
position: relative;
z-index: 1;
}
#header {
background-color: orange;
}
#container {
overflow: hidden;
}
#leftnav {
background-color: yellow;
float: left;
width: 100px;
}
#rightnav {
background-color: blue;
float: right;
width: 100px;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
#rightnav p {
border: 1px solid #000000;
font-size: small;
font-style: italic;
}
#content {
background-color: gray;
}
#footer {
clear: both;
background-color: green;
}
ul {
margin: 0px;
padding: 5px;
}
ul li {
list-style-type: none;
display: inline;
}
</style>
</head>
<body>
<div>
<img src="images/background.jpg" alt="background" id="bg" />
</div>
<div id="wrapper">
<div id="header">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<div id="container">
<div id="leftnav">
<ol>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ol>
</div>
<div id="rightnav">
<p>Test</p>
</div>
<div id="content">
content
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
The code is pretty much ok - few things you may do:
1.) You don't need to define properties that are set by default in the browser: font-weight: normal; is already the default browser value for body so you can omit that if you are not changing it's look.
2.) margin: 0px; does not need the px with it - do margin: 0;
3.) Name ids and classes with content-related names - not with layout related: #rightnav might be on the right side in your current css layout but one day you may change your mind and put it on left side and the id kinda looses some relevance. #subnav might be a better choice.
4.) Don't really understand what you wanted to acomplish with this bit of code (since i don't have time to setup a live site example):
padding-bottom: 1000px;
margin-bottom: -1000px;
but looks bit ugly altough it is perfectly valid and can do the job.
5.) <img src="images/background.jpg" alt="background" id="bg" /> - If the image is a background and not content related use the css property background-image to apply it.
I won't comment on meta tags since I don't have enough knowledge about it.
A few comments with regards to meta tags...
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
These meta tags are useless.
<meta name="keywords" content="" />
The meta keywords used to matter. No search engines bother with it anymore as it's always abused.
<meta name="description" content="" />
And this meta tag is... well... not useless, but almost. The content within the page should all the describing for you.
Related
ive been following this guys tutorial, ive timestamped it- and he has a text block that floats to the side.
image, which is a div on its own keeps going in the middle when i make one float left and the other float right and i don't know why.
enter image description here
*also if i put the image floated next to a textbox, how would i make sure they're the same height?
body {
background-color: aquamarine;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.navbar {
list-style: none;
color: red;
}
.container {
width: 60%;
margin: auto;
}
.box-1 {
margin-bottom: 1%;
padding: 1%;
background-color: darkgray;
color: white;
}
.box-2 {
float: left;
padding: 1%;
width: 30%;
color: black;
background: white;
border-style: none;
}
.sidebox {
float: right;
background-color: aliceblue;
width: 60%;
}
img {
float: none;
margin: 10%;
display: block;
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>help</title>
<link href="Untitled-1.css" rel="stylesheet" />
<meta charset="utf-8" />
<meta name="description" content="Web Development" />
<meta name="keywords" content="HTML and CSS" />
<meta name="author" content="grace" />
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Study</li>
<li>Animation</li>
</ul>
</nav>
</header>
<div class="container">
<div class="box-1">
<h1>Achievments</h1>
<p>Grace has completed these 4 achievements:</p>
<ol>
<li>Two decades of existing</li>
<li>3+ jobs</li>
<li>Graduated high school</li>
<li>Failed hopes and dreams</li>
</ol>
</div>
<div class="box-2">
<h1>Hobbies</h1>
<ul>
<li>Rollerskating</li>
<li>Crying</li>
<li>Buying many books</li>
<li>Reading some books</li>
<li>Drawing and ctrl z</li>
<li>Video Games</li>
</ul>
</div>
<div class="sidebox">
<p>Lorem ipsum ebfasuigfuie eufsiefh adfhuseifhuei efhnsihfeihf </p>
<p>fuck</p>
<p>off</p>
<p>image</p>
</div>
<div class="astro">
<img src="https://res.cloudinary.com/dvifiaohc/image/upload/v1651048486/fly_gpbrfe.png">
</div>
</div>
</body>
</html>
Your CSS for the image elements is all wrong if you're trying to float and snap to the rightmost part of the page.
img{
float:none;
margin:10%;
display:block;
width:300px;
}
Set the margin value to something closer to 0 and set float: right, like so
img{
float: right;
margin:5px;
display:block;
width:300px;
}
I would like to align the text in my navigation menu respective to the logo on the left, so it is centered vertically. Right now, it is aligned to the top, which I don't want. I tried using align-items center for the text in the navigation menu, but wasn't able to work.
Navigation Picture
body{
margin:0;
padding:0;
}
.header{
background-color: salmon;
height: 100px;
}
.header img {
float: left;
width: auto;
height: 100%;
}
.header h1 {
margin-top: 0px;
padding-top:10px;
left: 10px;
}
ul li{
display: inline;
font-weight: bold;
align-items: center;
}
li a{
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href="Logo - Copy.css">
</head>
<body>
<div class="header">
<img src="Small_scream.png">
<ul>
<li>
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</li>
</ul>
</div>
</body>
</html>
The generic way to vertically align something is with vertical-align: middle , though that doesnt work if the parent/container doesn't already have reason to be taller than the thing you're trying to align.
A generally easier way to design this layout would be using flexbox , then you can use things such as align-items.
If you're interested in more about that, then here is a good place to start.
Please see below an example using flexbox.
body {
margin: 0;
padding: 0;
}
.header {
background-color: salmon;
height: 100px;
display: flex;
align-items: center;
gap: 10px;
}
<div class="header">
<img src="https://via.placeholder.com/100">
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</div>
Here is solution for your query.
You will have to add CSS in header class instead of ul li & li a.
.header{
background-color: salmon;
height: 100px;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href="Logo - Copy.css">
</head>
<body>
<div class="header">
<img src="Small_scream.png">
<ul>
<li>
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</li>
</ul>
</div>
</body>
</html>
i tried to make a top nav bar. why my version is different from the w3s version, I cant find my mistake.
this is the css code and the html code
.logo {
padding-right: 30px;
color: #ffffff;
}
.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #a80664;
border-color: transparent;
background-color: #a80664;
}
.topnav-menu {
float: left;
}
.topnav-menu a {
display: block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav-menu a:hover:not(.active) {
background-color: #ff0094;
}
.topnav-menu a.active {
{
color: #a80664;
background-color: #f3f3f3;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- BOOTSTRAP CSS STYLESHEET LINK -->
<!-- MY CUSTOM CSS -->
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title></title>
</head>
<body bgcolor="#000000">
<li>
<div class="logo"><a>LOGO</a></div>
</li>
<ul class="topnav-menu">
<li><a class="active" href="#Home">HOME</a></li>
<li>KATEGORI</li>
</ul>
</body>
</html>
With those code I can't make a top nav bar like this
this is what i want
what kind of mistake did i do?
You have to put your logo before tag and you have to wrap in
and you have to wrap your all code in side
<nav>
<div class="logo">
<img src="imagepath">
</div>
<div class="wrapper">
<ul>
<li>Home</li>`enter code here`
**strong text**<li>About</li>
</ul>
</div>
</nav>
I am currently using the latest version of bootstrap and I have created a landing page. However, the success button is not clickable on 13inch/15inch laptops and desktops which is weird.
The URL is here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Loot.es - First CSGO SMS Service in the World. We send out notifications of matches live to our users for major Counter Strike Global Offensive tournaments. ">
<meta name="author" content="nivekyo">
<link rel="icon" href="img/favicon.ico">
<title>Loot.es - CSGO SMS Service</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" >
<link href="css/landing.css" rel="stylesheet" >
</head>
<body>
<div class="container">
<h1 class="title">The notification we've all been waiting for.</h1>
<p class="lead" style="font-size: 1.2em;">Get notified when a team wins at all major Counter-Strike tournaments.</p>
<div class="left"><img class="bubble" src="img/speech.png"/></div>
<p class="join"><a class="btn btn-success btn-lg" role="button" href="https://steamcommunity.com/groups/lootes"><i class="fa fa-steam-square"></i> Join now, it's free.</a></p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">
Privacy Policy | #nivekyo
</p>
</div>
</footer>
</body>
</html>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
#media (min-width: 1200px) {
.container {
width: 560px;
padding-top: 200px;
}
}
html {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
padding-top: 50px;
}
.container {
text-align: center;
}
.title {
font-family: 'Open Sans Condensed', sans-serif;
}
.join {
padding-top: 30px;
}
a:hover {
text-decoration: none;
}
img.bubble {
padding-top: 20px;
width: auto;
height: 180px;
}
.left {
text-align: left;
}
With much thanks!
It is not because of 15" Screen, but it is because of the padding on the footer and .container. Solution:
footer, footer .container {padding-top: 0;}
Adding the above code to landing.css works.
Have a bit of a issue with a h1 not staying in its containing div, the odd thing is its stays in it until the h1 gets to a certain font size then it starts going outside of the div and overlapping into other content. Here is my html and css, also i am also using the eric meyer reset sheet and my font style sheet just contains my #font-face font styles since i am using a custom font:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Lawrence Chabela - User Interface Design</title>
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/font.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<!--[if IE 6]>
<link rel="stylesheet" href="/css/ie6.css" type="text/css" media="screen" charset="utf-8">
<![ endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="/css/ie7.css" type="text/css" media="screen" charset="utf-8">
<![ endif]-->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
<div class="siteWrap">
<div class="nav clearfix">
<ul class="clearfix">
<li>
Home<span>is where I work.</span>
</li>
<li>
About<span>this dude.</span>
</li>
<li>
Folio<span>take a peek.</span>
</li>
<li>
News<span>whats going on.</span>
</li>
<li>
Contact<span>got some work?</span>
</li>
</ul>
</div>
<div class="slogan">
<h1>Why Is this h1 not staying in here</h1>
</div>
</body>
/*Clearing Floats*/
html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear { background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfix:after { clear: both;content: '.';display: block;visibility: hidden;height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*Base*/
body { font: .875em/1.295em AurulentSansRegular,Impact,Arial,Geneva,Helvetica,sans-serif; background: #f2f2f2 url('../img/top_dot.png') no-repeat scroll center 9px; border-top: 9px solid #000; }
.siteWrap { width: 1024px; margin: 0 auto; }
.nav { width: 67%; margin: 50px auto 0; padding: 0 0 15px; border-bottom: 1px solid #BFBFBF; }
.nav ul { margin: 0 auto; width: 94%; }
.nav li { float: left; padding: 0 68px 0 0; font-size: 1em; text-transform: uppercase; }
.nav li:last-child { padding: 0; }
.nav li span { padding: 2px 0 0; clear: both; display: block; color: #868686; font-size: .875em; text-transform: none; }
.slogan { text-transform: uppercase; }
<div class="slogan"> isn't closed.