quick note: I just started learning HTML yesterday, this is incredibly new to me so don't be too harsh please--that said, if anyone sees any code that could be done in a simpler way or has any random advice outside of what I'm requesting, please don't hesitate to share. I have a feeling this is terribly scripted, this site is more to help me learn html than for actual use, so there are some area's where I was just using trial and error to make certain things work, and as a result you might see unnecessary code lying around. Point that out too if it bugs you!
ANYWAY, on to the point of the post. I want to have div.textbox inside of div.contentbg with margin-top: 15px. When I try this, however, it applies the margin to div.contentbg instead of div.textbox... it's probably something really stupid. Any help? Thanks in advance! :D
Here's the site: http://jsfiddle.net/gbk8zhwv/1/embedded/result/
Here's the code:
<html> <title>JBROblivion</title> <head> <style> * {
margin: 0;
padding: 0;
}
body {
background-color: black;
margin: 0px;
padding: 0px !important;
height: 100%;
}
a {
margin: 0;
padding: 0;
}
img {
display: block;
margin: 0;
padding: 0;
}
div.contentbg {
background-color: #660000;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
div.textbox {
width: 90%;
margin: 0px auto;
}
div.lrmipsm {
width: 500px;
}
#nav {
width: 100%;
float: left;
margin: 0;
padding: 0;
background-color: #5C0000;
border-bottom: 2px solid #853333;
}
#nav ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 1000px;
}
#nav li {
float: left;
}
#nav li a:link,
a:visited {
display: block;
padding: 15px;
width: 170px;
text-decoration: none;
font-weight: bold;
color: #000000;
background-color: #5C0000;
text-align: center;
text-transform: uppercase;
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
}
#nav li a:hover,
a:active {
background-color: #520000;
}
h1.centre {
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
text-align: center;
text-transform: uppercase;
}
p.introblock {
font-family: "Century Gothic", Arial, Helvetica, sans-serif;
}
</style> </head>
<body>
<img src="http://yt3.ggpht.com/-HKi7fjQseQ0/VJzF49SbsxI/AAAAAAAAAJI/zbpOKJ0Uy0E/w2120-fcrop64=1,00005a57ffffa5a8-nd/Channel%2BArt%2BMask.jpg" alt="Banner" width="100%">
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Milestones</li>
<li>Shop</li>
<li>Youtube </li>
</ul>
</div>
<div class="contentbg">
<div class="textbox">
<h1 class="centre">Intro</h1>
<br>
<div class="lrmipsm">
<p class="introblock">Lorem ipsum... sample text.
</p>
</div>
</div>
</div>
</body>
The reason it does not work is because contentbg does not actually have any of its own content. Notice in the example how it works when you run it because there is content in the first div. If you remove "This is some content" it will not appear to work because there is no content to workout where to begin marginalizing (for lack of a better word) from.
Example
div {
background-color: yellow;
}
div.ex {
background-color:red;
margin-top: 40px;
}
<div>This is some content
<div class="ex">This is some content on the inner div.</div>
</div>
In the case you have a div like yours that is empty I would suggest using the padding property instead. This will leave the divs where they are and instead produce some padding around the content of the div you require padding on.
Related
I am relatively new to HTML and CSS and am working on recreating websites.
My output looks like this
My (sloppy) code is here:
Both the CSS and HTML
http://pastebin.com/4EVBj5zK
I would like to know how to properly align my text to the right of the div.
Make the text container have absolute positioning, and then position it to the very top and right of its parent.
You also need to make sure the parent element is relatively positioned.
head{font-family: Verdana, Geneva, sans-serif;
}
body{background-color: #C0C0C0;
}
p{font-family: "Courier New", Courier, monospace;
}
.borderlist{
list-style-position:inside;
list-style-type:none;
}
.header{
font-family: Verdana, Geneva, sans-serif;
font-size: 50px;
float: left-side;
padding-top: 20px;
padding-left: 50px;
}
a:link, a:visited, a:active{
text-decoration: none;
color: #292421;
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
display: inline-block;
border : 4px solid orange;
width: 275px;
padding: 30px;
background-color: #D3D3D3;
}
a:hover{
text-decoration: none;
color: #292421;
font-family: Verdana, Geneva, sans-serif;
display: inline-block;
border : 4px solid #ee7600;
padding: 30px;
background-color: #E8E8EE;
}
.div_top{
background-color: #E18A07;
width: 700px;
height: 300px;
padding-left: 50px;
padding-top: 75px;
margin-left: 75px;
float:left;
position:relative;
}
.div_top_text{
width: 75px;
top:0px;
right:0px;
position:absolute;
padding-right: 20px;
vertical-align:top;
}
.br_bigger{
margin: 100px;
padding: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style_test.css">
<title>Freepbx Support</title>
</head>
<body>
<header class="header"><b>FreePBX</b> Support</header>
<br>
<div class="div_top">
<li class="borderlist">FreePBX initial setup</li>
<br>
<br>
<br>
<li class="borderlist">FreePBX Advanced setup</li>
<div class="div_top_text">FreePBX tech was created for beginners or experts of the open source pbx system. Read our documents or watch our help videos to learn how to use the latest version of FreePBX</div>
</div>
</body>
</html>
Try this, this solution would take care of the browser being resized.
* Note: I noticed you are using li tags and I did not see any ul tag, generally li are using along with ul
.list-boxer{
float: left;
}
.list{
width: 275px;
list-style: none;
margin: 0px 0px;
padding: 0px 0px;
}
.list li{
width: inherit;
font-family: Verdana, Geneva, sans-serif;
display: inline-block;
padding: 0px;
}
.list li a{
display: block;
padding: 30px 30px;
margin: 25px 0px;
border : 4px solid #ee7600;
}
.div_top_text_boxer{
overflow: hidden;
padding: 25px;
}
.div_top_text{
width: 98%;
padding: 1%;
}
<div class="list-boxer">
<ul class="list">
<li>FreePBX initial setup</li>
<li>FreePBX Advanced setup</li>
</ul>
</div>
<div class="div_top_text_boxer">
<div class="div_top_text">
FreePBX tech was created for beginners or experts of the open source pbx system. Read our documents or watch our help videos to learn how to use the latest version of FreePBX
</div>
</div>
im trying to create a website, but im having trouble with 2 parts;
1. I am unable to vertically align the Website title vertically so that its is in the middle of the div.
2. Im trying to left align the menu table with the header div right above it and make it stay as such for all browser types.
I have tried to do different things to get both the above to work, but nothing seems to work and am unable to align either of the elements. Could someone help me please.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Game Portal</title>
<style>
body{
background-color: black;
}
h1.header{
font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: bold;
font-size: 30px;
color: #fff;
text-transform: uppercase;
}
#headerdiv{
margin: 0px auto;
border: 1px solid red;
width: 70%;
height: 100px;
padding-top:30px;
}
th, td {
padding: 15px;
table-layout: fixed;
width: 180px;
height: 75px;
padding: 0px;
border-right-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #808080;
border-collapse: collapse;
}
td {
text-align: center;
font-family:"Times New Roman", Helvetica, sans-serif;
font-size: 15pt;
border-radius:5px
height: 100px;
}
a{
color: #808080;
}
#titleSize{
font-size: 25px;
}
#nav {
line-height:30px;
background-color:#4D4D4D;
height:80px;
width:100%;
}
</style>
</head>
<body>
<div id="headerdiv">
<h1 class="header">game<span id="titleSize">portal</span></h1>
</div>
<div id="nav">
<table style="background-color: #4D4D4D; padding-left: 15%;">
<tr>
<td>Home</td>
<td>Games</td>
<td>News</td>
<td>Contact Us</td>
</tr>
<table>
</div>
</body>
</html>
I have tried messing with the positions (abs, fixed, relative) as well as with the margins, but nothing seems to move either of the elements. Thanks in advance.
One way to do it is through padding:
#headerdiv{
width: 200px;
margin:0px auto;
border: 1px solid red;
width: 70%;
height: 70px;
padding-top:30px;
}
Here height has been changed and the rest to 100 has been added to padding-top
There are many ways to do that, example:
http://jsfiddle.net/ovLhjmwb/
For example: Is more easy to have a container that contains all the child elements (and give it a width)
.container {
width: 400px;
margin: auto;
}
Also, vertical aligned text, is a little difficult to do, the easiest way is to use the vertical-align property (that comes with table elements)
#headerdiv table{
vertical-align: middle;
height: 100%;
width: 100%;
}
So I guess there are some more probs. For example use more HTML5 tags and not so many of ID's or classes. Keep your DOM-tree as simple as possible. You will get a better structure and your xode is more readable. BTW I fixed your problems in my solution as well.
HTML:
<header>
<h1>Game<span>Portal</span></h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Games</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
body{
background: black;
}
header {
width: 70%;
display: block;
margin: 0 auto;
height: 100px;
border: 1px solid red;
}
header h1 {
font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: bold;
font-size: 30px;
line-height: 30px;
color: white;
text-transform: uppercase;
padding-top:13px;
}
header h1 span {
font-size: 25px;
}
nav {
width:70%;
margin:0 auto;
text-align:left;
height: 100px;
background: #4D4D4D;
}
nav ul {
margin-left:-40px;
}
nav ul li {
float:left;
list-style-type:none;
}
nav ul li a{
color: #808080;
height: 62px;
padding:38px 20px 0 20px;
border-left:1px solid #808080;
display: block;
font-size: 15pt;
}
This is probably a silly question but I can't seem to figure out how to auto center my section
live demo: http://iam.colum.edu/students/jordan.max/algorerhythm/index.html#
I have tried to add
margin: 0 auto;
to my div#content, with no luck.
The only way I was able to get it be centered was manually entering in
margin-left: xxpx
but I want it to be centered based on what content is in it. Any thoughts? Thanks in advance.
Rest of CSS
body
{
background: #C1CDC1;
}
h1
{
}
h2
{
margin-top: -40px;
margin-left: 120px;
}
h1.mainT
{
width: 590px;
font-family: 'Montserrat', sans-serif;
margin-left: 10px;
font-size: 2.5em;
}
h2.subT
{
width: 130px;
font-family: 'Open Sans Condensed', sans-serif;
}
h3
{
display: inline-block;
font-family: 'Open Sans Condensed', sans-serif;
}
footer
{
color: #FCFCFC;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: .85em;
}
section#nav
{
width: auto;
margin-left: 550px;
margin-top: -80px;
padding: 5px;
word-spacing: 80px;
}
div#navContainer
{
height: 100px;
background: #FCFCFC; /* grey99*/
box-shadow: 2px 3px 5px #333;
}
div#content
{
height: 100px;
width: auto;
background: #FCFCFC; /* grey99*/
box-shadow: 2px 3px 5px #333;
display: inline-block;
}
section#contentContainer
{
float: none;
padding-top: 20px;
margin: 0 auto;
}
HTML
<script>
$(document).ready(function () {
$('section#contentContainer').hide();
var $as = $('a.contentDown').click(function () {
//show back button, move it from left +300
$('section').show();
}); //closes click for contentDown
}); //closes ready
</script>
</head>
<body>
<div id="navContainer">
<h1 class="mainT"> Al Gore Rhythm Labs </h1>
<h2 class="subT"> Chicago, IL </h2>
<section id="nav">
<h3> Assignments </h3>
<h3> Writings </h3>
<h3> Presentations </h3>
</section>
</div>
<section id="contentContainer">
<div id="content">
<p> hello motto
</p>
</div>
</section>
</body>
<footer>
<p> Jordan Max 2014</p>
</footer>
</html>
Maybe this is the solution (don't forget to remove style="display: none;" for your section#contentContainer)
Result:
Add text-align center; to your section#contentContainer
section#contentContainer
{
float: none;
padding-top: 20px;
margin: 0 auto;
text-align: center;
}
Good Luck!!
Add 'align="center"' to your section element.
As follows:
<section id="contentContainer" align="center">
This is not the preferred way but if you want to do it only in CSS, you would need to do 'text-align: center' on the element to center align it's internal 'inline-block' element.
CSS: text-align: center
I have coded the layout below, but when tested the 'Login or Signup' link is not positioning to the right side of the page. Any help is appreciated.
HTML
<header>
<h1>Heading</h1>
<p>A clean, minimal, grid-based layout focusing attention on your work.</p
Login or Signup
</header>
CSS
body {
font-family: 'open sans';
color: #333;
}
header {
padding: 20px 20px 20px 50px;
}
a {
color: #333;
text-decoration: none;
}
h1, h2 {
font-weight: 300;
}
Desired Outcome
Here is a working solution:
DEMO
html
<header>
Login or Signup
<h1>Heading</h1>
<p>A clean, minimal, grid-based layout focusing attention on your work.</p>
</header>
css
body {
font-family: 'open sans';
color: #333;
}
header {
padding: 20px 20px 20px 50px;
}
header a {
color: #333;
text-decoration: none;
float: right;
padding-top: 30px;
}
h1, h2 {
font-weight: 300;
}
First thing, please write html in correct way and write css with class name.
here is your answer :
HTML :
<header>
<h1>Heading</h1>
Login or Signup
<p>A clean, minimal, grid-based layout focusing attention on your work</p>
</header>
CSS :
* {
padding: 0;
margin: 0;
}
body {
font-family: 'open sans';
color: #333;
}
header {
padding: 20px;
}
a {
color: #333;
text-decoration: none;
float: right;
}
h1, h2 {
font-weight: 300;
margin :0;
padding: 0;
}
header h1{
width: 70%;
display: inline-block;
}
header a{
width: 30%;
display: inline-block;
padding-top: 10px;
}
Demo Link
Some small changes. the H1 and p have full width so a must be below p. Change the css to
a {
color: #333;
text-decoration: none;
float: right;
margin-right: 70px;
}
p{width: 70%;float: left;}
h1, h2 {
font-weight: 300;
width: 70%;
float: left;
}
Will work fine.
First of all there is a missing > at the end of <p>...</p>
Then try this :
CSS
a
{
color: #333;
text-decoration: none;
display : block;
float : right;
}
HTML
<header>
Login or Signup
<h1>Heading</h1>
<p>A clean, minimal, grid-based layout focusing attention on your work.</p>
</header>
And the jsFiddle http://jsfiddle.net/HxWNh/
<div class="wrapper" style="margin:auto; width:960px:">
<div class="header" style="height:80px;">
<div style="float:left">
<h1 style="float: left;">Heading</h1>
</div>
<div class="login" style="float:right">
Login or Signup
</div>
</div>
<div class="DisplayArea" style="float:left;">
<p>A clean, minimal, grid-based layout focusing attention on your work.</p>
</div>
</div>
.wrapper{
margin:auto;
width:960px;
}
See if this helps...
i always find it easy to easy n convenient to position elements using .
I'm having a difficult time resolving this issue I have.
Basically, I can't figure out why my logo image shows left and bottom 1px white.
As a test, I've placed that logo image on a blank page with black background to see if it doesn't have those white margins and it doesn't. It looks okay.
So, I believe that the problem is somewhere in div tags.
Here's how my code looks like:
HTML Code:
<div id="wrapper">
<div id="top_header">
<div id="logo"><img src="img/logo.jpg" align="left" alt="Logo"></div>
<div id="title">BlaBla <br>Blah</div>
<div id="contact"> E-mail: blabla#mydomain.tld<br> Phone: 0980980984324 </div>
</div>
<!-- ... rest of the code -->
CSS Code:
#wrapper {
margin: 0 auto;
width: 978px;
_height: 100%;
min-height: 100%;
}
#top_header {
padding-top: 12px;
/*padding-bottom: 5px; */
margin: 0;
overflow: hidden;
width: 978px;
background-color:#C50918;
display: block;
}
div#logo img {
float: left;
margin: 0;
padding: 0;
/*padding-bottom: 6px; */
overflow: hidden;
display: block;
}
#title {
font: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
vertical-align: middle;
color: #FFF;
text-decoration: none;
margin: 0;
padding-left: 20px;
display: block;
}
#contact {
background: url(../img/phone.jpg) no-repeat scroll left transparent;
float: right;
font: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: right;
color: #FFF;
text-decoration: none;
margin: 0;
padding: 0;
display: block;
}
try
#logo {
border: none; }
also
and use border: none in the "div#logo img" , id.
check your image, this could have a white line at the edge.
Which browsers does this happen in?