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?
Related
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.
This question already has answers here:
Make absolute positioned div expand parent div height
(15 answers)
Closed 4 years ago.
The <div> container shrinks to, well, "zero" after positioning my logo.
Could you please check what's the problem? I'd like it to be centered in the #logo <div>. I thought making parent <div> relative and children absolute should keep logo in the <div>.
Html
<body>
<div class="wrapper">
<header>
<div id="logo">
<img src="./img/logo.png">
</div>
</header>
</div>
</body>
CSS
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding:0;
margin:0;
background-color: #DCB894;
}
.wrapper{
margin-right: auto;
margin-left: auto;
max-width: 960px;
padding-right: 10px;
padding-left: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
}
header {
margin-top: 10px;
background-color: #BCD34C;
}
#logo{
border-style: solid;
border-color: magenta;
border-width: 2px;
position: relative;
height: auto;
}
#logo img {
width: 150px;
height: auto;
position: absolute;
margin: auto;
border-style: solid;
border-color: red;
border-width: 2px;
}
Yes it should to behave something like that because position: absolute and position: fixed dose not take place from it's parent or container. When you use these two css properties they go outside regular document follow. That's why parent treat inside have no content and height not auto increase until set you height by explicitly by css properties like height: 100px (for example) or min-height: 100px (for example).
According your current structure either you set the minimum height based logo.
header {
min-height: 100px; // 100px here logo size assumed
}
Or keep the position of logo image relative:
#logo img {
position: relative;
}
I would avoid position absolute, if you wrap your image within a div you can centre your image.
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding:0;
margin:0;
background-color: #DCB894;
}
.wrapper{
margin-right: auto;
margin-left: auto;
max-width: 960px;
padding-right: 10px;
padding-left: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
}
header {
margin-top: 10px;
background-color: #BCD34C;
}
#logo{
border-style: solid;
border-color: magenta;
border-width: 2px;
position: relative;
height: auto;
max-width: 220px;
overflow: hidden;
}
#logo figure {
width:52%;
margin: 0 auto;
}
#logo img {
width: 100%;
position:relative;
border-style: solid;
border-color: red;
border-width: 2px;
overflow: hidden
}
<body>
<div class="wrapper">
<header>
<div id="logo">
<figure>
<img src="https://upload.wikimedia.org/wikipedia/en/9/9d/Pepsilogo.png">
</figure>
</div>
</header>
</div>
</body>
The img will take up 100% of the total space, given to it by the figure.
You can change the width of the figure and then the image will respond, keeping it centered.
What I am trying to accomplish is to get the image block to the center of the banner. What's happening is the left edge of the image is what's in the center. How would I get the actual center of the image to the center of the banner? I hope this makes sense... lol.
Here is what I am currently getting:
This is what I am trying to get... you can ignore the differences in fonts, borders, etc.. lol
This is my css:
#profile-banner {
background: #000;
height: 267px;
border-bottom: 1px solid #999;
margin: 0px 0px 25px 0px;
text-align: center;
}
#profile-banner h1 {
font-size: 36px;
font-family: Piximisa;
letter-spacing: 5px;
padding: 15px;
margin: 0px;
}
#profile-banner p {
margin: 0px;
padding: 0px;
}
#profile-banner .logo {
top: 125px;
background: #333;
border: 1px solid #666;
width: 250px;
height: 250px;
position: absolute;
margin: 0 auto;
padding: 0px;
}
This is my HTML:
<div id="profile-banner">
<h1>Some Team Name</h1>
<p>
Some catchy slogan.
</p>
<img src="{BLANK-LOGO}" alt="" border="0" class="logo">
</div>
Thanks for your time!
You can't mix absolute and static positioning. You can use absolute positioning:
position: absolute;
top: 125px;
left: 50%;
margin-left: -125px;
or static positioning:
margin: 125px auto 0;
The main difference is how the element affects other elements. Using absolute positioning takes the element out of the document flow, so it doesn't affect other elements.
Change your CSS this way
#profile-banner .logo {
margin: 125px auto 0;
background: #333;
border: 1px solid #666;
width: 250px;
height: 250px;
padding: 0px;
}
Changes
Remove position and top.
Add the top as margin-top.
Positioned elements do not respect margins.
Hi I have page http://rygol.cz/qlife/ and when Iam zooming out the content goes out of his div. If i you height: auto; or height: 100% its ok but leftcolumn is smaller then right, clear doesnt help me.
Have anybody some idea how to fix it?
#leftcolumn {
color: #333;
background: #fff;
background-image:url("./images/corner.png");
background-repeat:no-repeat;
padding: 10px;
height: 800px;
width: 244px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
background: #fff;
padding: 10px;
height: 800px;
width: 638px;
display: inline;
margin-bottom: 10px;
}
If you need that extra space between header and the content you should just go ahead and place the #leftcolumn and #rightcolumn in an additional wrapper container with the background-color set and have the #container without the background-color set.
HTML structure:
<div id="container">
<div id="header"></div>
<div id="content-wrapper">
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
</div>
</div>
And CSS:
#container {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
background: #fff;
width: 902px;
padding: 10px;
margin-bottom: 10px;
height: 200px;
}
#content-wrapper {
background-color: #fff;
min-height: 1px;
overflow: hidden; /* clear hack :) */
}
#leftcolumn {
color: #333;
background: #fff;
background-image: url("./images/corner.png");
background-repeat: no-repeat;
padding: 10px;
width: 244px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
background: #fff;
padding: 10px;
width: 638px;
margin-bottom: 10px;
}
Remove the height declarations in the columns. You could also use overflow-y: scroll though I would stick to removing the heights. Another thing to consider is that people generally don't zoom out that far anyway: the text becomes impossible to read at the zoom level it breaks at (chrome v24).
If you want equal height columns have the shorter column floated to one side then set position: relative and top: 0; bottom: 0; then set the other column to have overflow: hidden; to 'clear' the float. Note: the floated column should come first in the markup for this to work.
I am having an issue with my divs in Internet Explorer. I have a three column layout and it displays correctly in all browsers (chrome, firefox, safari) except for Internet Explorer. In IE, the middle div displays at the bottom of the page instead of between the sidebars.
I've been trying for days to figure out what the issue is. I'm sure it's something to do with my CSS, but I'm not sure.
Any help would be appreciated!
My website is: http://www.onedirectionconnection.com
And here's the CSS:
div#container {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 1125px;
text-align: left;
}
div#header {
clear: both;
height: 500px;
margin-top: 0px;
padding: 0px;
border: 0px
}
div#navi {
text-align: center;
background: #FFFFFF;
clear: both;
height: 60px
margin-left: 13px;
margin-right: 13px;
margin-bottom: 10px;
padding-left: 39px;
border-bottom: 3px solid #FF0000;
border-top: 3px solid #FF0000;
}
div#left {
float: left;
width: 320px;
}
div#right {
float: right;
width: 320px;
}
div#middle {
padding: 0px 325px 5px 325px;
margin: 0px;
}
I just included the parts I think are relevant to the problem, but anyone can feel free to serf the code on my website if necessary!
Increase width of container or decrease some margins.
#middle
{
padding: 0px 0px 5px 0px;
margin: 0px;
overflow: hidden;
width: 485px;
float: left;
}
You need to work on the positioning of the DIVs. The left div is ok. Add middle div after left div and then right div.
Add float: left; width: 400px; margin: 0; to middle. And adjust the widths of middle DIVs child elements.