I am fairly new to html/css and I am building a page through tumblr. It already had a template which I have changed and added a few extra elements.
I am stuck as I have no idea where to find the code which moves the body of the page up and so there is a significant gap between the navbar and body of page.
what code would i need?
my webpage: http://goldlazerblog.tumblr.com/
Here is my css for my positioning of my title and nav bar. They are in their right place and the only thing I was thinking was to make my main title larger (image file) ??
.main-title {
margin: 0
auto;
padding: 0;
position: relative;
text-align:center;
top: 0;
}
.main-title li {
display: inline;
padding: 10px;
}
.main-title a {
display:inline-block;
padding: 0px;
}
.nav-bar {
border:NONE solid: NONE;
border-width:1px 0;
list-style:none;
margin: 0px;
padding:0;
text-align:center;
color: #5a5a5a;
font-size: 20px;
font-weight: normal;
}
.nav-bar li {
display: inline;
padding:0px;
margin: 0px;
}
.nav-bar a {
display:inline-block;
padding: 15px;
}
.content {
margin-top: -100px;
}
This should reduce the empty space
You have an empty div with the id of header in there. Perhaps you could set that to display: none if you cannot remove that div.
#header.none-header {
display: none;
}
You have a h1 with nothing in it that is taking up your space.
<div class="blog-title">
<h1></h1>
</div>
You could also remove or hide the parent.
<div id="header" class="none-header none-navigation">
Related
I'm not sure why, but past a certain font size the text inside my navigation bar shows up on two lines. The box size isn't being updated for some reason in Chrome and Safari but still works fine in Firefox.
Firefox
Chrome
What would be the difference between these web browsers that would have such an effect on my code?
<nav id="topTab">
<ul>
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
<div>
<h1>
<b href="http://localhost:8000/home.html" title="Home">Example1</b></h1>
</div>
</nav>
CSS:
#media only screen and (min-width : 1024px) {
a {
background: #fcfcfc;
color: #000;
text-align: center;
text-decoration: none;
font-family: 'Gloria Hallelujah';
}
#topTab{
position:relative;
}
nav#topTab {
float: left;
width: 100%;
overflow: hidden;
}
nav#topTab ul {
float: left;
clear: left;
position: relative;
list-style: none;
margin: 0;
padding: 0;
left: 50%;
}
nav#topTab ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
nav#topTab ul li a {
display: block;
padding: 0 5% 0 5%;
margin: 0 15% 0 3%;
font-size: 2.2em;
}
nav#topTab ul li a:hover {
background: #000;
color: #fff;
}
h1 {
position: relative;
text-align: center;
top: 20%;
}
h1 b {
font-size: 2.3em;
text-decoration: none;
color: black;
font-weight: bold;
font-family: 'Caveat Brush';
}
}
Your unordered list is floated. Floating an element removes it from the "natural" flow of the document and as a consequence, your text is trying to adjust to this "unnatural" flow.
You have to clear your floats to restore the flow again. This can be done by adding an element with clear: both style attached to it. In this case, you would add clear both to your div wrapping the heading tag.
div {clear: both}
I am having some problems getting my menu to center on the screen. I thought setting the display to block, and making the left and right margins to auto, would do this for me; however, I was wrong. Here is a JSFiddle to help show the problem. Thanks for the help.
<ul id="menuList">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
#menuList{
display:block;
width:100%;
margin-left:auto;
margin-right:auto;
}
#menuList ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menuList li
{
list-style: none;
float: left;
margin-right: 0.5em;
}
#menuList a
{
display: block;
width: 8em;
color: black;
text-decoration: none;
text-align: center;
}
set menu to inline-block and parent to text-align:center
JS Fiddle
replace body with your parent id or class
body {
text-align:center;
}
#menuList {
display:inline-block;
}
The best way to center an element is by using margin: 0 auto; but the element need to have a fixed width (not 100% as you have).
So just add:
#menuList {
width:408px;
margin:0 auto;
}
Vitorino's answer is generally a bad idea. You don't want to put text-align: center on your body.
You could, however, set that CSS on the ul, and display the menu items inline(-block). As such.
#menuList ul {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
#menuList li {
list-style: none;
display: inline-block;
margin-right: 0.5em;
}
You have to change the width, example:
#menuList{
display:block;
width:70%;
margin-left:auto;
margin-right:auto;
}
You used display block, so that your elements start new line, and then floats, that they would stay in same line. Just don't use this weird combo.
If you need items stay in line use 'display:inline;'
if you need items to stick to either left or right side of parent element, use floats. Be careful as floats often mess all the thing up. There are other ways to float things, that doesn't pull them out of document flow.
Here is fixed CSS:
#menuList{
display:block;
width:100%;
margin: 0 auto;
text-align:center;
}
#menuList ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menuList li
{
list-style: none;
display: inline;
margin-right: 0.5em;
}
#menuList a
{
display: inline-block;
width: 8em;
color: black;
text-decoration: none;
text-align: center;
}
How do I center this menu in css? I have tried left: 50% or text-align: center but nothing works. Do you guys have any idea?
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
Thanks in advance
CSS:
#navigation {
margin: 0;
width: 100%;
height: 50px;
background: url(navigation.jpg);
padding: 0;
position: absolute;
left: 0;
top: 0;
right: 0;
text-align:center;
}
#navigation ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#navigation li {
float: left;
border: 0;
list-style:none;
}
#navigation a {
margin: 0;
display: block;
height: 30px;
padding: 20px 20px 0px 20px;
background: none;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFF;
border: none;
}
#navigation a:hover, #navigation #current a {
background: url(button.jpg);
text-decoration: none;
color: #000;
}
Have you tried:
#navigation ul {margin:0 auto;}
on your #navigation ul element?
You can try this:
#navigation {
text-align:center;
}
#navigation ul {
display:inline-block;
}
wrap your content in a container, set a width and use margin:auto
EDIT
Ok this is a bit of a mess, is there a reason you are absolute positioning the header? Your ul does not need position: relative and your li's should be using display:inline-block instead of float.
JSFIDDLE
Your #navigation element has width:100%; so that block level element takes the entire screen. You can try to center it's children with text-align: center;.
Try settings a specific width on your #navigation ul and then apply margin: 0 auto; text-align:center;.
Depending on what you're going for, it may be better to do #navigation li{ display: inline-block;} instead of float: left
I got some problems with layouting in CSS. Here is the code I am talking about: Fiddle.
The <div id="header"> should have the height of the <div id="menubuttons"> which I marked red.
I always thought that if you don't state the height of a div it will get the height of it's children.
The <div class="contentLine> is stuck to the <div id="theme"> although I defined margin-top: 20px;.
The right column always has greater margin than the left column. I want both to have the same margin to the browser window.
CSS
body {
margin: 0 auto;
padding: 0;
font-family:'Share', cursive;
}
#header {
width: 100%;
vertical-align: middle;
}
#header_logo {
width:;
float: left;
margin: 11px 20px 20px 20px;
background-color:;
}
#menubuttons {
margin-right: 0;
margin-top: 0;
height: 2.5em;
line-height: 2.5em;
display: inline-block;
background-color: red;
}
#menubuttons ul {
list-style-type: none;
margin:0;
padding:0;
}
#menubuttons li {
float: left;
margin-right: 20px;
}
a {
font-family:'Share', cursive;
}
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:active {
text-decoration:underline;
}
#theme {
width: 100%;
height: 400px;
background-color: green;
margin-top: 0;
float: left;
}
.contentLine {
margin: 0 auto;
margin-top: 20px;
width: 96%;
}
.contentLine .column {
float: left;
margin: 0;
width: 30%;
margin-right: 1%;
padding: 1%;
position: inherit;
/* shadow for seeing div boundaries */
box-shadow: 0 0 1px black inset;
}
.contentLine #last {
margin-right: 0;
}
Let me go 1 by 1
1) Your <div id="header"> contains floated elements, you need to clear that, so use overflow: hidden; on parent element i.e #header
2) Again, you've floated #theme but you've set it to width: 100%; so you don't need float there.
3) About the last you need to set the margins accordingly, right now it's 1% so you need to calculate this correctly, I would like to suggest you to use box-sizing: border-box; and set 33% width for each element and than apply padding-right
Demo
Also make sure you clear your floating elements which are nested inside contentLine.
If you are not one of those IE fans, than you can use the snippet below, which will self clear the parent element in a better way.
.clear:after { /* Much much better than overflow: hidden; */
content: "";
display: table;
clear: both;
}
Update your html
</ul>
<!--Menu ends here -->
</div>
<!--menubuttons ends here -->
<!--Add following div to your code -->
<div class="clear"></div>
</div>
<div id="theme">
Update your CSS
.clear{
clear:both;
}
This should help.
- will be reusable also.
I am creating a div for meta data that has a line going through the back of it and for some reason, space is being added to the beginning of the line and I'm not sure why.
Here is the CSS:
.mline {
border-top: 1px solid #E7E7E7;
height: 0px;
margin: 20px 0 20px 0;
text-align: center;
}
.mline > div {
background-color: #FFFFFF;
line-height: 30px;
padding: 0 5px 0 5px;
position: relative;
text-transform: lowercase;
top: -16px;
}
.mline * {
display: inline-block;
}
.mline h1 {
font-size: 12px;
font-weight: normal;
}
.info {
line-height: 16px;
}
.info li:after {
content:" \2022 ";
}
.info li:last-child:after {
content:"";
}
.liked, .like:hover {
color: red !important;
}
And here's the HTML:
<section>
<div class="mline">
<div>
<ul class="info">
<li>3/5/13</li>
<li>21 notes</li>
<li>reblog</li>
</ul>
</div>
</div>
</section>
You can see the error on my site here: http://nellyswritingroom.tumblr.com/
And in this jsfiddle: http://jsfiddle.net/xrVh4/1/
I'm not sure what's going on because it's definitely not margins or padding. Any help would be greatly appreciated!
In the jsfiddle example, I assume left padding is being added by default to the ul.info element.
The site, however, has the following lines in newstyle.css:
ul, ol {
margin-left: 2em;
}
If you don't want any margins or padding, you can clear them with:
.info {
line-height: 16px; // already there - I'm not adding this
margin: 0;
padding: 0;
}
Example
It seems that it is, in fact, padding, on the ul element; adding the following CSS declaration removes that space:
.info {
padding-left: 0;
/* other stuff unchanged */
}
JS Fiddle demo.
The line is the border-top you have applied. The reason it all can't be seen is because you have covered it with a negative top with the child element, that has a bg color fff