I am using visual studio 2013
I am trying to make a website divided like this
this is my Html code;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>My Website</title>
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id ="wrapper">
<div id =" banner">
</div>
<div id="navigation">
</div>
<div id="content">
</div>
<div id ="sidebar">
</div>
<div id=" footer">
<p> AlL rights reserved.</p>
</div>
</div>
</form>
</body>
</html>
and this is th css code
body
{
font-family:'Calibri',Verdana , sans-serif;
background-color: #e9e9e9;
}
#wrapper
{
width: 1080px;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
background-color: #fff;
}
#banner
{
height:200px;
border: 3px solid #E3E3E3;
}
#navigation
{
height: 60px;
border: 3px solid #e3e3e3;
margin-top: 20px;
}
#content
{
float:left;
width: 750px;
margin: 20px 0 20px 0;
padding : 10px;
border: 3px solid #e3e3e3;
}
#sidebar
{
float:right;
width: 250px;
height: 400px;
margin: 20px 10px 20px 10px;
border: 3px solid #e3e3e3;
}
#footer
{
clear:both;
width:auto;
height:40px;
margin-top:20px;
}
the problem that it apear like this:
can any one help ? I dont know where is the problem
Demo Fiddle
Nice and simple
Add overflow:hidden; to #wrapper, this wil stop your floated elements from extending beyond the underlying parent without forcing its expansion.
Update:
If you want to ensure correct flow with your layout, wrap the content and sidebar elements in another div with overflow:hidden set (per jsfiddle link above)
It is happen because you have lost layout. Please read about "HasLayout" on the web to avoid this in future
Add please
CSS
#wrapper {
overflow:hidden
}
Related
I'm following an exercise on Pluralsight, but I'm struggling with a part which appears to work on the video, but doesn't with my code.
I've played around with the CSS and tried it in MS Edge and Google Chrome, but the behaviour is the same, so I must be missing something.
I've added a green border in the #wrapper to highlight the problem. There is still a red border above the "The World" header.
Here is the html5 code (super basic btw!):
body {
font-family: sans-serif;
font-size: 14px;
margin: 0;
background-color: red;
}
label {
font-weight: bold;
display: block;
}
input {
width: 150px;
}
/*css selector*/
input[type=text], input[type=password], textarea {
width: 150px;
}
input[type=submit] {
width: auto;
}
#main {
background-color: #e9e9e9;
margin: 0;
}
#footer {
background-color: #222;
color: #eee;
padding: 8px 5px;
position: fixed;
bottom: 0;
width: 100%;
}
.headshot {
max-width: 50px;
border: 1px solid #222;
padding: 3px;
}
.menu {
font-size: 12px;
}
.menu li {
list-style-type: none;
}
.menu li.activeitem {
font-weight: bold;
}
#sidebar {
background-color: #2a2c36;
color: #eee;
position: fixed;
height: 100%;
width: 250px;
overflow: hidden;
left: 0;
}
#wrapper {
margin-left: 250px;
border: 4px solid green;
}
<!DOCTYPE html>
<html>
<head>
<title>The World</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/site.css" type="text/css" />
</head>
<body>
<div id="sidebar">
<img src="Images/User1.jpg" alt="headshot"
class="headshot" />
<span>Joe Soap</span>
<ul class="menu">
<li class="activeitem">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="wrapper">
<div id="main">
<h2>The World</h2>
<p>This will be a fun website soon.</p>
<form>
<div>
<label>Date</label>
<input />
</div>
<div>
<label>Location:</label>
<input />
</div>
<div>
<input type="submit" value="Add" />
</div>
</form>
</div>
<div id="footer">
© 2015 The World Ltd
</div>
</div>
</body>
</html>
Any insights on how to resolve this problem would be great? Also, while a smaller issue, but is it me or does the main body appears to be 1 or 2 pixels higher than the sidebar?
Thanks
UPDATE-1:
I've resolved the problem but I don't understand why that's solving it.
In the #main definition, if I set the padding to 1px it removes the gap above the 'The World' header. If it is set to 0, it is visible. If it is to 4, it removes it, but I can see the content is being pushed further in.
#main {
background-color: #e9e9e9;
margin: 0;
padding:1px;
}
So can someone explain to me why I have to set this to 1px in order to remove this gap and why is it that when I set to 0, it displays it?
Thanks.
Thierry
Add a CSS rule for <h2> with margin:0 or margin-top:0. This overcomes the default browser settings for the element.
The h2 tag gets the style "-webkit-margin-before: 83em" automatically from the browser. You have to reset it explicitly:
-webkit-margin-before: 0
Hey all and thanks for taking the time to read,
I'm trying to create my online portfilo. I would like the navigation bar to have about a 10% margin from the top of the page. However, when I try a vertical scroll bar is added to the browser. I feel like this is something to do with setting the body, html to 100%. However, I'm not sure why the navigation bar isn't just applying that top margin to the content div its in instead of the whole page. All the other elements in the content div work fine.
-----------------------------------------------------------------------------
Below is my Code.
#charset "utf-8";
/* CSS Document */
body, html{
background-color: #000;
width: 100%;
height: 100%;
margin: 0;
padding:0;
}
#content{
background-color: #FF0004;
margin-left: 25%;
margin-right: 25%;
width: 50%;
height: 100%;
}
#nav_bar{
margin-top: 10%;
background-color:#DCB017;
width:100%;
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
box-shadow: 0px 2px 10px #000;
}
#navigation{
margin-left:5%;
text-align: center;
background-color:#292929;
width:80%;
color: #FFF;
font-family: "BebasNeue", sans-serif;
text-transform:uppercase;
font-size:85%;
}
#navigation a{
border-width:0px;
color: #FFF;
text-decoration:none;
}
#intro{
margin-top: 5%;
font-family: 'Fjalla One', sans-serif;
color: #FFF;
}
.lower{
font-size:240%;
}
.upper{
font-size:300%;
}
#aboutme_tab{
width:100%;
background-color: #149840;
}
h1{
color: #FFF;
bottom:0;
width: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Portfilo</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id = "content">
<div id = "test">
</div>
<div id = "nav_bar">
<div id = "navigation">
<table width="100%" height = "60" border="0">
<tbody>
<tr>
<td width="25%">HOME</td>
<td width="25%">ABOUT</td>
<td width="25%">MY WORK</td>
<td width="25%">CONTACT</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id = "intro">
<span class = "lower"> HI! MY NAMES </span> <span class = "upper"> <b>JAMES HOSKIN</b> </span> <span class = "lower"> AND I'M A <b>SOFTWARE DEVELOPER.</b> </span>
</div>
<h1>ABOUT ME</h1>
</div>
</body>
</html>
This is my first time posting on stackoverflow so sorry if I have posted this incorrectly or unclearly. Please advise me if so. Thanks again for your time.
Nevermind I solved it, I just placed a div with a height of 10% at the top of the page. Thanks anyway.
If you prefer not to add the extra div you could do the following: Remove the margin from the nav_bar and instead add a padding-top of 10% to the #content div, in combination with box-sizing: border-box you will no longer get the scroll bar.
#content{
background-color: #FF0004;
margin-left: 25%;
margin-right: 25%;
width: 50%;
height: 100%;
box-sizing: border-box;
padding-top: 10%;
}
I believe collapsing margins are the reason for the behaviour you're seeing. Essentially, if you have an child element with a top margin within a parent element without a top border or any top padding, the child's margin will be applied to the parent element.
Notice how you don't see any red in the below snippet.
body {
background: #ccc;
padding: 20px;
margin: 0;
}
.parent {
background: red;
}
.child {
background: green;
margin-top: 50px;
}
<html>
<body>
<div class="parent">
<div class="child">
Hello!
</div>
</div>
</body>
</html>
How I'd approach the problem is to remove the top-margin on the navbar completely and add 10% padding-top to the body. You can use box-sizing: border-box to make the height declaration of 100% inclusive of padding:
#charset "utf-8";
/* CSS Document */
body, html{
background-color: #000;
width: 100%;
height: 100%;
margin: 0;
padding:0;
}
body {
padding-top: 10%;
box-sizing: border-box;
}
#content{
background-color: #FF0004;
margin-left: 25%;
margin-right: 25%;
width: 50%;
height: 100%;
}
#nav_bar{
background-color:#DCB017;
width:100%;
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
box-shadow: 0px 2px 10px #000;
}
#navigation{
margin-left:5%;
text-align: center;
background-color:#292929;
width:80%;
color: #FFF;
font-family: "BebasNeue", sans-serif;
text-transform:uppercase;
font-size:85%;
}
#navigation a{
border-width:0px;
color: #FFF;
text-decoration:none;
}
#intro{
margin-top: 5%;
font-family: 'Fjalla One', sans-serif;
color: #FFF;
}
.lower{
font-size:240%;
}
.upper{
font-size:300%;
}
#aboutme_tab{
width:100%;
background-color: #149840;
}
h1{
color: #FFF;
bottom:0;
width: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Portfilo</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id = "content">
<div id = "test">
</div>
<div id = "nav_bar">
<div id = "navigation">
<table width="100%" height = "60" border="0">
<tbody>
<tr>
<td width="25%">HOME</td>
<td width="25%">ABOUT</td>
<td width="25%">MY WORK</td>
<td width="25%">CONTACT</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id = "intro">
<span class = "lower"> HI! MY NAMES </span> <span class = "upper"> <b>JAMES HOSKIN</b> </span> <span class = "lower"> AND I'M A <b>SOFTWARE DEVELOPER.</b> </span>
</div>
<h1>ABOUT ME</h1>
</div>
</body>
</html>
Background: I am creating a chat-room page in html/css. The div rm-container contains an area where messages are displayed(div class rm-messages), an area to input the message, as well as a div which contains all the users currently in the chatroom (rm-users).
Problem: I would like rm-users to be on the top right of rm-container, but I am unable to get it to work. I followed the tutorial on positioning from w3schools and in my css, changing rm-container position to relative, and rm-users position to absolute, yet I am unable to get the desired result. Instead, what I get is rm-users it is below rm-messages, as would be expected if the default position had not been changed. I have attached both the css and html files below.
#import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
body {
background-color: #F0F0E6;
font-family: 'Open Sans Condensed', sans-serif;
margin: 0;
padding: 0
}
.rm-name {
font-size: 20px;
margin-left:auto;
margin-right:auto;
margin-top:15px;
text-align:center;
max-width:100px;
}
.userbox {
border: 1px solid black;
max-width:300px;
padding-bottom:50px;
margin-left:15px;
margin-top:15px;
}
.rm-container {
position:relative;
background-color: white;
border: 1px groove black;
margin-left:auto;
margin-right: auto;
margin-top: 40px;
max-width: 1000px;
padding-bottom: 100px
}
.rm-messages {
position:static;
border: 1px groove black;
margin-top:10px;
max-width: 700px;
margin-left:15px;
height:400px;
}
.rm-users {
position:absolute;
margin-top: 15px;
border: 1px groove black;
margin-right: 15px;
width: 200px;
height: 50px;
overflow-y: scroll;
overflow-x: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>room-name</title>
<link rel="stylesheet" href="../public/css/room.css">
</head>
<body>
<img src="something" class="chat_room_pic">
<div class="rm-userbox">
<img src="something" class="userPic">
<h3 class="userName">Username | more chatrooms</h3>
</div>
<div class="rm-container">
<div id="rm-name"> room-name </div>
<div class="rm-messages">
<ul class="messages">
<li>
<div class="msgbox">
<div class="pic"><img src="something>">Username </div>
<div class="msg"><p>Hello there!</p></div>
</div>
</li>
</ul>
</div>
<div class="rm-users">
<ul class="users">
<li><img src="something">
</div>
</div>
</body>
</html>
Just add top: -70px to .rm-users
.rm-users {
border: 1px groove black;
height: 50px;
margin-right: 15px;
margin-top: 15px;
overflow: scroll;
position: absolute;
top: -70px;
width: 200px;
}
I'm attempting to insert a vertical line into my code that runs along a certain path of text.
My full code thus far is:
<!DOCTYPE HTML>
<html>
<header>
<title> This Website </title>
<link type="text/css" href="stylesheet.css" rel="stylesheet"/>
</header>
<body>
<div>
<section>
<h1> Test</h1>
</section>
<img src="thingvellir.jpg "class="vinstri" height="300" />
<p>
<div class="vert">**Random text that I want my vertical line to follow.**</div>
</p>
<img src="logo-thing.png" class="haegri" height="100" />
</div>
</body>
</html>
And this is my CSS file:
body {
background-color:green;
}
div{
height:800px;
width: 1300px;
border-color:black;
background-color:#e9b96e;
border-width:2px;
border-style: solid;
border-radius:10px;
margin: auto;
text-align: center;
}
h1 {
margin:auto;
font-size: 35px;
}
section
{
width: 400px;
height: 20px;
padding: 20px;
border: none;
margin: auto;
box-shadow:10px 10px 5px #888888;
background-color: white;
border-radius: 30px;
position:relative;
top: 10px;
}
p {
font-family:Verdana;
font-size:14px;
}
.vinstri {
float:left;
margin:3px;
border:solid black;
}
.vert {
border-left: thick solid #ff0000;
}
Now it's this last attribute that should make the vertical line, but what it does instead of trailing the text, is that it makes a vertical line along the WHOLE ORIGINAL div box (and for some reason adds black border around as well as pushing the text down) as displayed here.
Any ideas on how to fix this one? Thanks.
Your DIV rule applies to every DIV, both the one immediately inside BODY and your DIV.vert. So, the first DIV rule in your CSS, applying the full black border, applies to every DIV in your code. I'm assuming you only want this to apply to the top DIV instead, rather than to everything.
So give that top DIV it's own class, and update that first rule to use the class name.
This way, your DIV.vert box, where you want the red left line won't also pick up the additional CSS rules.
Updated HTML:
<!DOCTYPE HTML>
<html>
<header>
<title> This Website </title>
<link type="text/css" href="stylesheet.css" rel="stylesheet"/>
</header>
<body>
<div class="main">
<section>
<h1> Test</h1>
</section>
<div class="vert">
<img src="thingvellir.jpg "class="vinstri" height="300" />
</div>
<p>
<div class="vert">**Random text that I want my vertical line to follow.**</div>
</p>
<img src="logo-thing.png" class="haegri" height="100" />
</div>
</body>
</html>
And your CSS:
body {
background-color:green;
}
div.main{
height:800px;
width: 1300px;
border-color:black;
background-color:#e9b96e;
border-width:2px;
border-style: solid;
border-radius:10px;
margin: auto;
text-align: center;
}
h1 {
margin:auto;
font-size: 35px;
}
section
{
width: 400px;
height: 20px;
padding: 20px;
border: none;
margin: auto;
box-shadow:10px 10px 5px #888888;
background-color: white;
border-radius: 30px;
position:relative;
top: 10px;
}
p {
font-family:Verdana;
font-size:14px;
}
.vinstri {
float:left;
margin:3px;
border:solid black;
}
.vert {
border-left: thick solid #ff0000;
}
I have created this template for an eBay listing. When I open it in any browser I can see the borders perfectly. However when I paste the code into eBays HTML description and preview it, I see nothing. If I add text and images into the code they will show within the confines of the borders but the border will still be invisible.
Any ideas?
#pdcontainer {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
.holder {
margin: 0 auto;
width: 1100px;
}
.body {
border: 5px solid #66CCFF;
float: left;
width: 780px;
height: 2700px;
border-right-width: 2px;
}
.sidebar {
border: 5px solid #66CCFF;
float: left;
width: 215px;
height: 2700px;
border-left-width: 3px;
}
.header {
border: 5px solid #66CCFF;
float: left;
width: 1000px;
height: 132px;
}
<!DOCTYPE html>
<html lang="en">
<div id="pdcontainer">
<head>
</head>
<html>
<body>
<div class="header">
</div>
<div class="holder">
<div class="body">
</div>
<div class="sidebar">
</div>
</div>
</body>
</html>
</body>
Try change names of divs - if ebay use same name, it can replace your CSS.