In order to practise CSS I've decided to create Google-like page. My problem is no matter what I do, there's always that little extra space on top and on bottom of body even though body has margins and padding of 0. HTML tag for some reason works well with the same styles.
HTML code:
<!doctype html>
<html>
<head>
<title>Google</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta charset="utf-8" />
</head>
<body>
<div id="pageWrapper">
<div id="topBar">
<ul>
<li>+Tomasz</li>
<li>Gmail</li>
<li>Grafika</li>
</ul>
</div> <!-- end of topBar -->
<div id="middleBar">
<div id="centerBox">
<img id="logoImage" alt="Google Logo" src="logo.png" width="269" height="95" />
<input type="text" size="80" />
<span id="countryName">Polska</span>
<div id="centerBoxButtons">
<div class="button">Szukaj w Google</div>
<div class="button">Szczęśliwy traf</div>
</div>
</div> <!-- end of centerBox -->
</div> <!-- end of middleBar -->
<div id="bottomBar">
</div> <!-- end of bottomBar -->
</div> <!-- end of pageWrapper -->
</body>
</html>
CSS code:
html {
background-color: #fff;
padding: 0px;
margin: 0px;
height: 100%;
}
body {
padding: 0px;
margin: 0px;
}
#pageWrapper {
font-family: Tahoma, Arial, sans-serif;
color: rgb(64,64,64);
font-size: 0.85em;
margin: 0px;
padding: 0px;
}
a:link, a:visited {
text-decoration: none;
color: rgb(64,64,64);
}
a:active, a:hover {
text-decoration: underline;
color: rgb(64,64,64);
}
#topBar {
width: 100%;
height: 60px;
background-color: yellow;
line-height: 60px;
text-align: right;
margin: 0px;
padding: 0px;
}
#topBar ul {
list-style-type: none;
}
#topBar ul li {
display: inline;
margin: 0px 10px 0px 0px;
}
#middleBar {
width: 100%;
/*border: solid 2px black; /*----------delete this later*/
}
#centerBox {
margin-top: 125px;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 200px;
/*border: solid 2px red; /*--------------delete later*/
}
#centerBox img {
width: 269px;
height: 95px;
margin: 0px 166px 0px 166px;
}
#centerBox input[type="text"] {
margin: 20px 0 0 0;
padding: 0;
height: 25px;
}
#countryName {
font-size: 1.2em;
font-weight: bold;
color: grey;
position: relative;
bottom: 75px;
left: 380px;
}
#centerBoxButtons {
width: 250px;
/*border: solid 2px blue; /*--------------delete later*/
margin-left: 175px;
}
.button {
font-weight: bold;
background-color: rgb(240,240,240);
border: solid 1px rgb(150,150,150);
padding: 6px;
font-size: 0.78em;
display: inline;
margin-left: 15px;
border-radius: 4px;
}
.button:active {
position: relative;
top: 1px;
left: 1px;
}
The anwser is simple. add margin:0px; to your #topBar ul. Here you have a working fiddle
This is a simple way you just put margin padding on top see the code.
*{
padding: 0px;
margin: 0px;
}
html {
background-color: #fff;
padding: 0px;
margin: 0px;
height: 100%;
}
body {
padding: 0px;
margin: 0px;
}
#pageWrapper {
font-family: Tahoma, Arial, sans-serif;
color: rgb(64,64,64);
font-size: 0.85em;
margin: 0px;
padding: 0px;
}
a:link, a:visited {
text-decoration: none;
color: rgb(64,64,64);
}
a:active, a:hover {
text-decoration: underline;
color: rgb(64,64,64);
}
#topBar {
width: 100%;
height: 60px;
background-color: yellow;
line-height: 60px;
text-align: right;
margin: 0px;
padding: 0px;
}
#topBar ul {
list-style-type: none;
}
#topBar ul li {
display: inline;
margin: 0px 10px 0px 0px;
}
#middleBar {
width: 100%;
/*border: solid 2px black; /*----------delete this later*/
}
#centerBox {
margin-top: 125px;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 200px;
/*border: solid 2px red; /*--------------delete later*/
}
#centerBox img {
width: 269px;
height: 95px;
margin: 0px 166px 0px 166px;
}
#centerBox input[type="text"] {
margin: 20px 0 0 0;
padding: 0;
height: 25px;
}
#countryName {
font-size: 1.2em;
font-weight: bold;
color: grey;
position: relative;
bottom: 75px;
left: 380px;
}
#centerBoxButtons {
width: 250px;
/*border: solid 2px blue; /*--------------delete later*/
margin-left: 175px;
}
.button {
font-weight: bold;
background-color: rgb(240,240,240);
border: solid 1px rgb(150,150,150);
padding: 6px;
font-size: 0.78em;
display: inline;
margin-left: 15px;
border-radius: 4px;
}
.button:active {
position: relative;
top: 1px;
left: 1px;
}
<!doctype html>
<html>
<head>
<title>Google</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta charset="utf-8" />
</head>
<body>
<div id="pageWrapper">
<div id="topBar">
<ul>
<li>+Tomasz</li>
<li>Gmail</li>
<li>Grafika</li>
</ul>
</div> <!-- end of topBar -->
<div id="middleBar">
<div id="centerBox">
<img id="logoImage" alt="Google Logo" src="logo.png" width="269" height="95" />
<input type="text" size="80" />
<span id="countryName">Polska</span>
<div id="centerBoxButtons">
<div class="button">Szukaj w Google</div>
<div class="button">Szczęśliwy traf</div>
</div>
</div> <!-- end of centerBox -->
</div> <!-- end of middleBar -->
<div id="bottomBar">
</div> <!-- end of bottomBar -->
</div> <!-- end of pageWrapper -->
</body>
</html>
What you see is the padding of the <ul> in the topbar. This happens because many HTML elements have their own default style. Also, these defaults are browser specific, which doesn't really help you if you want to create a layout that is pixel-precise against multiple browsers.
What I mostly to is simply reset all paddings and margins of all elements:
* {
margin: 0;
padding: 0;
}
Some will say that the above technique leads to heavier load of the rendering engine but I never had any issue by doing this. Anyway, you can find a lot of 'CSS reset' scripts that are more selective and are faster. Search other questions on SO tagged css-reset and also check this Q/A
Some popular CSS-reset sources:
http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/
Related
I've asked this once here: Content DIV minheight not working in IE 11 and footer is too low
but the solution is not ok because the left-side and right-side content cannot set width 70% : 30%
I use CSS minheight on div-content but it's not working in Internet Explorer version 11 (but other browser is fine.) IE-11 can set height but it will not auto-vertical stretch when the div has excess text. So I need to use min-height.
Screenshots:
IE: https://s21.postimg.org/p31mpj4zb/11111.png
Chrome: https://s18.postimg.org/mjdo260ft/22222.png
html,
body {
margin: 0px;
padding: 0px;
}
body {
background: #cceeff;
font-family: "verdana";
}
#wrapper {
margin: auto;
padding: 0px;
width: 75%;
}
.toptext {
margin-top: 1vh;
margin-bottom: 1vh;
}
.toptext span a {
padding: 3px;
color: #000;
text-decoration: none;
background: lightblue;
}
#header {
margin: 0px;
padding: 0px;
width: 100%;
height: 18vh;
float: left;
background: #99d6ff;
}
#header h1 {
margin: 0px;
padding: 0px;
/*border-bottom:1px solid #eee;*/
font-size: 20px;
padding-bottom: 10px;
}
#nav {
margin: 0px;
padding: 0px;
width: 100%;
float: left;
background: #80ffe5;
}
#nav ol {
list-style: none;
margin: 0px;
padding: 0px;
}
#nav ol li {
display: block;
padding: 6px 10px;
float: left;
position: relative;
}
#nav ol a {
display: block;
padding: 5px 10px;
color: #000;
text-decoration: none;
}
#nav ol a:hover {
background: #f2f2f2;
}
#nav ol ol {
position: absolute;
top: 35px;
left: 0px;
display: none;
background: #80ffe5;
}
#nav ol ol li {
border-bottom: 1px;
}
#content {
float: left;
margin-top: 2vh;
padding: 0px;
width: 100%;
display: flex;
min-height: 70vh;
word-break: break-all;
}
#right-side {
float: left;
margin-left: 2vh;
width: 30%;
border: solid 1px grey;
background: white;
}
#right-side ol {
list-style: none;
}
#left-side {
float: left;
width: 70%;
border: solid 1px grey;
background: white;
}
#footer {
float: left;
margin-top: 2vh;
padding: 2vh;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #99d6ff;
}
.searchbox {
background: #9999ff;
margin: 10px;
margin-top: 20px;
padding: 5px;
border-radius: 5px;
}
.search-bar {
height: 29px;
background-color: #e1e1e1;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
width: 230;
position: relative;
}
.search-bar .searchbutton {
position: absolute;
top: 23%;
right: 5px;
}
.sfield {
float: left;
margin: 5px 0 0 8px;
font: 8pt Verdana;
color: #888;
height: 20px;
line-height: 18px;
padding: 0;
background: transparent;
border: 0;
max-width: 100%px;
}
<head>
<meta charset="utf-8" />
<title>Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><p>Header</p></h1>
</div>
<div id="nav">
<ol>
<li>Home
</li>
<li>About us
<ol>
<li>ประวัติ
</li>
<li>xxxxx
</li>
<li>xxxxxx
</li>
</ol>
</li>
<li>Product
<ol>
<li>xxxxx
</li>
<li>xxxxx
</li>
<li>xxxxxx
</li>
</ol>
</li>
<li>Contact us
</li>
</ol>
</div>
<div id="content">
<div id="left-side">
aaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div id="right-side">
<div class="searchbox">
<?php echo form_open( 'search');?>
<h4 style="text-align:center;"> ค้นหาสินค้า </h4>
<div class="search-bar">
<input type="text" size="20" class="sfield" name="searchterm" value="Search...">
<input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
</div>
<?php echo form_close();?>
</div>
</div>
<div class="fa fa-search"></div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
OK It's something like bug.
so I add min-height to left-side and right-side too.(child div) and it work -_-"
I'm trying to control the "show more" link and cannot, I've used link controls before, but this one is puzzling me. The link I've tried to control so far is #r_a_show_more_link ("show more" link on right under recent activity) it's code is at the bottom of the CSS, but I can't get it to work. Maybe I'm doing something wrong with the CSS selectors? Please look at the code and run the snippet!
Thanks a lot!
/* Main Nav */
#home_icon {
height: 40px;
float: left;
padding: 10px;
position: relative;
top: 95px;
}
li {
display: inline-block;
}
ul {
float: right;
position: relative;
top: 50px;
margin: 0px;
padding: 0px;
}
li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
margin: 3px;
margin-top: 0px;
border: 2px solid #000;
border-radius: 5px;
}
nav li a:visited {
color: black;
}
nav li a:hover {
color: gray;
border-color: gray;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 150px;
background-color: rgba(255,255,255,0.9);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
float: right;
margin: 15px;
display: inline-block;
background: #2b303b;
border: none;
color: #63717f;
border-radius: 5px;
}
#logo {
float: left;
height: 150px;
display: inline-block;
}
body {
background-image: url("../pictures/test.jpg");
background-color: blue;
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.9);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
color: white;
font-size: 130px;
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
padding: 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link :visited {
color: black;
}
#r_a_show_more_link :hover {
color: gray;
border-color: gray;
}
#r_a_show_more_link :active {
color: black;
border-color: black;
}
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<a href="">
<img id="logo" src="pictures/jeff_logo.png" alt="Logo">
</a>
<img src="pictures/home_icon.png" id="home_icon"/>
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
<ul>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h1 id="welcome">Welcome to </br> my website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
You need to remove the space before :visited in the CSS:
#r_a_show_more_link:visited {
color: black;
}
you have an extra space before your :hover,:visited and:active, so remove it, like this:
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
border-color: gray;
}
#r_a_show_more_link:active {
color: black;
border-color: black;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm working on my website and the heading (h1) text is taking up two lines, which it has space for but shouldn't as it has plenty of space to just take up one line. I want it to only span one line, and I'm wondering why it isn't doing that? Thanks!
The text I'm taking about is the <h1>, id="welcome", content Welcome to my website!.
P.S. if your going to run the code snippet make sure to do it full screen to see the effect.
Here's my Code:
li {
display: inline-block;
}
ul {
float: right;
margin: 0px;
padding: 0px;
position: relative;
top: -45px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
margin: 3px;
margin-top: 0px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
float: right;
}
#logo {
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background: red;
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
border: 1px solid #999;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 10px;
margin-top: 20px;
margin-bottom: 130px;
padding: 0px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h1 id="welcome">Welcome to my Website!</h1>
<p id="space_filler"></p>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
It's being caused by the floats on your search-box and on your ul menu. If you're going to use floats you should clear them, although in general, floating things just causes more problems than it fixes.
Add a clear-fix for your header:
header::after {
clear: both;
content: '';
display: table;
}
CodePen
Try using "display: inline-block;" at the end of your 'welcome' CSS.
#welcome {
border: 1px solid #999;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 10px;
margin-top: 20px;
margin-bottom: 130px;
padding: 0px;
display: inline-block;
}
You can use padding instead of margin.
here is the code
#welcome {
border: 1px solid #999;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
Below code after padding are css3 that helps in cross browser compatibility
I dont want to be able to scroll my page from left to right. I want my page to look like what it looks like when scrolled completely to the left. I have tried making the body width 100% but i am not not sure that is what i am supposed to do.
<!doctype html>
<html>
<head>
<title>Noam's BBC</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body{
margin: 0;
background-color: white;
font-family: Arial,Helvetica,freesans,sans-serif;
overflow: scroll;
width: 1400px;
}
#topbar {
background-color:#FFFFFF;
width: 100%;
height: 40px;
color: black;
border-bottom: 1px solid #CCCCCC;
}
.fixedwidth {
width: 100%;
margin:0 auto;
}
#logodiv img {
width: 5.1875em;
height: 1.4375em;
}
#logodiv {
padding-top: 8.5px;
padding-left: 80px;
float: left;
border-right: 1px solid #CCCCCC;
padding-right: 10px;
height: 31px;
}
#signindiv img {
width: 1.46470588em;
height: 1.2075em;
position: relative;
top: 2px;
}
#signindiv {
font-weight: bold;
font-size: 0.9em;
padding: 10px 0 10px 20px;
float: left;
width: 150px;
border-right: 1px solid #CCCCCC;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
margin-top: 0;
padding: 0;
}
#topmenudiv li {
list-style: none;
font-weight: bold;
font-size: 0.9em;
padding: 14px 20px 10px 20px;
height: 100%;
border-right: 1px solid #CCCCCC;
float: left;
}
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
#searchdiv input {
height: 24px;
position: relative;
border: none;
width: 100%;
background-color: #e4e4e4;
font-family: Arial,Helvetica,freesans,sans-serif;
font-weight: bold;
font-size: 0.9em;
padding-left:10px;
background-image: url("images/magnify.png");
background-repeat: no-repeat;
background-position: right center;
background-size: 30px 24px;
}
.break {
clear: both;
}
#newsbar {
background-color:#BB1919;
width: 100%;
height: 95px;
color: black;
}
#newsbar p{
padding-left: 80px !important;
margin: 0;
padding: 5px 0 0 6px;
color: white;
}
#newsheader{
font-size: 2.7em;
}
#topicmenu {
}
#topicmenu ul {
background-color: #A91717;
padding: 5px 0 0 70px;
margin-top: 7px;
height: 29px;
}
#topicmenu li {
list-style: none;
float: left;
background-color: none;
border-right: 1px solid #BB4545;
padding: 0 10px 0 10px;
margin-top: 4px;
color: white;
}
#white{
border-bottom: 4px solid white;
border-right: none !important;
margin-top: 7px !important;
}
#nextToWhite{
border-left: 1px solid #BB4545;
}
#moveUp{
margin-top: -1px;
margin-bottom: 1px;
}
#locationbar ul{
background-color: none;
height: 35px;
width: 911px;
padding: 7px 81px 0 75px;
margin: 5px 136px 0 0px;
}
#locationbar li{
list-style: none;
float: left;
padding: 0 12px 0 12px;
font-family: inherit;
border-right: 1px solid #DCDCDC;
font-size: 0.9em;
}
#selectedlocation{
font-weight: bold;
font-size: 1.1em !important;
border-right: none !important;
margin-top: -2px;
border-bottom: 4px solid #BB1919;
padding-left: 8px !important;
}
#nextToUkLocation{
border-left: 1px solid #DCDCDC;
}
#primarycolumn{
background-color: cornflowerblue;
width: 100%;
padding-left: 80px;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png" />
</div>
<div id="signindiv">
<img src="images/signin.png" /> Sign In
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>Shop</li>
<li>Earth</li>
<li>Travel</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="search"/>
</div>
</div>
</div>
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth">
<p id="newsheader">NEWS</p>
<div class="break"></div>
<div id="topicmenu">
<ul>
<li>Home</li>
<li>Video</li>
<li>World</li>
<li>US & Canada</li>
<li id="white">
<div id="moveUp">UK</div></li>
<li id="nextToWhite">Business</li>
<li>Tech</li>
<li>Science</li>
<li>Magazine</li>
<li>Entertainment & Arts</li>
<li>Health</li>
<li style="border-right:none">More</li>
</ul>
</div>
</div>
</div>
<div class="break"></div>
<div id="locationbar">
<div class="fixedwidth">
<ul>
<li id="selectedlocation">UK</li>
<li id="nextToUkLocation">England</li>
<li>N. Ireland</li>
<li>Scotland</li>
<li>Wales</li>
<li style="border-right: none">Politics</li>
</ul>
</div>
</div>
<div class="break"></div>
<div id="primarycolumn">
<div class="fixedwidth">
<h2>UK to accept 'thousands' more refugees</h2>
<img src="images/headlineimage.jpg" />
</div>
</div>
</div>
</div>
</body>
</html>
Although your styling has many fundamental flaws, if all you're trying to achieve is to prevent horizontal scrolling, then this should suffice:-
Replace
overflow: scroll;
in -> body {} to
overflow-y: scroll;
overflow-x: hidden;
So, your body styling changes to
body{
margin: 0;
background-color: white;
font-family: Arial,Helvetica,freesans,sans-serif;
overflow-y: scroll;
overflow-x: hidden;
width: 1400px;
}
try to make the container width:100% . then give the width and position value of the elements inside the container relative to the container in percent . hope it will work
So I'm building a site and I want to have little tabs on the right hand side that will change the content on the main page without having to refresh the entire page, like an embedded page within the main page. I am working from a template (HTML and CS) and trying to modify the existing content. In the code you can notice that there is an ordered list which defines the buttons (Like Homepage and etc) and when hovered over they change background and look fancy, but they don't actually do anything. I've been reading up about how to make them change the page (by following a link) but I am confused and can't figure out how to do it. I was hoping you guys could help me. I'm very noobish to HTML and CSS and just trying to put something together and learn from example while also building a private site. Thank you for your help in advance!
INDEX.HTML:
<!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 name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>/rootbox</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1>Rootbox</h1>
</div>
<div id="menu">
<ul>
<li class="current_page_item">Homepage</li>
<li>Distros</li>
<li>Wifi</li>
<li>Tools</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="banner">
<div class="content"><img src="images/title.png" width="1000" height="300" alt="" /></div>
</div>
</div>
<!-- end #header -->
<div id="page">
<div id="content">
<div class="post">
<h2 class="title">Welcome to /rootbox</h2>
<div style="clear: both;"> </div>
<div class="entry">
<p>/rootbox is a collection of Security oriented Tools, Tutorials, Resources and Websites.This site offers a collection of well documented and freely available tools and resources for both a begginer pen-tester and the professional white-hat. Everything on this site is simply a collection, thus no original content is posted. All links have been tested and properly checked for security. All software published here is free and available directly from the author's site. Tutorials are often updated and deprecated software is removed.
</br></br>
This site is hosted on Panckake.io - A web framework which allows for publishing websites directly from Dropbox. For more information go here.If you need any additional help, or have any feedback or suggestions, send an email to rushone2010#gmail.com.
</p>
</div>
</div>
</div>
</div>
<!-- end #content -->
</div>
<div id="footer">
<p>Copyright (c) 2012. All rights reserved. Design by FCT</p>
</div>
<!-- end #footer -->
</body>
</html>
STYLE.CSS
body {
margin: 0;
padding: 0;
background: #050505 url(images/img01.jpg) repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #5B5B5B;
}
h1, h2, h3 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-weight: normal;
font-family: 'Oswald', sans-serif;
font-weight: 200;
color: #222222;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 2.8em;
}
h3 {
font-size: 1.6em;
}
p, ul, ol {
margin-top: 0;
line-height: 180%;
}
ul, ol {
}
a {
color: #5E5E5E;
}
a:hover {
}
#wrapper {
background: #FFFFFF url(images/img05.jpg) repeat;
}
.container {
width: 1000px;
margin: 0px auto;
}
/* Header */
#header-wrapper {
overflow: hidden;
}
#header {
width: 1000px;
height: 150px;
margin: 0 auto;
padding: 0px 0px;
}
/* Logo */
#logo {
float: left;
width: 300px;
margin: 0;
padding: 0;
color: #FFFFFF;
}
#logo h1, #logo p {
}
#logo h1 {
line-height: 120px;
letter-spacing: -2px;
font-size: 3.8em;
}
#logo h1 a {
color: #1F1F1F;
text-shadow: 1px 1px 0px rgba(0,0,0,.2);
}
#logo p {
margin: 0;
padding: 0px 0 0 0px;
letter-spacing: -1px;
font: normal 18px Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #8E8E8E;
}
#logo p a {
color: #8E8E8E;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #000000;
}
/* Splash */
#splash {
width: 960px;
height: 300px;
margin: 0px auto;
}
/* Search */
#search {
float: right;
width: 280px;
height: 60px;
padding: 20px 0px 0px 0px;
}
#search form {
height: 41px;
margin: 0;
padding: 10px 0 0 20px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
padding: 6px 5px 2px 5px;
border: 1px solid #E7EBED;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}
#search-submit {
width: 50px;
height: 22px;
border: none;
background: #B9B9B9;
color: #000000;
}
/* Menu */
#menu {
float: right;
width: 500px;
height: 90px;
margin: 0 auto;
padding: 0;
}
#menu ul {
float: right;
margin: 0;
padding: 20px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: right;
}
#menu a {
display: block;
line-height: 100px;
margin-right: 1px;
padding: 0px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px rgba(0,0,0,.2);
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 16px;
font-weight: 300;
color: #1F1F1F;
border: none;
}
#menu a:hover, #menu .current_page_item a {
background: url(images/img01.jpg) repeat;
text-decoration: none;
color: #FFFFFF;
}
#menu .current_page_item a {
}
/* Page */
#page {
width: 1000px;
margin: 0 auto;
padding: 30px 0px;
}
/* Content */
#content {
padding: 0px 0px 0px 0px;
}
.post {
overflow: hidden;
margin-bottom: 40px;
border-bottom: 1px solid #E7EBED;
}
.post .title {
padding: 0px 0px 0px 0px;
letter-spacing: -1px;
}
.post .title a {
border: none;
text-decoration: none;
color: #222222;
}
.post .meta {
margin-bottom: 30px;
padding: 10px 0px 0px 0px;
text-align: left;
font-family: 'Abel', sans-serif;
font-size: 16px;
font-weight: 300;
}
.post .meta .date {
float: left;
}
.post .meta .posted {
float: right;
}
.post .meta a {
}
.post .entry {
padding: 0px 0px 40px 0px;
text-align: justify;
}
.links {
padding-top: 20px;
margin-bottom: 30px;
}
.more {
display: block;
float: left;
width: 88px;
padding: 5px 5px;
margin-right: 10px;
background: #222222;
color: #FFFFFF;
text-align: center;
text-decoration: none;
}
.comments {
display: block;
float: left;
width: 88px;
padding: 5px 5px;
background: #222222;
color: #FFFFFF;
text-align: center;
text-decoration: none;
}
/* Sidebar */
#sidebar {
float: left;
width: 270px;
margin: 0px;
padding: 30px 0px 0px 0px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
}
#sidebar li ul {
margin: 0px 0px;
padding-bottom: 30px;
}
#sidebar li li {
line-height: 40px;
border-bottom: 1px solid #E7EBED;
margin: 0px 0px;
border-left: none;
}
#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar li li a {
padding: 0px 0px 0px 20px;
background: url(images/img04.jpg) no-repeat left 50%;
}
#sidebar h2 {
height: 38px;
padding: 0px 0px 30px 0px;
letter-spacing: -.5px;
font-size: 1.8em;
color: #222222;
}
#sidebar p {
margin: 0 0px;
padding: 0px 30px 20px 30px;
text-align: justify;
}
#sidebar a {
border: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Calendar */
#calendar {
}
#calendar_wrap {
padding: 20px;
}
#calendar table {
width: 100%;
}
#calendar tbody td {
text-align: center;
}
#calendar #next {
text-align: right;
}
/* Three Column Footer Content */
#footer-content {
overflow: hidden;
width: 1000px;
margin: 0px auto;
color: #D6E2F0;
}
#footer-content a {
color: #92A9B6;
}
#footer-bg {
overflow: hidden;
padding: 30px 0px;
background: #E8E8E8;
}
#footer-content h2 {
margin: 0px;
padding: 0px 0px 20px 0px;
letter-spacing: -1px;
font-size: 26px;
color: #262626;
}
#footer-content #fbox1 {
float: left;
width: 300px;
margin-right: 50px;
}
#footer-content #fbox2 {
float: left;
width: 300px;
}
#footer-content #fbox3 {
float: right;
width: 300px;
}
#footer-content a {
}
#column1 {
float: left;
width: 290px;
margin-right: 30px;
}
#column2 {
float: left;
width: 280px;
}
#column3 {
float: right;
width: 260px;
}
/* Footer */
#footer {
height: 140px;
margin: 0 auto;
padding: 50px 0 15px 0;
font-family: 'Abel', sans-serif;
}
#footer p {
margin: 0;
padding-top: 10px;
letter-spacing: 1px;
line-height: normal;
font-size: 14px;
text-transform: uppercase;
text-align: center;
color: #5E5E5E;
}
#footer a {
color: #5E5E5E;
}
#marketing {
overflow: hidden;
margin-bottom: 30px;
padding: 20px 0px 10px 0px;
border-top: 1px solid #E7EBED;
border-bottom: 1px solid #E7EBED;
}
#marketing .text1 {
float: left;
margin: 0px;
padding: 0px;
letter-spacing: -2px;
text-transform: lowercase;
font-size: 34px;
color: #345E9B;
}
#marketing .text2 {
float: right;
}
#marketing .text2 a {
display: block;
width: 252px;
height: 38px;
padding: 15px 0px 0px 0px;
background: url(images/img07.jpg) no-repeat left top;
letter-spacing: -2px;
text-align: center;
text-transform: lowercase;
font-size: 30px;
color: #FFFFFF;
}
#banner {
margin: 0px auto;
width: 1000px;
height: 340px;
background: url(images/img03.png) no-repeat left bottom;
}
#banner .content {
}
.list-style1 {
margin: 0px;
padding: 0px;
list-style: none;
}
.list-style1 a {
color: #7F7F7F;
}
<script type='text/javascript'>
$(document).ready(function() {
$('#menu #tab1').on('mouseover', function () {
$('#page').show();
$('#page2,#page3,#page4,#page5').hide();
});
$('#menu #tab2').on('mouseover', function () {
$('#page2').show();
$('#page,#page3,#page4,#page5').hide();
});
$('#menu #tab3').on('mouseover', function () {
$('#page3').show();
$('#page,#page2,#page4,#page5').hide();
});
$('#menu #tab4').on('mouseover', function () {
$('#page4').show();
$('#page,#page2,#page3,#page5').hide();
});
$('#menu #tab5').on('mouseover', function () {
$('#page5').show();
$('#page,#page2,#page3,#page4').hide();
});
});
</script>
Try this on your script and html..
<div id="wrapper">
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1>Rootbox</h1>
</div>
<div id="menu">
<ul>
<li class="current_page_item" id="tab1">Homepage</li>
<li id="tab2">Distros</li>
<li id="tab3">Wifi</li>
<li id="tab4">Tools</li>
<li id="tab5">Contact</li>
</ul>
</div>
</div>
<div id="banner">
<div class="content"><img src="images/title.png" width="1000" height="300" alt="" /></div>
</div>
</div>
<!-- end #header -->
<div id="page">
<div class="content">
<div class="post">
<h2 class="title">Welcome to /rootbox</h2>
<div style="clear: both;"> </div>
<div class="entry">
<p>/rootbox is a collection of Security oriented Tools, Tutorials, Resources and Websites.This site offers a collection of well documented and freely available tools and resources for both a begginer pen-tester and the professional white-hat. Everything on this site is simply a collection, thus no original content is posted. All links have been tested and properly checked for security. All software published here is free and available directly from the author's site. Tutorials are often updated and deprecated software is removed.
</br></br>
This site is hosted on Panckake.io - A web framework which allows for publishing websites directly from Dropbox. For more information go here.If you need any additional help, or have any feedback or suggestions, send an email to rushone2010#gmail.com.
</p>
</div>
</div>
</div>
</div>
<div id="page2">
<div class="content">
<div class="post">
<h2 class="title">page2</h2>
</div>
</div>
</div>
<div id="page3">
<div class="content">
<div class="post">
<h2 class="title">page3</h2>
</div>
</div>
</div>
<div id="page4">
<div class="content">
<div class="post">
<h2 class="title">page4</h2>
</div>
</div>
</div>
<div id="page5">
<div class="content">
<div class="post">
<h2 class="title">page5</h2>
</div>
</div>
</div>
</div>
Add this to your style..
#page2, #page3, #page4, #page5{
display:none;
width: 1000px;
margin: 0 auto;
padding: 30px 0px;
}
note:change the #content to class type..
If i were you, i would use css property
display: none;
on the elements that you are hiding initially, then use jquery's
.toggle()
method to fade in the elements when the user clicks the link. As in
$('.target').toggle();
Where target is the name of your div id.
IF you are looking for a way to load content on mouseover, here is what I would suggest:
Use a little bit o' jQuery and AJAX:
$("#menu a").on("mouseover",function(){
//Get url of link
var url = $(this).attr('href');
//Perform ajax call to said link
$.ajax(
{
url:"/echo/json",
success:function(data){
//USED FOR MOCKING PURPOSES ONLY
data = exampleContent;
//Append the data to your content wrapper
$("#page #content").html(data[url]);
}
});
});
Here is a working example
This is a fancier version with fading. I call that a splash of awesome