I'm currently trying to design my on WordPress theme (and am a total newbie), and I'm having trouble centering my entire blog. For reference, this is what it looks like now.
Everything used to be centered properly, then I changed the width of the overall blog, then suddenly the menu wasn't taking up the max width, and the blog and sidebar were no longer centered. I'd love any help for this. Thanks in advance! :)
Here's the code I have for the blog:
div#container
{
margin: 0px auto;
width: 1050px;
min-width: 1050px;
max-width: 1050px
}
div#content
{
max-width: 640px;
margin-right: auto !important;
margin-left: auto!important;
margin-bottom: 30px;
float: left;
padding: 30px 30px 30px 30px;
background-color: white!important;
}
And for the sidebar:
div#primary
{
/* Primary Widget Area DIV */
padding: 10px 25px 30px 25px !important;
margin: 0px auto!important;
float:right;
background-color: white!important;
max-width: 260px!important;
}
And for the menu:
.menu {
background-color: #676565;
margin: 0px auto;
width: 100%!important;
list-style: none;
padding: 10px 10px 10px 10px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2.5px;
font-family: 'Tw Cen MT'!important;
position: relative;
}
you can try to style the body tag as quick solution for your problem.
Example is given below,
html{
background-image: url("https://i.imgur.com/urEcvAw.png"); background-position: center center; background-size: 200px!important; background-size: cover; background-repeat: repeat; background-attachment: fixed; margin: 0;
}
body{
max-width:160px;
margin:0 auto;
background:#fff;
}
.sample{
text-align:center;
background:#fff;
height:80px;
width:100%;
}
<html>
<head>
</head>
<body>
<div class="container sample">
<p>here all websites header, main block footer comes.. </p>
</div>
</body>
</html>
hope it may helpful to you..
Your .menu class is set to position:relative;
So, you have to add below lines to your .menu class :
left:0;
right:0;
margin:auto;
width:100%;
I believe this should fix your issue.
Related
I have a background image with a h1 and paragraph tag on top. I wish to create a border around the h1 tag without affecting the padding or margin of the header. When I create the border, it surrounds the text and the top padding. Is there a way to apply a border around the text only?
The complete code is on JSFiddle here.
The CSS code is here:
header {
background-image: url("https://images.pexels.com/photos/8263/pexels-
photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
height: 500px;
padding: 0;
margin: 0;
background-attachment: fixed;
background-size: cover;
text-transform: capitalize;
}
h1 {
color: black;
text-align: center;
display: block;
font-size: 50px;
padding-top: 180px;
margin: 0;
}
Is this what you are after?
Below is the code that was used to get the effect. You can have a play with the padding and margins for the H1 to space it out if you want.
body{
background-color: #404040;
}
header{
background-image: url("https://images.pexels.com/photos/8263/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
height: 500px;
padding: 0;
margin: 0;
background-attachment: fixed;
background-size: cover;
text-transform: capitalize;
padding-top: 180px;
text-align:center;
}
h1{
color: white;
text-align: center;
font-size: 50px;
padding:0px;
border:1px solid #000000;
display:inline-block;
margin:0 auto;
line-height:40px;
}
p{
color: white;
text-align: center;
font-size: 30px;
}
<body>
<header>
<h1>Guitar Covers</h1>
<p>This is a new page for uploading my Guitar Covers to share with the world</p>
</header>
</body>
I went a different rout and created a wrapper around the H1 with the padding-top
https://jsfiddle.net/9ss2g8eL/1/
<body>
<header>
<div id="h1_surround">
<h1>Guitar Covers</h1>
</div>
<p>This is a new page for uploading my Guitar Covers to share with the world</p>
</header>
</body>
body{
background-color: #404040;
}
header{
background-image: url("https://images.pexels.com/photos/8263/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
height: 500px;
padding: 0;
margin: 0;
background-attachment: fixed;
background-size: cover;
text-transform: capitalize;
}
#h1_surround{
padding-top:180px;
}
h1{
color: white;
text-align: center;
display: block;
font-size: 50px;
margin: auto;
border:1px solid #FF0000;
width:350px;
}
p{
color: white;
text-align: center;
font-size: 30px;
}
Hi I was wondering how to remove the lines beneath the nav-bars located on my page. I am using the basic twitter bootstrap navbar.
Here is a link to screenshot pointing to the lines I am talking about.
Edit2:Here is a bootply link containing the HTML and CSS for my apllication. The background image is not on the bootply, but I do not believe that should interfere with the solution. : http://www.bootply.com/7lzRzgs0YF
Edit3: Here is a working solution provided by #Raptus. I changed the nav-tabs css class to include a border of 0px instead of 1px.
.nav-tabs > li, .nav-pills > li {
float:none;
display:inline-block;
font:17px fantasy;
border:0px;
margin-bottom: 0px;
border-radius: 0px;
}
.navbar-brand{
font:bold 25px century gothic;
}
.nav-tabs {
text-align:center;
border:0px;
}
.navbar {
margin-bottom: 0px;
border-radius: 0px;
}
#content{
margin-left: auto;
margin-right: auto;
width: 55%;
height: 83%;
background-color: #ffffff;
opacity: 0.8;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
html, body{
height: 100%;
padding: 0;
margin: 0;
background-image: url('../content/Technology_016.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#foot{
height: 9.25%;
}
#nav1{
height: 9.25%;
}
Found it for you my friend seems like your .nav-tabs class has a 1px border set for it, remove that and you should have no more problems.
So I made a site where I have a wrapper div. The content is then centered and getting height 100% to make sure is filling the browsers view area. The strange thing is that the main div have a border. If I make my browser small and use the scroll-er to get down on the page. The border is then only showing on the part of the div that was in the view area. When I scroll down the border is not set on the rest of the div. Any one else had this issue? I cant seem to find anything about this particular issue in google.
This is my basic layout
<html>
<head>
<style>
html, body {
background: url('../img/subtle-circles-pattern-2268.png') left top repeat;
height: 100%;
margin: 0;
padding: 0;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
color: #666;
}
#wrapper {
z-index:1;
width: 100%;
height: 100%;
min-height:100%;
text-align: center;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#content {
margin: 0px auto;
width: 940px;
height: 100%;
border-left: 1px solid #c3c3c3;
border-right: 1px solid #c3c3c3;
background-color: #FFF;
text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
alot of content<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</din>
</div>
</body>
</html>
You have to remove the Height property from the content ID , The height of the ID will be calculated according to the amount of the content you have on your page so your css should be like
#content {
background-color: #FFFFFF;
border-left: 1px solid #C3C3C3;
border-right: 1px solid #C3C3C3;
margin: 0 auto;
text-align: left;
width: 940px;
}
I'm trying to remove the top spacing of my layout I am working on, which you can view here: 50.116.81.173/~speedcit/wordpress/. However, I don't seem to be having much luck with it. I essentially would like to remove the white spacing at the top of the page.
Below is the CSS code I am currently using:
body, html {
font-family: Arial;
font-size: 11.5pt;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
table, tr, td, div {
font-family: Arial;
font-size: 11.5pt;
}
#outer {
text-align: center;
margin: 0px;
}
#wrapper {
border-left: 1px #000000 dotted;
border-right: 1px #000000 dotted;
padding-top: 2px;
padding-left: 2px;
text-align: left;
width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
#header {
background-image: url(http://50.116.81.173/~speedcit/images/header.jpg);
width: 1024px;
height: 280px;
}
#menu {
width: 1024px;
height: 61px;
}
#content {
background-image: url(http://50.116.81.173/~speedcit/images/content-bg.jpg);
background-repeat: no-repeat;
width: 804px;
height: 357px;
padding-top: 80px;
padding-bottom: 10px;
padding-left: 110px;
padding-right: 110px;
line-height: 24pt;
}
#footer {
margin: 0px;
padding: 0px;
}
.txt {
color: #BF2736;
font-weight: bold;
}
Add padding 0 to your wrapper. CSS reset should fix your problem but might create new ones.
http://meyerweb.com/eric/tools/css/reset/
#wrapper {padding:0;}
The root cause to the problem is that you did not reset the way in which the browser renders CSS back to zero.
Change the Padding of the #wrapper to Zero
#wrapper {
border-left: 1px #000000 dotted;
border-right: 1px #000000 dotted;
padding-top: 0px; -- Change This to zero!!!
padding-left: 2px;
text-align: left;
width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
You might want to read about css reset tool
http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in
things like default line heights, margins and font sizes of headings,
and so on
Replace padding-top:2px with padding:0 in the #wrapper rule. If you add padding:0 before the padding-top property, you will still have the problem.
problem of your bottom padding is image it-self. There is a white space in image. Edit it and remove it:
50.116.81.173/~speedcit/images/footer.jpg
And problem of your top white space is what others said before.
So I'm trying to add a badge to the top right corner of a site I'm doing some work on. z-index works to float the object above the page content but each time i try to use position relative the background image disappears only position absolute shows the image. I don't really want to use absolute as the image needs to be positioned on the right hand side of the sites menu bar not the right hand side of the viewport.
Any thoughts or advice appreciated
<div class="badge-box">
Book Now!
</div>
<div id="header">
<img src="images/pixel.gif" width="378" height="31" alt="Welcome to Gwynfryn Farm Cottages" />
</div>
<div id="main-menu">
<div>
Home
Our Cottages
Bed & Breakfast
Price Guide
Location & Local Attractions
News & Special Offers
Contact Us
</div>
</div>
.badge-box {
width: 1030px;
margin-left: auto;
margin-right: auto;
border: 0px solid red;
}
.badge {
background: url(../images/badge.png) 0px 0px no-repeat;
width: 148px;
height: 148px;
text-indent: -10000px;
position: relative;
z-index: 999;
}
#header {
width: 960px;
height: 40px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
padding: 20px 0px 0px 20px;
background: #58564f url(../images/header-top-background.png);
}
#main-menu {
width: 980px;
margin-left: auto;
margin-right: auto;
height: 35px;
/*background: red;*/
background: #58564f url(../images/header-bottom-background.png);
font-family: Georgia, "Times New Roman", Times, serif;
}
#main-menu div {
width: 776px;
height: 35px;
margin-left: auto;
margin-right: auto;
background: blue;
}
#main-menu div a {
display: block;
float: left;
padding: 5px 10px 0px 10px;
height: 30px;
color: #FFFFFF;
font-size: 1.2em;
text-align: center;
background: green;
}
#main-menu div a:hover {
background-color: #333333;
}
unless you do a display:block on that .badge class, a lot of the styles you have defined won't take effect as it defaults to inline. maybe that is all you need to get started.
i am not sure what is the effect you are trying to achieve. can you post a png/jpeg of the mock-up?