having some CSS difficulties and hoping someone can help me out.
I am trying to get the navbar to expand out on both sides of the page (filled with a solid color), but have a transparent space where I can squeeze in my logo (as seen in the image below).
My page background is an image, so I can't just fill the {Logo} cell, with a bg colour - If it helps at all, I am also using Twitter Bootstrap.
Please can someone help me out with this. Been stuck for a a while now. :S
I was referring to something like this in my comment http://jsfiddle.net/slash197/Eh2xL/1/ This is just a proof of concept, you need to change the values and sizes.
HTML
<div class="bg">
<div class="nav">
<div class="logo">Logo</div>
</div>
</div>
CSS
body, html {
height: 100%;
}
.bg {
background: url("http://slashwebdesign.net/green-nature-wallpaper2.jpg") no-repeat center top;
width: 100%;
height: 100%;
padding: 30px 0px;
}
.nav {
background: url("http://slashwebdesign.net/nav.png") no-repeat center top;
height: 35px;
}
.logo {
margin-left: 100px;
color: #ffffff;
}
Maybe you could do something like this (no image needed, just pure css) :
http://jsfiddle.net/Jh4ya/6/
You have the right side of your navbar positioned as absolute :
#right {
left: 250px;
right: 0px;
position: absolute;
height: 30px;
background: #469;
top: 0px;
}
I think it is one of the most cleanest way to do it. Hope it helps
EDIT :
It may faces some widths issues. As a workarround, you could use display: table-cell; and display: table; properties. See this fork : http://jsfiddle.net/qxVce/
Related
This is my first time using the service, so I'll try to be specific.
I'm trying to create a land page for my domain, but when I place the logo for the top menu, and add another element, the element does not respect the space of the logo, and it stays in front of the logo.
Here's the CSS I'm using:
#header {
width: 100%;
padding: 5px 0;
background: #b20000;
}
#header .hwrap {
display: block;
width: 980px;
height: 40px;
margin: 0 auto;
}
#header .menuLogo {
display: block;
width: 205px;
height: 70px;
background: url(menu_logo-70px.png);
text-indent: -9999px;
margin-bottom: -30px;
}
And here is an excerpt of the HTML I'm using:
<body>
<div id="header">
<div class="hwrap"><h1 class="menuLogo">fhtgames.com</h1>Random text</div>
</div>
</body>
Fairly simple.
EDIT: What I want is the logo to overflow the menu bar, and add the menu options to the right of the logo, still inside the .hwrap element. I used the logo with an <h1> element and placed the image as a background to avoid the image to be right-clicked and be saved.
But when I try to add the menu and the link to the logo, I notice that Google Chrome renders the page with the logo link for the full width of the .hwrap element, and adding anything else, makes the logo to stay behind the new elements.
Here's a link of the screen: http://img.fhtcentral.com/stack/screen001.png
I am using an HTML5 Reset stylesheet (found here) and I'm pulling the latest jQuery library from Google servers.
I've done this lots of times before, without any problems whatsoever, so I really don't know what am I doing wrong. I am sorry if this looks completely noobie question, but I just can't see the mistake.
Thank you for you time.
EDIT: The problem has been solved. The answer is right below. Thank you all for your elp :D
The text appears above the logo, because you have set the logo image as a background. So html intends that you want, as the word says, the image as background!
To avoid this I guess you have set the display: block to your h1.menuLogo. The right way would be display: inline-block.
#header .menuLogo {
display: inline-block;
width: 205px;
height: 70px;
background: url(menu_logo-70px.png);
text-indent: -9999px;
margin-bottom: -30px;
}
You can find a working fiddle right here.
The rest is about adjusting with margin and padding.
For further information about your problem you can read about the difference of block/inline-block here.
If you need other suggestions please let me know!
Best regards, Marian.
Hope this help you.
#header {
width: 100%;
padding: 5px 0;
background: #b20000;
overflow:hidden;
position:relative;
}
#header .hwrap {
display: block;
width: 980px;
margin: 0 auto;
color:#fff;
}
#header .menuLogo {
display: block;
width: 205px;
height: 70px;
background: url('http://jsfiddle.net/img/logo.png') no-repeat rgb(249, 153, 5);
text-indent: -9999px;
overflow: hidden;
line-height: 1;
margin: 0;
padding: 0;
}
JSFiddle Link.
The vertical repetition of the background image in both sidebars on each side of the page stops where the computer screen ends, not where the page ends. As you can see, I have already tried to make all parents height: 100% in CSS, but it doesn't work. How do I make the image repeat itself till the bottom of the page?
HTML:
<body>
<div class="sidebar" id="sidebar1"></div>
<div id="content">
</div>
<div class="sidebar" id="sidebar2"></div>
</body>
CSS:
html, body {
min-height: 100%;
min-width: 100%;
}
#content {
min-height: 100%;
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.sidebar {
min-height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
#sidebar1 {
background: url(image.png) repeat-y bottom left;
background-size: 125px 125px;
}
#sidebar2 {
background: url(image.png) repeat-y bottom right;
background-size: 125px 125px;
}
Here's a similar question with a very detailed answer which suggest to use a css3 feature called Viewport Percentage Length as in :
height:100vh;
Please refer to that answer which includes explanations on when this can be used and what browsers support it, to see if it can help to you. There are other answers worth a look to achieve the same kind of effect without setting the height.
you can solve it with javascript (jQuery). resize your sidebars after page loaded. for example:
$(document).ready(function(){
if($('#content').height()>$('#sidebar1').height()){
$('#sidebar1').height($('#content').height());
$('#sidebar2').height($('#content').height());
}
});
(I didn't try it, but I think it works.)
I have this landing page. I'd like the email to be a link to mailto:info#domain.tld.
I tried to use a map (usemap="#mail" on body and then map name="mail">) but it doesn't work. I tried also with a blank transparent png image (to set the usemap to) but the link isn't clickable.
How can I achieve the area of the email to have a link upon it? Of course it should work on different resolutions.
Why don't you just render the email link as text? It looks like it can be similar to Open Sans: http://www.google.com/webfonts/specimen/Open+Sans
You could do something like this:
ADD CSS:
div#mail {
margin-left: 67%;
margin-top: 31.8%;
overflow: hidden;
width: 16%;
}
a {
color: transparent;
}
ADD HTML:
<div id="mail">info#gioiellidisapone.it</div>
Demo: http://jsfiddle.net/fXats/
It's not perfect, but maybe it's good enough. :)
This is how I modified your page directly using Inspect element, and the link stays on top of the image text. This is another option, but has fixed width and height to support the positioning of the email.
<body>
<div style="
width: 1430px;
position: absolute;
border: 1px solid #000;
height: 700px;
background-image: url(home2.jpg);
background-repeat: no-repeat;
background-position: top center;
display: inline-block;
"><a href="#" style="
position: relative;
top: 450px;
right: 294px;
display: inline-block;
float: right;
">Info#gioiellidisapone.it</a>
</div>
</body>
I'm trying to set quite a complex border image to my website. I can't make it a background-image because it's actually a border for a slide and the slide content has to go UNDER the border when it actually slides, and with background image I assume the content will just go above it.
So, basically I need help how to make this a border image for a div maybe. OR if there is a better approach then making this a border, let me know please.
Thank you.
Doing a transparet png image is not html, you need to do it with a software such Photoshop or Gimp else you can do it with messing around with divs
<style>
.screen {
height: 422px;
width: 820px;
}
.back {
position: absolute;
height: 422px;
width: 820px;
background-image:url('test.png');
}
.content {
position: absolute;
height: 320px;
width: 672px;
margin-left: 73px;
margin-top: 56px;
border-radius: 50px;
overflow:hidden;
}
</style>
<div class="screen" >
<div class="content" >
put here what ever you want to put inside
</div>
<div class="back" ></div>
</div>
this work with me with your image
You could use the before/after psuedo elements to attach your unusual "border" as a background image.
div.slide {
background: yellow;
position: relative;
}
div.slide:before {
display: block;
content: " ";
position: absolute;
width: 100%;
height: 100%;
background: url(slide-bg.png) no-repeat;
background-size: 100% 100%;
z-index: 1;
}
http://jsfiddle.net/kTgJJ/
The demo uses an opaque to transparent gradient so you can see the effect. Your image just needs to have transparent areas for the text to show through, and opaque areas where it shouldn't. Add paddings to the .slide as appropriate.
I have a problem where a div tag that is supposed to show on hover is hidden behind an image. This is how it looks:
I tried to remake it with jsfiddle: http://jsfiddle.net/Gwxyk/21/
I tried position relative also on '.image-options' but did not turn out right. Also how do i float the small orange box to the right side? I tried float: right; but it did not respond.
Help would be appritiated.
Some arbitrary code since stackoverflow asks for it (its in jsfiddle):
.image-options {
float: right;
}
I'm struggling to understand exactly what you require to happen. However have you tried using the z-index property? Both the div and the image will need to be positioned relatively or absolutely, then apply a higher z-index to the element that you want to appear in front. So you could apply z-index: 1 to the image and z-index: 100 to the div.
Is this what you are expecting?
Add top:0 to .image-options and interchange the place of image and inner div.
DEMO
Here you go, i think this will help you out.
http://jsfiddle.net/dmP2x/
You dont have to do this with jQuery, use CSS as much as you can to tidy up your code.
css:
.testclass {
width: 105px;
height: 80px;
overflow: hidden;
display: inline-block;
border: 2px solid rgba(140,140,140,1);
}
.image-options {
width: 10px;
height: 10px;
border: 2px solid rgba(255,128,64,1);
position: absolute;
top: 10px;
left: 25px;
overflow: none;
display: none;
}
.image {
background-image: url('http://www.placehold.it/105X80');
width: 105px;
height: 80px;
position: relative;
}
.image:hover .image-options {
display: block;
}
html:
<div class="testclass">
<div class="image">
<div class="image-options"></div>
</div>
</div>