I have 5 paragraph markers that are all floating next to each other using a CSS Class.
When I add my 6th paragraph marker I assumed and wanted it to move down, however it is floating next to the other 5.
I created this jsfiddle so you can see what I have so far,
<http://jsfiddle.net/rtze3a8g/1/>
Basically I am trying do design my own tab bar.
New to this so I hope I explained it properly. Thank you for your patience.
Try with this: jsFiddle
When you have float elements adjacent each others, if you want some of them take the entire line (acting as 'block' element), you need to use clear: both
You can also use clear:left to clear float left
* {
margin: 0;
padding: 0;
}
html {
font-size: 100%;
}
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background: #6D9BF1;
padding: 20px;
}
#wrapper {
font-size: 1.2em;
line-height: 1.5em;
background-color: #ffffff;
width: 700px;
margin-left: auto;
margin-right: auto;
}
p {
margin-bottom: 1.5em;
}
p.newLine{clear:left;}
p.ribbon{
float: left;
padding: 5px 10px 5px 10px;
font-weight: bold;
}
p.ribbon:hover{
background-color: #87CEEB;
color: white;
}
p.reset{
float: none;
}
<!DOCTYPE html>
<title>Enter Title Here</title>
<script>
function newfunction(){
}
</script>
<body>
<div id="wrapper">
<p class="ribbon">Home</p>
<p class="ribbon">History</p>
<p class="ribbon">Location</p>
<p class="ribbon">Photos</p>
<p class="ribbon">Contact Us</p>
<p class="newLine">This is test information</p>
<p>This is test information</p>
</div>
</body>
</html>
Related
I am confused by the margin when I write the code:
Section {
background-color: #FFFFFF;
width="100%";
}
p1 {
font-family: Roboto;
font-size: 22px;
font-height: 1px;
margin-top: 45px;
margin-left: 165px;
}
p2 {
font-family: Roboto;
font-size: 22px;
font-height: 1px;
margin-top: 10px;
margin-left: 165px;
}
<section>
<p class="p1"> Content 1 </p>
<p class="p2"> Content 2 </p>
</section>
However, when I don't add the display, the background in section will not cover all the content. when I add the display: inline-block, it will cover but it will have the same first situation when I change display:inline-block to display: inline or display:block. So everyone can explain me what is happening please?
Add overflow:auto or overflow:hidden or overflow:scroll.
section {
background-color: red;
width: 100%;
overflow:auto; // added
}
.p1 {
font-family: Roboto;
font-size: 22px;
margin-top: 45px;
margin-left: 165px;
}
.p2 {
font-family: Roboto;
font-size: 22px;
margin-top: 10px;
margin-left: 165px;
}
<section>
<p class="p1"> Content 1 </p>
<p class="p2"> Content 2 </p>
</section>
The only issue is with you misused the double quotes in the width property of your section CSS, also the class selectors in your css haven't started with ".", so just update your css it will definately work.
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.
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 the following view running on Razor/MVC:
<div class="body">
<div class="content-wrapper">
<div class="treewindow">
<div class="treewindowtitle">
TREEWVIEW TITLE
</div>
<div class="treewindowcontent">
<div id="EquipmentTree">
<ul>
<li><a>Equip Class1</a>
<ul>
<li><a>Equip1.1</a>
<ul>
<li><a>Equip1.2</a></li>
<li><a>Equip1.3</a></li>
</ul>
</li>
<li><a>Equip Class2</a>
<ul>
<li><a>Equip2.1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<p>Left Text 1</p>
<p>Left Text 2</p>
<p>Left Text 3</p>
</div>
</div>
The idea is to have a left positioned treeview control in order to navigate and on the right side of main screen the data that will appear according to the treeview selection. This code is done in that way as some data is loaded dinamically (all logic was removed to isolate the problem I have).
I´m using the following .css file:
html
{
background-color: #e2e2e2;
margin: 0;
padding: 0;
}
body
{
background-color: #fff;
font-size: .85em;
border-top: solid 5px #000;
font-family: 'Segoe UI' , Tahoma, Geneva, Verdana, Helvetica, sans-serif;
font-size: small;
font-weight: normal;
font-style: normal;
font-variant: normal;
color: #000066;
margin: 0;
padding : 0;
}
a {
color: #000066;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 960px;
}
.body {
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
}
/* Treeview control
----------------------------------------------------------*/
.treewindow
{
float: left;
width: 200px;
color: #495677;
background-color: #efeeef;
}
.treewindowtitle
{
color: #fff;
background-color: #495677;
text-align: center;
font-size: smaller;
}
.treewindowcontent
{
width: 200px;
height: 400px;
overflow-y: scroll;
overflow-x: scroll;
color: #495677;
background-color: #efeeef;
}
My problem is to keep same background color on both screens. It happens that when the window opens at left it destroys right side of screen background. You can see that here at Fiddle: I want both sides to have same background color.
Hope someone can help me with that...
Thanks.
Two possible techniques you might give a try:
1) Use Javascript (or jQuery or what have you) to equalize the heights of each containing div. For example, see this DEMO.
2) Retool your html so that either:
it uses one of the layout techniques that you'd find here.
sets heights to 100%, like in this trick.
remove the floats and use table-cell. See this.
I prefer that last one whenever possible. Hope this helps!
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 .