So I'm trying to get into html/css again, and having some issues with the border property.
If the border of the div ONE is 1, padding misbehaves in the div TWO. This can be "fixed" by using margins on TWO instead of padding.
If there is no border on ONE, the margins on TWO push ONE down with it. Using padding instead of margins fixes this, however, it does not make sense.
Anyone have any words of wisdom on the use of borders and divs? Pretty confused here.
The code below is for margins, and no border.
HTML Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/tyle.css" />
</head>
<body>
<div class="ONE">
<div class="TWO">This is some text as a test.</div>
</div>
</body>
</html>
CSS style:
body {
background: #e3f1e2;
margin: 0px;
padding: 0px;
font-family: arial;
font-size: 12px;
color: #000000;
}
a:link {text-decoration: none; color: #FFFFFF}
a.menu:link {text-decoration: none; color: #FFFFFF}
a:visited {text-decoration: none; color: #FFFFFF}
div.ONE {
/*border: 1px solid #CCCCCC;*/
background-image: url("../test.jpg");
background-repeat: no-repeat;
text-align: left;
width: 1024px;
height: 800px;
padding: 0px;
margin: 0px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
div.TWO {
margin-top: 80px;
margin-left: 120px;
}
borders are usually are on the outside. You can use box-sizing:border-box; in your css to behave. also see : Placing border inside of div and not on its edge
Related
I am pretty new to this. I am hoping for some help and advise keeping my divs side by side. One is a menu which works fine but now my content is overlapping and I'm not sure what I did. I should make multiple saves. any advice on positioning my divs would be crazy appreciated.
apologies if my formatting of the post is wrong. brain is fried and my website is due for class tomorrow.
body {
background-color: #35455e;
}
h1 {
text-align: center;
font-size: 400%;
color: #ecb3ff;
padding-left: 30px;
}
h2 {
text-align: center;
font-size: 300%;
color: #ecb3ff;
padding-left: 40px;
}
ul {
list-style: none;
overflow: hidden;
list-style: none;
text-align: center;
border-style: hidden;
}
a {
color: white;
text-decoration: none;
font-size: 125%;
padding-left: 12px;
}
a:hover {
color: #fff666;
}
a:active {
color: #9bc1ff;
}
div.header {
background-image: url("https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-
9/22089728_10212094710577763_385045730802353501_n.jpg?
oh=534f6bd3108f6f68f96cf5709e404b9f&oe=5AD4BADA");
background-size: initial;
background-repeat: repeat;
border-radius: 8px;
height: 573px;
width: 449px;
border: 10px;
box-shadow: 10px 10px 5px #333333;
float: left;
position:fixed;}
div.main{
position: relative;
top: 500px;
right: 500px;
}
li {
width: 30%;
}
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Madison Queen's Art Portfolio: Home</title>
<link rel="stylesheet" type="text/css" href="final.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Madison Art Portfolio</h1>
<ul>
<li>Home</li>
<li>Photography</li>
<li>Contact</li>
</ul>
</div><!--closing of header-->
<div class="main">
<h2>Madison Art Portfolio</h2>
</div><!--CLOSING OF MAIN-->
</div><!--CLOSING OF THE CONTAINER-->
</body>
</html>
As you are using position:fixed; in div.header and position:relative; in div.main you can change the stack of them using z-index value in CSS. if you want your header on the front side and main on the back side then add z-index:2 in div.header and z-index:1 in div.main.
it is overlapping because you have specified the fixed position to the header which is placing the header on the fixed place and anything on the page will overlap with the header. you can try position:absolute
Remove all the code from div.main. It's not required. Also remove position: fixed from the div.header block.
I'm having trouble with the text within the button in particular. Whenever I try to apply padding to the top or bottom of the button so the text is centered, bu all it does is move the whole button. I suspect it has a lot to do with my lack of understanding with positioning and display.
<!DOCTYPE html>
<html>
<head>
<title>WhiteGrid</title>
<link type="text.css" rel="stylesheet" href= "stylesheet.css"/>
</head>
<body>
<div>
<div id="header"><img src="title.png"></div>
<div id="navbar">
<div class="button"><p>Home</p></div>
<div class="button"><p>Gallery</p></div>
<div class="button"><p>About</p></div>
<div class="button"><p>Settings</p></div>
</div>
<div id="body"></div>
<div id="footer"><p>Copyright© 2015 Hayden Shaw. All rights reserved.</p></div>
</div>
</body>
</html>
CSS:
body {
background-color: #C6C1C9;
}
#header {
display: block;
background-color: #856799;
height: 60px;
width: 100%;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#header > img {
display: block;
margin: auto;
}
#navbar {
display: block;
background-color: rgba(73,71,74,0.7);
height: 40px;
width: 100%;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#body {
display: block;
width: 100%;
min-height:500px;
}
#footer {
padding-top:24px;
display: block;
background-color: #7D7285;
width: 100%;
height: 60px;
box-shadow: 0px 1px rgba(0,0,0,0.2);
}
#footer > p {
position: relative;
text-shadow: 0px -1px rgba(0,0,0,0.2);
color: #A3A3A3;
font-family: Verdana;
font-size: 10px;
text-align: center;
}
.button{
margin:0px;
text-shadow: 0px -1px rgba(0,0,0,0.2);
font-family: Verdana;
text-align: center;
color: white;
display: inline-block;
height: 40px;
width: 80px;
background-color: rgba(73,71,74,0);
}
.button:hover{
background-color: #353336;
color: #856799;
}
Thanks in advance.
Don't apply padding to the button but to the paragraph you have the text in. If you are having trouble laying out the text, I would suggest using an image of the text which would be easier.
It seems like you are trying to create a menu bar. I wouldn't do it using divs. Using a table or list is much easier.
<table>
<tr>
<td>Home</td>
</tr>
</table>
<ul>
<li>Home</li>
</ul>
This will be much easier to style.
There's no need to use positioning for this. And you shouldn't be using div's to create buttons either, for a number of reasons.
The best thing you could do is use the <button /> element, or use an anchor tag instead:
HTML:
Button
CSS:
.paddedButton
{
padding: 10px;
}
.khaki
{
background-color: khaki;
}
.noUnderline
{
text-decoration: none;
}
.noUnderline:hover
{
text-decoration: underline;
}
Note: I am a beginner. For some reason, my links that were working don't work at all anymore. What am I doing wrong?
Here's the HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="portfoliostyles.css">
<title>Home</title>
</head>
<body>
<div class="header"><img class="hoofd" src="images/leaugeau.png" alt="logo">
<ul>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<img class="line" src="images/line.jpg" alt="lijn" width='95%' height='2px'>
<div class=content>
<img class="image" src="images/thumbnails/watrgatrthumb.jpg" alt="watrgatr" width=400px height=400px>
<img class="image" src="images/thumbnails/typhlotrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
<img class="image" src="images/thumbnails/anneketrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
</div>
</body>
</html>
And here's my CSS:
#charset "UTF-8";
/* CSS Document */
html,body
{
height: 150%;
width: 100%;
margin: 0px 0px 0px 0px;
}
.hoofd
{
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.header
{
height: 216px;
width: 99%;
position: fixed;
background-color: #FFFFFF;
}
.line
{
margin: 0px 0px 15px 0px;
padding-top: 216px;
position:fixed;
}
ul
{
list-style-type:none;
margin-right:5%;
padding:0;
text-align:center;
}
li
{
display:inline;
float:right;
margin-right:2%;
font-size:45px;
line-height: 280px;
}
.content
{
padding: 230px 0 0 1.5%;
}
a
{
font-family: "HelveticaNeue-light";
text-decoration: none;
color: #000000;
}
a:hover
{
font-family: "HelveticaNeue-light";
color: #E8DA62;
}
h1
{
font-family: "HelveticaNeue-thin";
font-size: 24px;
}
p
{
font-family: "HelveticaNeue-thin";
font-size: 12px;
}
edit: Oh, and to clarify: My pages where, indeed, in the root folder, so no more folder-linking necessary.
But it got solved, thanks! Gotta work something out for the fixed line thing though. But it'll work out.
the problem with the CSS code is you are using fixed position on some classes.
would be better if you remove position: fixed; from below these two classes.
For better understanding check the Demo.
.header
{
height: 216px;
width: 99%;
position: fixed; /*Remove this line; so anchor tag could work*/
background-color: #FFFFFF;
}
.line
{
margin: 0px 0px 15px 0px;
padding-top: 216px;
position:fixed;/*Remove this line; so anchor tag could work*/
}
you are overlapping with position:fixed
remove it from
.line
Demo
It's kinda hard to see without an actual example, but it looks like your .line is on top of them. If I'm correct:
Since it's position:fixed, it is being overlayed at the top, then you have given it a padding-top:216px; which is increasing the area it is consuming from the top, likely overlaying itself ontop of your header and navigation menu.
To fix it, you should figure out another way to position .line wherever you are trying to. You likely want top:216:
.line {
margin: 0px 0px 15px 0px;
top: 216px;
position:fixed;
}
In my CSS, I've created a menubar <div> and a header <div>. My intention is to have the menu line flush with the BOTTOM of the header's background image, so I've nested the menu inside the header. Alas, it's not working, and I can't figure out why.
I've created a fiddle, but I can't figure out how to upload the associated image file, so I've attached the header placeholder image. I've also uploaded a Wireframe demonstrating what I'm trying to make happen.
If you're not able to view the fiddle, here's my HTML and CSS:
HTML:
<!DOCTYPE html PUBLIC "-//W3c/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- ------------------------------------------------------------------------>
<head>
<title>Test</title>
<LINK rel="stylesheet" href="t2.css" type="text/css">
</head>
<!-- ------------------------------------------------------------------------>
<body>
<div id="header" >
<div id="menubar">
home | about | contact
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #FFFFFF;
color: #000064;
font-family: "Calibri", sans-serif;
font-size: 12px;
}
h1 {
background-color: #FFFFFF;
color: #000064;
font-family: "Calibri", sans-serif;
font-size: 2em;
}
h2 {
background-color: #FFFFFF;
color: #000064;
font-family: "Calibri", sans-serif;
font-size: 1.5em;
margin-left: 5%;
}
h3 {
background-color: #FFFFFF;
color: #000064;
font-family: "Calibri", sans-serif;
font-size: 1em;
margin-left: 20%;
}
p {
background-color: #FFFFFF;
color: #000064;
font-family: "Calibri", sans-serif
font-size: 12px;
padding: 0px 0px 0px 600px;
margin: 0px:
float: bottom;
}
a {
color: #000064;
text-decoration: none;
font-family: "Calibri", sans-serif;
font-size: 14px;
}
a.visited {
color: #640064;
weight: bold;
text-decoration: none;
}
#header {
height: 120px;
background-color: #ffffff;
background-image: url(headerblock.jpg);
background-repeat: no-repeat;
background-position: top left;
float: bottom;
}
#menubar {
border-width: 1px 0px 1px 0px;
border-color: #000064;
border-style: solid;
font-family: "Calibri", sans-serif;
font-size: 14px;
line-height: 16px;
float: bottom;
padding: 0px 0px 0px 600px;
margin: 0px 0px 0px 0px;
}
#menubar a {
text-decoration: none;
color: #000064;
float: bottom;
}
#menubar a.visited {
text-decoration: bold;
color: #000000;
float: bottom;
}
Anyone have any ideas?
Put the image in a separate div, all inside the header, like so:
<div id="header">
<div id="banner"></div><!--
--><div id="menubar"></div>
</div>
Then use display: inline-block; on #banner and #menubar.
Note the HTML comment after #banner and before #menubar. It's to remove the white space between those elements, you can remove it if you don't care about the blank space. Look at this for more info: Fighting the Space Between Inline Block Elements.
Check this fiddle.
By the way, you should use <ul> and <li> for your navigation.
And use borders on your separators, instead of |. That's for presentation, and presentation should be handled with css, not html.
Your #menubar has a padding 600px left that pushes the div out. Also Float can not be Bottom, It is either Left or Right.
To make it perfect place a position:relative to the header div and position:absolute; bottom:0px; left:0px; to the child div place it exactly
The float parameter accepts left or right. There is no such thing as float: bottom.
But if you add position: relative to the header div. You can position the menu with position: absolute; left: 0; bottom: 0;
Update
You might have to specify a width for the menu bar, te prevent the text from wrapping downwards.
I'm using this code to center/position a fixed width image as my background. I need to add color around the image that fills the margins in the browser window. I've tried background color, border color...
So, the width of the image is 1050px. If the browser window is 1500px I want to make the remaining area black (for instance). How can I do this?
#content {
text-align: left;
width: 1050px;
height: 825px;
margin: 0 auto;
padding: 0px;
background-image: url(file:///X|/CarFingers/tabback1_hor.png);
background-repeat: no-repeat;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333333;
text-align: center;
}
<div id="content">
<body>
</body>
</div>
First: put the div INSIDE your body. Then you can just edit your body background like this:
body{
background-color: black;
}
Your HTML is invalid, you should not have a div tag enclosing the body tag. If you put the div within the body you should be able to simply set the background color of the body.
If you are wanting to know how to color a border in CSS it would be
border: 10x solid #000;
or
border-width: 10px;
border-color: #000;
border-style: solid;
#content {
text-align: left;
width: 1050px;
height: 825px;
margin: 0 auto;
padding: 0px;
background-image: url('file:///X|/CarFingers/tabback1_hor.png');
background-repeat: no-repeat;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333333;
text-align: center;
background-color: #000; /* Add this to your code */
}
In your html you should do something like this:
<body>
<div id="content">
</div>
</body>
You should never enclose the BODY in DIV