At my site on the first page i have two images put together so it looks like a sunset. I want to my logo to go down between them as if it was the sun, but i cant make this happend. The logo is currently at the second page of the site
Heres i the html:
<div id="intro">
<div id="introbaggrundbagved"></div>
<a name="section1" class="section">SECTION 1</a>
<div id="logo">
</div>
</div> <!--#intro-->
And the css:
#intro{
background: url('images/introforan.png') no-repeat center;
height: 900px;
margin: 0;
position: relative;
z-index: 3;
}
#introbaggrundbagved{
background: url('images/introbagved.png') no-repeat center;
height: 900px;
width: 1440;
margin:0;
position: relative;
}
#logo{
background: transparent url('images/logo.png') no-repeat center;
width: 600px;
height: 600px;
position: relative;
margin-left: 420px;
margin-top: 100px;
z-index: 2;
}
You need to take the #logo div out of its parent element #introand give it a z-index that is larger than both of its siblings— then wrap all of the header elements into an #intro-wrapper div. In addition, I would then position the #logo element using position: absolute, instead of relative, this will give you more granular control on it's placement without disturbing the document flow of the surrounding elements.
Also, it appears that you have the function parallaxScroll updating the top property of #logo, which will prevent the element from being placed between your two images.
function parallaxScroll(){
var scrolledY = $(window).scrollTop();
$('#logo').css('top','+'+((scrolledY*.376))+'px');
....
}
Related
I cannot use text align to move the pages in the navbar to the right while using display: inline-block.
https://www.w3schools.com/w3css/tryw3css_templates_architect.htm
I want to only use display: inline-block to make a navbar like the one shown in this link (the logo to the left and the pages/links to the right)
You can wrap the page links in their own element and position that element absolute to the right.
In the snippet below I use a <ul> for the page links and position it to the right.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
ul, li, a {
display: inline-block;
}
ul {
position: absolute;
right: 0;
padding: 0;
margin: 0;
}
a {
padding: 10px;
background-color: lightslategray;
color: #fff;
text-decoration: none;
}
<nav>
<b>BR</b> Architects
<ul>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
What i have
If I have two images (one includes frame and another includes the picture),
My question
can I show it in the same image by using Polymer? I think it looks like bitmap in android and I want to do in web but I really don't know how
Here is one example on how to place a picture over a picture. Since I didn't have any pictures i "faked" them with span tags. Plunkr
<style>
.pic-one{
background: red;
position: absolute;
height: 30px;
width: 30px;
}
.pic-two{
background: blue;
position: absolute;
margin: 5px 5px;
height: 20px;
width: 20px;
}
</style>
<div class='container'>
<span class='pic-one'></span>
<span class='pic-two'></span>
</div>
It's my problem:
http://jsfiddle.net/Vqa7v/
body {
background: url("http://imgs.ir/imgs/201307/1336_menu.png") no-repeat scroll center top transparent;
}
#menu {
display: block;
height: 193px;
margin: auto;
position: relative;
top: 32px;
width: 400px;
}
nav {
left: 0;
min-width: 426px;
position: absolute;
text-align: center;
top: 79px;
}
nav a {
padding: 5px 7px;
color:white;
}
<div id="menu">
<nav>
HOME
SERVICES
ABOUT
BLOG
CONTACT
</nav>
</div>
At first, the menu is fit to background position, but make the Result window smaller & smaller to see when the menu get out of the background position.
How to avoid that and fix menu to background image position? (I want to have a menu in center of my website on its background image)
Had some real trouble understanding what you were looking for, but is this it? Basically it needed a whole bunch of changes that I've made to nav etc.
http://jsfiddle.net/robsterlini/Vqa7v/2/
I solved it by my self: http://jsfiddle.net/Vqa7v/4/
.menu {
position:absolute;
top: 20px;
left:15px;
}
nav {
text-align: center;
position:absolute;
width:100%;
height:100px;
background:url('http://upload7.ir/images/27569577012963327319.jpg') no-repeat;
min-width:500px;
}
nav a {
padding:0 5px 0 0;
line-height:35px;
color:oldlace;
text-shadow:0 0 2px #000;
text-decoration:none;
letter-spacing:1px;
}
<nav>
<div class="menu">
HOME
SERVICES
ABOUT
BLOG
CONTACT
</div>
</nav>
Small the RESULT window width and see the menu is fixed to the background image.
I'm trying to center my content div. It's set to 100%, and the div is contained in body, which is also set to 100%. I have a max-width: 1400px because I don't want my content to stretch more than that if the screen resolution is higher. The thing is, it doesn't work using margin: auto. My content stands on the left, uncentered on screen wider than 1400px.
If I delete the max-width, everything is perfectly centered on wide screens, but the content is stretched to the the whole screen...
#content {
width: 100%;
height: auto;
position: absolute;
top: 400px;
margin: 0 auto;
margin-top: 50px;
display: none;
max-width: 1400px;
}
Easiest way to achieve this, is to set the width property to the max width you need, and add max-width: 100%;. This will prevent it from being bigger than 100% but still go up to the max width. Also, you should remove the absolute positioning:
JS Fiddle
You can use the transform technique, which doesn't require extra mark-up or media queries.
#content {
position: relative; /* 'fixed' will work also. */
max-width: 500px; /* Your required width here. */
width: 100%;
left: 50%;
transform: translateX(-50%);
}
Here's a demo https://jsfiddle.net/matharden/6uduf7av/
Use Flexbox...
Put this classes in the parent element (the body):
The HTML
<body class="p-flexbox flex-hcc">
<!-- The content -->
</body>
Where:
p-flexbox means parent-flexbox
flex-hcc means flexbox-horizontal-center-center
The CSS
.p-flexbox {
display: -webkit-box;
display: -moz-box;
display: box;
}
.flex-hcc {
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
Cheers,
Leonardo
I'm working some css and encountered a weird problem. Two elements are inline-block staying in the same container. Both of them have the width, height, and line-height.
But if we set the first element an empty content, the layout will be disordered (vertical alignment).
You can see the problem here
<div class="part">
<div class="foo"></div>
<div class="bar">bar</div>
</div>
.part {
width: 400px;
height: 80px;
background-color: #ddd;
margin-bottom: 100px;
}
.foo {
display: inline-block;
width: 100px;
height: 80px;
line-height: 80px;
background-color: red;
}
.bar {
display: inline-block;
width: 100px;
line-height: 80px;
height: 80px;
background-color: green;
}
I know empty content is always a bad smell of html code. But I just want to know why this is and how to solve this problem.
I found a similar question. People say we could use a   instead of empty content. Is this the only way we could solve it? Or we have other better solution?
Thanks.
use 'vertical-align: middle;' to the inline-block element
vertical-align: middle;
http://jsbin.com/ajexab/1/edit