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
Related
I have input label where there might be a lot of text.
how it looks now
I would like to have this 'Type something' in the left up corner. What is more, I would like to have an enter when we are closing to right border (end line). Currently it looks like this:
not making enter when reaching end line
I would like to have enter there.
Could you tell me how can I make these two improvements?
* {
margin: 0;
padding: 0;
}
header {
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img {
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav {
float: right;
color: #000000;
margin-top: 40px;
margin-right: 0px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo {
margin-top: 10px;
float: left;
}
#sign a {
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#profilesign {
margin-top: 400px;
margin-left: 250px;
font: Bold 40px/40px Georgia;
letter-spacing: 0;
color: black;
}
.left {
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 150px 150px;
}
img.left {
padding: 0px 40px 20px 40px;
width: 250px;
height: 250px;
margin-left: 400px;
margin-top: 500px;
}
article input {
width: 300px;
height: 40px;
background: white;
border-radius: 4px;
text-decoration: none;
text-align: center;
font: Bold 25px/12px Arial;
border-radius: 120;
border-style: none;
padding: 6px;
margin-left: 1000px;
margin-top: 500px;
}
article #textSign {
font-size: 50px;
color: black;
text-align: center;
}
#centerText {
text-align: center;
}
#something {
width: 700px;
height: 300px;
text-align: justify;
}
<header>
<div class="row">
<ul id="logo"> <img src="css-images/dingdog-logo.png"> </ul>
<ul class="main-nav">
<li style="padding-left:10px">PROFILE</li>
<li style="padding-left:10px">MAP</li>
<li style="padding-left:10px">YOUR FRIENDS</li>
<li style="padding-left:10px">MAILBOX</li>
<li style="padding-left:10px" id="sign">LOG OUT</li>
</ul>
</div>
<section>
<article>
<p id="profilesign">Feel free to send us a question.</p>
<img class="left" src="css-images/mial.jpg" style='position:absolute;left:0px; top:0px;' />
<div>
<p id="centerText">
<label><input type="email" name="email" placeholder="Email" style='margin-top:250px;position:absolute;left:0px; top:0px;' ></label><br/>
<label><input type="name" name="name" placeholder="Name" style="margin-top: 350px; position:absolute;left:0px; top:0px;"></label><br>
<label><input type="subject" name="subject" placeholder='Subject:' style="margin-top: 450px; position:absolute;left:0px; top:0px;"></label><br></p>
<label><input type="something" name="something" placeholder='Type something' id="something" style="margin-top: 550px; position:absolute;left:0px; top:0px;"></label><br></p>
<label id="submit"><input type="submit" name="send" value="Send" style="margin-top: 900px;position:absolute;left:0px; top:0px; background: #2699FB 0% 0% no-repeat padding-box;"></label>
</div>
</article>
</section>
</header>
<footer>
<img src="social/instagram.png" />
<img src="social/twitter-white-logo.png" />
<img src="social/facebook.png" />
</footer>
I would suggest using a textarea for that. I made some changes to the CSS also
* {
margin: 0;
padding: 0;
}
header {
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img {
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav {
float: right;
color: #000000;
margin-top: 40px;
margin-right: 0px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo {
margin-top: 10px;
float: left;
}
#sign a {
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#profilesign {
margin-top: 400px;
margin-left: 250px;
font: Bold 40px/40px Georgia;
letter-spacing: 0;
color: black;
}
.left {
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 150px 150px;
}
img.left {
padding: 0px 40px 20px 40px;
width: 250px;
height: 250px;
margin-left: 400px;
margin-top: 500px;
}
article input,
article textarea {
width: 300px;
height: 40px;
background: white;
border-radius: 4px;
text-decoration: none;
text-align: center;
font: Bold 25px/12px Arial;
border-radius: 120;
border-style: none;
padding: 6px;
margin-left: 1000px;
margin-top: 500px;
}
article #textSign {
font-size: 50px;
color: black;
text-align: center;
}
#centerText {
text-align: center;
}
#something {
width: 300px;
height: 150px;
text-align: justify;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="css-images/style-contact.css">
</head>
<body>
<header>
<div class="row">
<ul id="logo"> <img src="css-images/dingdog-logo.png"> </ul>
<ul class="main-nav">
<li style="padding-left:10px">PROFILE</li>
<li style="padding-left:10px">MAP</li>
<li style="padding-left:10px">YOUR FRIENDS</li>
<li style="padding-left:10px">MAILBOX</li>
<li style="padding-left:10px" id="sign">LOG OUT</li>
</ul>
</div>
<section>
<article>
<p id="profilesign">Feel free to send us a question.</p>
<img class="left" src="css-images/mial.jpg" style='position:absolute;left:0px; top:0px;' />
<div>
<p id="centerText">
<label><input type="email" name="email" placeholder="Email" style='margin-top:250px;position:absolute;left:0px; top:0px;' ></label><br/>
<label><input type="name" name="name" placeholder="Name" style="margin-top: 350px; position:absolute;left:0px; top:0px;"></label><br>
<label><input type="subject" name="subject" placeholder='Subject:' style="margin-top: 450px; position:absolute;left:0px; top:0px;"></label><br></p>
<label><textarea name="something" placeholder='Type something' id="something" cols="50" rows="15" style="margin-top: 550px; position:absolute;left:0px; top:0px;"></textarea></label><br>
<label id="submit"><input type="submit" name="send" value="Send" style="margin-top: 900px;position:absolute;left:0px; top:0px; background: #2699FB 0% 0% no-repeat padding-box;"></label>
</div>
</article>
</section>
</header>
<footer>
<img src="social/instagram.png" />
<img src="social/twitter-white-logo.png" />
<img src="social/facebook.png" />
</footer>
</body>
</html>
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;
}
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/
I want to have a logo inside of my website with a hyperlink linked to youtube inside of it I did this for more website's I build earlier but somehow this doesn't work in this website maybe it has something to do with layers?
Note: I'll just send my whole website, it isn't too big and I don't mind copying because I'm a student and do this to educate :)
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jquery-easing.js"></script>
<script type="text/javascript" src="java.js"></script>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<title>Test Website</title>
<meta name="" content="">
<script type="text/javascript">
function Slider(){
$(".slider #1").show("fade",500);
$(".slider #1").delay(5500).hide("slide",{direction: 'left'},500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$(".slider #"+count).show("slide",{direction: 'right'},1000);
$(".slider #"+count).delay(5500).hide("slide", {direction: 'left'},500);
if(count == sc){
count = 1;
}else{
count=count + 1;
}
},7000);
};
$( document ).ready(function() {
$('#menubar, #leftmenu, #rightmenu').on('click', 'a', function(e) {
e.preventDefault(); // prevents default scrolling
var y = $(this.hash).offset().top; // grabs the #id element offset location
$('html,body').animate({scrollTop: y-150},750); // animate the scroll
});
});
</script>
</head>
<body onload="Slider();">
<header>
<div id="title">
<h1 class="headertext">Test Website</h1>
</div>
<div id="menubar">
<ul>
<li>slideshow</li>
<li>naturepictures</li>
<li>homepage</li>
<li>homepage</li>
<li>contact</li>
</ul>
</div>
</header>
<div class="hide"></div>
<div id="container">
<div id="rightmenu">
<ul>
<li>slideshow</li>
<li>naturepictures</li>
<li>homepage</li>
<li>homepage</li>
<li>contact</li>
<div id="youtubelogo">
<a href="http://www.youtube.com" target="_blank">
<img src="images/youtubelogo.gif" alt="" width="90" height="50" align="middle">
</a>
</div>
</ul>
<div id="righttriangle1"></div>
<div id="righttriangle2"></div>
<div id="righttriangle3"></div>
<div id="righttriangle4"></div>
<div id="righttriangle5"></div>
</div>
<div id="leftmenu">
<ul>
<li>slideshow</li>
<li>naturepictures</li>
<li>homepage</li>
<li>homepage</li>
<li>contact</li>
</ul>
<div id="lefttriangle"></div>
</div>
<div id="content">
<h1>Contentpage</h1><br>
Picture slideshow
<br>
<br>
<div class="slider">
<img id="1" src="images/car1.jpg" border="0" alt="car1"/>
<img id="2" src="images/car2.jpg" border="0" alt="car2"/>
<img id="3" src="images/car3.jpg" border="0" alt="car3"/>
<img id="4" src="images/car4.jpg" border="0" alt="car4"/>
<img id="5" src="images/car5.jpg" border="0" alt="car5"/>
</div><!--slider end-->
<div class="shadow"></div>
<div id="naturepictures">
<h1>Pictures</h1>
<br>
<img style="width: 800px; height: 600px; margin-left: -310px;" src="images/nature1.gif"/>
</div><!--hello end-->
</div><!--content div-->
</div>
</body>
</html>
CSS code:
*{
margin: 0 auto 0 auto;
text-align: left;
color: #ffffff;
}
body{
margin: 0;
text-align: left;
font-size: 13px;
font-family: arial, helvetica, sens-serif;
color: #ffffff;
width: 1200px;
height: auto;
background: #fdf7e3;
}
header {
position: fixed;
width: 100%;
top: 0;
background: rgba(0,0,0,0.8);
z-index: 10;
}
h1{
color: black;
text-align: center;
}
.hide
{
position: fixed;
width: 100%;
top: 0;
background: rgba(255,255,255,1);
z-index:5;
height: 123px;
}
.headertext{
margin-top: 15px;
text-align: center;
color: white;
}
#title{
font-size: 20px;
margin: -10px 0 30px 0;
width: 100%;
height: 70px;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}
#menubar{
margin-top: 10px;
float: left;
clear: both;
width: 100%;
height: 20px;
list-style: none;
border-bottom: 2px solid #010000;
}
#menubar ul{
list-style: none;
margin-top: -20px;
text-align: center;
}
#menubar ul li{
list-style: none;
display: inline;
padding-right: 80px;
}
#menubar ul li a{
color: #ffffff;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
#menubar ul li a:hover{
border-bottom: 2px solid #ffffff;
}
#container{
width: 1200px;
height: 1400px;
}
#rightmenu{
position: fixed;
margin-top: 23px;
margin-left: 1280px;
padding-top: 20px;
float: left;
width: 160px;
height: 530px;
list-style: none;
background: rgba(0,0,0,0.8);
color: #ffffff;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#rightmenu ul li{
display: block;
padding-bottom: 50px;
}
#rightmenu ul li a{
font-weight: bold;
text-decoration: none;
color: #ffffff;
font-size: 15px;
text-align: center;
margin-left: -15px;
}
#rightmenu ul li a:hover{
border-bottom: 2px solid #ffffff;
transition: opacity .5s ease-in;
opacity: 1;
}
#righttriangle1 {
width: 0;
height: 0;
border-right: 25px solid rgba(0,0,0,0.8);
border-top: 34px solid transparent;
border-bottom: 34px solid transparent;
margin-top: -410px;
margin-right: 160px;
}
#righttriangle2 {
width: 0;
height: 0;
border-right: 25px solid rgba(0,0,0,0.8);
border-top: 34px solid transparent;
border-bottom: 34px solid transparent;
margin-right: 160px;
}
#righttriangle3 {
width: 0;
height: 0;
border-right: 25px solid rgba(0,0,0,0.8);
border-top: 34px solid transparent;
border-bottom: 34px solid transparent;
margin-right: 160px;
}
#righttriangle4 {
width: 0;
height: 0;
border-right: 25px solid rgba(0,0,0,0.8);
border-top: 34px solid transparent;
border-bottom: 34px solid transparent;
margin-right: 160px;
}
#righttriangle5 {
width: 0;
height: 0;
border-right: 25px solid rgba(0,0,0,0.8);
border-top: 34px solid transparent;
border-bottom: 34px solid transparent;
margin-right: 160px;
}
#youtubelogo{
}
#leftmenu{
position: fixed;
margin-top: 23px;
margin-left: 50px;
padding-top: 20px;
float: left;
width: 160px;
height: 450px;
list-style: none;
background: rgba(0,0,0,0.8);
color: #ffffff;
border-left: 2px solid #010000;
border-right: 2px solid #010000;
}
#leftmenu ul li{
display: block;
padding-bottom: 50px;
}
#leftmenu ul li a{
font-weight: bold;
text-decoration: none;
color: #ffffff;
font-size: 15px;
margin-left: -15px;
}
#leftmenu ul li a:hover{
border-bottom: 2px solid #ffffff;
transition: opacity .5s ease-in;
opacity: 1;
}
#lefttriangle{
margin-top: 112px;
margin-left: -1px;
width: 0px;
height: 0;
border-top: 80px solid rgba(0,0,0,0.8);
border-left: 82px solid transparent;
border-right: 82px solid transparent;
}
#content{
margin-top: 100px;
margin-left: 100px;
width: 1000px;
padding-top: 50px;
padding-left: 160px;
color: #000000;
font-weight: bold;
text-align: center;
font-size: 15px;
margin-left: 80px;
}
#naturepictures{
color: black;
top: 1200px;
width: 80px;
height: 300px;
text-align: center;
margin-left: 440px;
}
.naturepicture{
height: 400px;
width: 600px;
}
.slider{
margin-top: 20px;
width: 600px;
height: 400px;
overflow: hidden;
margin: auto;
border-radius: 10px;
vertical-align: middle;
}
.shadow{
background-image:url(../images/shadow.png);
background-repeat: no-repeat;
background-position: top;
width: 850px;
height: 144px;
vertical-align: middle;
margin-top: -50px;
}
.slider img{
width: 600px;
height: 400px;
display: none;
}
Thanks in advance and I hope you can get a solution fast! (It will probably be something stupidly easy :p)
You can't make a <div> element the direct child of a <ul> element. You'll need to wrap the <div> inside of a <li> element first.
Try this instead
<ul>
<li>slideshow</li>
<li>naturepictures</li>
<li>homepage</li>
<li>homepage</li>
<li>contact</li>
<li>
<div id="youtubelogo">
<a href="http://www.youtube.com" target="_blank">
<img src="images/youtubelogo.gif" alt="" width="90" height="50" align="middle" />
</a>
</div>
</li>
</ul>
Can you uopload a screenshot?
Safari, Firefox, Chrome and IE approves your code.
Here's a Screenshot.
It is working fine after updating.If you logo related problem then copy and paste the below code instead the previous code!
<div id="youtubelogo">
<a href="http://www.youtube.com" target="_blank">
<img src="images/youtubelogo.gif" alt="" width="90" height="50" align="middle">
</a>
</div>
check your image format from the images folder like .gif,.png etc