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.
Related
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 2 years ago.
I am developing a website with the help of HTML and CSS. Here, I have two parts of the page, first one - the menu and second part - rest of content. I am seeing an unwanted space between both parts. I checked the code many times but I could not find any reason for this. I used the developer tools to see what could I do. The margin was 0px. When I reduced the margin to -18 or -19px, then I could see both parts joined.
Also, another problem is there. The paragraph text is going outside the container(as shown in the image).
The code is as below -
body {
margin: 0px;
background-color: #d6d6d6;
color: black;
}
a {
text-decoration: none;
color: black;
}
#top{
width: 100%;
height: 80px;
background-color: white;
position: sticky;
box-shadow: 0 0 5px 0.1px;
}
header img {
padding-left: 20px;
padding-right: 20px;
border-right: 1px solid black;
margin-left: 50px;
float: left;
width: 15%;
height: 80px;
}
nav a {
margin: 81px;
font-size: 40px;
font-family: sans-serif;
color: darkgray;
}
nav {
padding: 20px;
}
#container {
width: 1190px;
background-color: white;
margin: 0 auto;
box-shadow: 0 0 5px 0.1px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home | Day to Dayz Solutions</title>
</head>
<body>
<div id="top">
<header>
<img src="http://placehold.it/400px80">
</header>
<nav>
Home
Our Services
Contact Us
</nav>
</div>
<div id="container">
<article>
<section>
<h1>About Us</h1>
<p>gwserwsethsyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy5454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454544</p>
</section>
</article>
<footer>© <p>2020 | Site Designed and Developed by Praneet Dixit</p></footer>
</div>
</body>
</html>
I know that the contents of the menu could mess up because I am not using flexbox or anything like that. Please ignore that.
The unwanted space you mentioned is coming because of h1 tag you used for about us.
<h1>About Us</h1>
try changing it to:
<span>About Us</span>
and give custom css to it as you like:
span {
padding: 5px;
margin: 5px;
}
For the content to stay within the box apply this property to your p tag
word-break: break-all;
And if you want your boxes to align one after the other, remove margin from your h1 like this:
h1{
margin: 0;
}
There is a margin on <h1> causing the spacing between header and content. Set margin: 0 to h1 will remove the extra spacing. For the second issue, you may use word-break: break-all; to prevent the text-overflow in the container. Please see code snippet for details.
/* Issue 1: extra space between header and content */
h1 {
margin: 0;
}
/* Issue 2: Overflow with long word */
p {
word-break: break-all;
}
body {
margin: 0px;
background-color: #d6d6d6;
color: black;
}
a {
text-decoration: none;
color: black;
}
#top {
width: 100%;
height: 80px;
background-color: white;
position: sticky;
box-shadow: 0 0 5px 0.1px;
}
header img {
padding-left: 20px;
padding-right: 20px;
border-right: 1px solid black;
margin-left: 50px;
float: left;
width: 15%;
height: 80px;
}
nav a {
margin: 81px;
font-size: 40px;
font-family: sans-serif;
color: darkgray;
}
nav {
padding: 20px;
}
#container {
width: 1190px;
background-color: white;
margin: 0 auto;
box-shadow: 0 0 5px 0.1px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home | Day to Dayz Solutions</title>
</head>
<body>
<div id="top">
<header>
<img src="http://placehold.it/400px80">
</header>
<nav>
Home
Our Services
Contact Us
</nav>
</div>
<div id="container">
<article>
<section>
<h1>About Us</h1>
<p>gwserwsethsyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy5454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454544</p>
</section>
</article>
<footer>©
<p>2020 | Site Designed and Developed by Praneet Dixit</p>
</footer>
</div>
</body>
</html>
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
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 want to center the submit button on the last div, but i can´t do it.
I try a lot of things, like margin:auto, align-left and right and others asks you make at this page, but it´s imposible for me.
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<title>Mi Revista</title>
<style>
body {
background: #7f7f7f;
}
#container {
width: 800px;
margin: auto;
position: relative;
}
#header {
background: #5783a0;
height: 75px;
}
#contenido {
padding: 1px;
background-color: white;
}
#left {
float:left;
width: 470px;
background-color: pink;
height: 300px;
}
#bordei {
border-style: solid none;
border-width: 2px;
border-color: black white;
background: #efefef;
margin: 0px 0px 2px 10px;
font-weight: bold;
}
#borded {
border-style: solid none;
border-width: 2px;
border-color: black white;
background: #efefef;
margin: 0px 10px 2px 0px;
font-weight: bold;
}
#derecha {
float:left;
width: 330px;
background-color: yellow;
height: 300px;
}
#footer {
height: 50px;
background-color: aquamarine;
clear:both;
}
div form {
display:block
}
#acept {
margin:auto;
}
</style>
</head>
<body>
<div id="container">
<div id="header"> Mi Revista</div>
<div id="contenido"> texto de arriba</div>
<div id="left">
<div id="bordei"> borde uno</div>
formulario izquierda
</div>
<div id="derecha">
<div id="borded">borde derecha </div>
Formulario derecha
</div>
<div id="footer">
<form id="acept">
<input type="submit" name="submit" value="Aceptar"/>
</form>
</div>
</div>
</body>
</html>
I wait for your awnswer, beacuse I can´t do it of any form.
Thaks
Just give alignment center to footer div
<div id="footer" align="center">
Change your CSS slightly as follows
#acept {
width:20px;
margin:0 auto;
}
The problem was that you wasnt specifying a width for the form and due to that it was taking 100% width.And thus the margin:0 auto doesnt work.
I've done a fiddle.Please check it..
Use the text-align:center in #acept is the simplest way.
You could as well use the <center> tag, but is is deprecated. So the best way would be to change
#acept{
margin:auto;
}
to
#acept{
margin:auto;
text-align:center;
}
you can use :
#acept {
margin-left:40%;
width:10%;
}
JSFIDDLE Link
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
}