Platform: Wordpress (self-hosted)
Template: TwentyTen
I've been able to work out most things by Googling or tinkering around with familiar parts of the stylesheet, but I'm stuck now and am hoping someone can help me out. Basically, I’d like to create a header that is similar to this in design (http://albertaspeechie.blogspot.com) in that part of the header background will be transparent.
If I create an image with a transparent section, it shows as white because it's still within the header/wrapper with its white background.
I'm thinking that, possibly, setting the header background as transparent (though I can't figure out how to just make the header transparent, without affecting the rest of the wrapper) and boosting the padding above the wrapper. and increasing the height of the header. I used to know how to increase the height of the header, but I can't seem to find it anywhere anymore.
Any advice as to how I could do this? I'm only bumbling around with a test blog at the moment, so there's no published site to show. It's just a straight twentyten at the moment, without any adjustments until I can figure out how to do a partly transparent header.
Thanks in advance.
Edit: I'm not sure why people are downvoting this. I've followed the rules and instructions.
You can use positioning to move the image outside the header.
Add the image you want to use to inside your header. Make sure the image has a transparent background - use a png file for example.
Add position: relative to the header
Add position: absolute to the image, and then provide coordinates for the image.
To position it outside the header, provide a negative value for top. To center the image add 0 to left and right, and then use margin: auto.
.header img {
position: absolute;
top: -100px;
left: 0;
right: 0;
margin: auto;
}
body, html {
height: 100%;
padding: 0;
margin: 0;
background: lightblue;
}
.wrapper {
margin: 0 auto;
width: 50%;
height: 100%;
background-color: lightyellow;
margin-top: 150px;
}
.header {
background-color: white;
width: 100%;
height: 200px;
position: relative;
}
.header img {
position: absolute;
top: -100px;
left: 0;
right: 0;
margin: auto;
}
<div class="wrapper">
<div class="header">
<img src="http://placehold.it/250x250" alt="" />
</div>
</div>
Codepen Demo
Read more about positioning here.
Related
I am quite new at coding, and I would love spend a lot of time with it, but now I really do not have time for that. I spent two weeks to trying to find out this thing.
I made my portoflio on tumblr. And I used a theme, where the pictures are filling the whole screen, so you can not basically anything, but pictures. Which is good, I wanted it like this. BUT. I would like to leave a little note, actually a pointing arrow picture which says: "keep scrolling for more". So this note is always hidden by the full-sized images.
How can I move the note-image on the very top? Above the image posts?
Which is the easiest way?
I tried some resolution, i have found here, but none of them worked...
I thought would not be a problem, but this is my portfolio, and I still could not send it, because of this issue.
Thank you so much for any help. Sorry for being so dumb.
This is my portfolio.
I don't have experience with tumblr, but based on your tags it looks like it uses HTML and CSS. When you have an image that fills the entire screen and want to add an image on top of that image, you need to have both images within a div container to give them something to reference. This container needs to have position: relative and the style of the images will be relative to it. So, your HTML and CSS should look something like this:
HTML
<div class="container">
<img class="imageOne" src="path/url goes here" alt="" />
<img class="imageTwo" src="path/url goes here" alt="" />
</div>
CSS
.container {
position: relative;
top: 0px;
left: 0px;
}
.imageOne {
position: relative;
top: 0px;
left: 0px;
}
.imageTwo {
position: absolute;
top: 30px;
left: 30px;
}
So your first image is set to 0 pixels from the top and 0 pixels from the left. This mates it to the container div you created to hold the images and set it to the same positioning. Your second image is position: absolute to the container div so it is 30 pixels from the top and 30 pixels from the left and was loaded after your first image and thus placed on top!
Cheers!
You can do it just adding the property z-index: xx to the image (or actually whatever) you want to be above anything else. Also, you can combine it with position absolute or fixed.
div { width: 100px; height: 100px; }
.container {
position: absolute;
top: 0px;
left: 0px;
}
.green {
position: relative;
left: 20px;
top: 20px;
background-color: green;
z-index: 1;
}
.pink {
position: relative;
left: 80px;
top: 0px;
background-color: pink;
z-index: 3;
}
http://codepen.io/paulirish/pen/CgAo
here you can see various examples, credit for Tom Wiltzius
I apologize if this has been answered time and time again. I remember searching thoroughly for an answer a couple years ago when I first wrote up my website script, but I couldn't ever find one. The same for now.
Recently I reworked my website's script so I can host it onto Weebly. Here is one of the four pages of my site that I need help with. As you can see, the images that pop up when the thumbnail is hovered over are absolutely positioned. For most computer resolutions and/or browsers, this will have the image appear out of the designated box.
How could I position them to the inner top left corner of the div? Or better yet, horizontally and vertically centered within it?
<section id="Sizes" style="float: left">
<a href="#Space">
<img class="Small" src="/files/theme/SampleD_Fun_Icon.png" width="150" height="150" alt="Sample 1: Day of Fun" />
<img class="Large" src="/files/theme/SampleD_Fun.png" width="150" height="150" alt="Sample 1: Day of Fun" />
</a>
...
</section>
<a id="Space"></a>
<span class="Popup">Hover over thumbnail to display sample artwork.</span>
<br style="clear: left" />
a:hover img.Small
{
border: 5px solid #21568b;
margin: 10px;
text-decoration: none;
}
section#Sizes a img.Large
{
border-width: 0;
height: 0;
left: 438px;
position: absolute;
top: 326px;
width: 0;
}
section#Sizes a:hover img.Large
{
height: 526px;
left: 438px;
position: absolute;
top: 326px;
width: 520px;
}
.Popup
{
border: 3px solid;
float: left;
height: 272px;
margin: 8px 20px 0px 0px;
padding-top: 254px;
text-align: center;
width: 520px;
}
Thank you for your time. :)
Your whole design is a bit fragile, and I wouldn't recommend building this this way in the first place, but you're looking for practical answers, so here's the smallest change I can think of that fixes your problem:
1) Add this to your style sheet:
body { position: relative; }
2) On line 40 from your main_style.css, change top: 326px to top: 316px and left: 438px to left: 428px, so that it becomes like this:
section#Sizes a:hover img.Large {position: absolute; top: 316px; left: 428px; width: 520px; height: 526px;}
How does that work?
Your images are place using absolute positioning. By default, that works relative to the viewport (the window). But by turning the body into position relative, it becomes a containing block, and position absolute is relative to the nearest containing block ancestor.
So now, your images are fixed within the body element, instead of being fixed relative to the window. Since the margins of the body element is what's changing size when you resize the window, that makes the various pieces of your content fixed relative to each other. You then just need to remove 10px from the top and left side, since that's the size of the border of your body element, and we're now measuring from inside the border.
TLDR: You can't do this in pure CSS.
You can easily position the image inside the container div if you place the image element inside the div element, and then use absolute positioning like top: 0; left: 0; (or with a number of other methods). But then you'd need JavaScript to correlate the hovered thumbnail with the popup full-size image.
Alternatively, you can have the full-size image be nested in the thumbnail element (like you currently have), but then you'd need JavaScript to position the full-size popup image inside the container div.
Of the two alternatives, I recommend the first: put all the popup images inside the target container, and use JavaScript to show or hide them when a thumbnail is hovered. Correlating the thumbnail and the full size image via JavaScript is going to be easier then writing positioning code.
I see you're using jQuery already so why not do something like this?
$('.Small').on('mouseover', function(){
$('.Popup').empty().html($(yourtarget).attr('img' , 'src'));
});
$('.Small').on('mouseout', function(){
$('.Popup').empty().html('Hover over thumbnail to display sample artwork.');
});
Just because everyone was saying it can't be done with pure css, I wanted to demonstrate that it can, and it is even quite easy. Have a look at the folowing example:
http://jsfiddle.net/aafa2zp5/
<div id='images-wrapper'>
<ul>
<li>
<img class='small' src='http://placehold.it/50/ff0000'/>
<img class='big' src='http://placehold.it/300/ff0000'/>
</li>
<!-- and some more similar thumb / image groups -->
</ul>
<div class='preview-area'></div>
</div>
CSS (or the relevant part at least)
#images-wrapper {
position: relative;
}
.big {
display: block;
position: absolute;
top: 54px;
right: 54px;
opacity: 0;
transition: opacity .5s;
}
.preview-area {
width: 350px;
height: 350px;
border: 4px solid blue;
position: absolute;
top: 21px;
right: 21px;
}
li:hover .big {
opacity: 1;
}
The key is to set a position relative to the wrapper (and keep all of the descendants as their default static). Then you can use this to position the preview area and the big images against by setting them to postion absolute and carefully calculating the correct postion. I even added a cross fade, just because it is so easy, but you could just as well work with display block / none if you prefer.
For smaller screens you may want to alter the dimensions and positioning inside a media query, but it still should be doable (though depending on the hover state is perhaps not the best idea on a touch device)
I hope you get the idea and you can figure out how to apply this technique to your own site. Feel free to ask if you want me to explain further or when you get stuck.
I'm trying to build a website header that is semi transparent, and contains a semi transparent image that hangs outside the of the header div, like in the image linked below.
Because of overlapping opacities, I can't simply put a semi transparent image in to a semi transparent div and add a negative margin to the image. The best I could come up with was taking the height of the header image, and cutting that bit of the logo image, like in image attached. However that's not ideal, as doesn't play nice responsively etc etc.
Any ideas of how I might achieve this look?
Thanks in advance.
If you know the height of your menu then you can place both the logo and the menu inside of a container. Then position the logo with the top value equalling the height of the menu.
.header-bg {
background: rgba(225, 225, 225, 0.5);
position: relative;
height: 60px;
}
.header-bg .logo {
width: 90px;
height: 90px;
background: rgba(225, 225, 225, 0.5);
position: absolute;
top: 60px;
left: 10%;
}
See this fiddle: http://jsfiddle.net/3kxBt/1/
Hope that helps in some way.
This is an interesting problem and there are a couple ways to solve it; two come immediately to my mind.
The first is your method; carefully position things so that you don't have multiple translucent sections overlapping. This wouldn't be too difficult; if you go with this method I would recommend breaking the header into sections left and right of the image and using absolute positioning.
The second and easier way is to create a version of the picture with the semi-transparent white overlay you desire already applied. Then you can use that as the background for the menu and image. The only tricky thing here is you have to make sure the images line up by either using fixed positioning or calculated pixel offsets. This approach has been around for a long time and you can see any early example (2001-ish) of it here.
My take on it is to create a :before pseudo-element. It has its problems, including what if the logo changes in size at some point, but overall it works.
HTML
<a class="logo" href="#">
<img src="https://example.com/logo.png" />
</a>
CSS
nav a.logo {
position: relative;
...
display: inline-block;
line-height: 0.0001em;
font-size: 0.0001em;
}
nav a.logo img {
position: relative; /* for z-index issues. giving the image a relative
position automatically will place it above the
absolutely positioned :before element. This is
because the before element is rendered before the
image */
}
nav a.logo:before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 71px;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.4);
...
}
Demo: http://jsfiddle.net/ZP6LQ/1/show
Source: http://jsfiddle.net/ZP6LQ/1/
You can use rgba color format for background of both the .logo and the header to achieve your desired effect. However, you have to give position: absolute; to your .logo class because it needs to come right below the header. If you put your .logo on top of your header, then colors will overlap and won't look right. So, it needs to starts at the bottom of the header.
The header should have position: relative; so that your .logo is positioned relatively to the header. This way, you don't even need to know the height of your header because when you define top position of your .logo, you can simply use top: 100% so that it always starts right below your header. You don't have to hardcode that top value.
Now, you need to shift your actual logo (image) inside your .logo on top because its appearing below the header right now. For that you can simply push the image by giving it negative margin-top value.
SEE THE DEMO
The code would look like this:
HTML
<header>
<h1 class="logo">
<img src="/image/path" alt="logo">
</h1>
</header>
CSS
header {
background: rgba(255,255,255, 0.7);
position: relative;
}
.logo {
position: absolute;
top: 100%;
background: rgba(255,255,255, 0.7);
}
.logo img {
margin-top: -50px;
}
Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.
i have created a website but now i am having 1 issue. i am unable to do click even on link and navigation.
you can take a look:
http://www.cambridgekitty.com/business-directory/
to check the real codes.
HTML
<div id="main-bg">
<div id="left-side-logo"></div>
</div>
CSS
#wrap {
padding: 0;
position: relative;
width: 100%;
}
#main-bg {
background: url("../img/kittybg2-h.png") no-repeat scroll right top transparent;
margin: 0 auto;
min-height: 733px;
position: relative;
width: 100%;
z-index: -9999;
}
just add a logo on left side
#left-side-logo {
background: url("../img/norwichkitty-final-logo-bg-02.png") no-repeat scroll 0 0 transparent;
height: 500px;
left: -150px;
opacity: 0.8;
position: absolute;
top: -60px;
width: 500px;
z-index: -1;
}
and add
position: relative;
to #wrap. and add
z-index: -9999;
to #main-bg.
but after doing this ... i am unable to click on logo or even navigation links.
please let me know why i am casusing this issue.
thank you
Don't use a negative z-index if you don't know exactly what you're doing. Use a positive value and just set #left-side-logo's z-index to a value even higher.
Since #wrap has a negative z-index, it's placed behind the content of #inner-wrapper in the latter's stacking index.
See also:
W3C: CSS2.1: 9 Visual formatting model (Section z-index)
If I were you, I would simple change the elements I apply the different background images to. Give #inner-wrapper the city image background, and #main-bg the logo background. Then use the background-position property to position the logo background (currently the two zeroes in your background rule). Also, if you want opacity for that logo you can achieve that by simply setting it in Photoshop or whatever editor you prefer.
This solution means you don't have to deal with the z-index issues and makes for more hack-free and semantic mark-up, although you do have a few containers. Hope this helps :)