I have a 'main_menu' div which contains a background-image that is repeating on the y-axis. Above this div I have another div which is used for a header. The problem is that the header div has an image which is about 75px in height. I would like to start the text in main_div about 50 px higher from where main_div's background-image actually starts.
I was thinking of something like:
position:absolute; top:-50px;
This doesn't really work.
The question is how do I move the text up, while keeping the background-image at the normal spot.
Thanks
{EDIT}
Here's the CSS
.menu_main
{
background-image:url('../menu_main.jpg');
background-repeat:repeat-y;
width:173px;
padding:5px;
}
.menu_header
{
background-image:url('../menu_header.jpg');
text-align:center;
width:173px;
height:65px;
padding:5px;
}
This is the html
<div class="menu_header">Some Header</div>
<div class="menu_main">
<ul>
<li>Educational Objective</li>
<li>Projects</li>
<li>Class Preparation</li>
<li>Testimonials</li>
</ul>
</div>
So as you can see the header is pretty tall. So I'd like to start the text in the menu_main div about 50px higher up
Use a negative top margin.
.menu_main ul {margin-top:-50px;}
You could move it like you were doing with absolute positioning and move the background down like so:
background:url(someimage.png) repeat-y left 50px;
this will move your bg image so it starts 50px down.
I might be able to help more if you provide a screenshot or more code or a live example...
You could style your UL specifically:
.nav
{
position: relative;
top: -50px;
}
and
<ul class="nav">
...
Or perhaps put the UL in another DIV class="nav".
But you can move the background down (for example by 5 pixels):
background-position: top 5px;
Related
I'm having trouble with placing an image in the correct spot in my CSS.
I have links in the left side of the page and would like an image to the top right of the nav bar.
Unsure on how that's done.
like this:
HTML
<nav>
<img src="image.png" alt="image">
</nav>
CSS
nav{
position:relative;
}
nav img{
position:absolute;
top:0;
right:0;
}
You can place it where you want with the bottom, top, right and left properties.
For example, to place the image 10 px from the top and 20 px from the right you can write the following:
top: 10px;
right: 20px;
I'm trying to make a list of "fake video" which is actually an image with a play icon on it. My idea is set the play icon as background, then bring it to front of the image using z-index, however, no matter what I do the, icon still stay behind any content within the tag.
This is my code:
HTML:
<ul>
<li><img src="http://www.mytinyphone.com/uploads/users/fairytail123/574523.jpg"/></li>
<li>test</li>
<li>test</li>
</ul>
CSS:
li {
font-size:25px;
background:url(http://www.chicagotribune.com/hive/images/video/play_icon_carousel.png);
background-repeat:no-repeat;
z-index:99999;
}
Here is a jsfiddle:
http://jsfiddle.net/ZNeFu/
You can use a pseudo element (or another absolutely positioned element) to achieve this.
JSFiddle Demo
HTML
<ul>
<li><img src="http://www.mytinyphone.com/uploads/users/fairytail123/574523.jpg"/>
</li>
</ul>
CSS
li {
font-size:25px;
position: relative;
display: inline-block;
}
li:before {
position: absolute;
content:"";
width:100%;
height:100%;
background:url(http://www.chicagotribune.com/hive/images/video/play_icon_carousel.png);
background-repeat:no-repeat;
background-position: center;
background-size: contain;
}
every part of the page have have z-index usually the default is 0.
so any time you want to make something go in front you use z-index:1;
and anytime you want to take something to the back you use z-index:-1;
lets say you have to images one over the other ore anything else you can use z-index:2; or more.s
the integer mean what layer is the "item".
and also all of it depends on the position. in your case i would use absolute.
hope that was helpful to understand better layering properties.
add position:absolute; that should do it
Or whatever position you require.
It's the position that allow the z-index to "move" the image.
How can I get two divs aligned in the same "row" on a website?
I have been working on this page, and I have tried to get a menu that floats to the left side of the website and then the content to the side of that.
I have tried using this as the div's CSS:
.menu
{
width:25%;
height:auto;
margin-bottom:2px;
float:right;
position:fixed;
}
.content
{
width:70%;
height:50%;
margin-bottom:2px;
padding: 25px;
float:right;
}
The page is not displaying them side-by-side and floating, but instead how most website such as: http://www.exorithm.com/, where they have a sidebar and an area for content.
Can anyone help?
All my code: http://pastebin.com/KqYkrweE
I think the problem is that you have position:fixed on the menu. If you use position fixed or absolute, it removes the element from the document flow, so float:right becomes irrelevant.
Edit: Here is a better example of achieving the same result
Also bear in mind that you are using percentages for width and then applying a pixel based padding. This could lead to the elements becoming too wide for the page and displaying one below the other.
70% + 25% = 95% with 5% left over.
If the 5% is less than 50px (making the whole width 1000px) then your columns will total greater than the entire width. A better approach would either be to use percentage based padding (not 100% sure how well this works) or to apply your padding, margins and borders to elements inside the floated columns, like so:
// CSS
.leftCol {
float:left;
width:25%;
}
.rightCol {
float:left;
width:75%;
}
.content {
padding:25px;
}
// Markup
<div class="leftCol">
<div class="menu">
Here is my menu
</div>
</div>
<div class="rightCol">
<div class="content">
Here is my content
</div>
</div>
Edit 2:
If you want your menu to stay on screen as the user scrolls down, then position:fixed will do the job. I looked at your page and it looks like you have a fixed width navigation of 206px. Therefore your styles for the existing markup would be better off as something like:
// CSS
.menu {
position:fixed;
left:0;
top:0;
width:206px;
}
.content {
padding: 25px 25px 25px 231px;
}
You are floating right instead of left.
Your .content has a padding of 25px on each side, which means 50px overall. Since your menu is 25% and the content 70%, if your container is smaller than 1000px you run out of space.
I have icons. Problem is they do not vertically align to the middle like everything else (text, input). My html structure is something like this:
<div class="i_contain_things">
<div class="i_float_left"><checkbox/></div>some text
<div class="i_float_right">
<span class="sprite icn1">my sprite</span>
<span class="sprite icn2">my sprite</span>
</div>
</div>
.i_contain_things
{
clear:both;
margin-bottom:10px;
vertical-align:middle;
}
.i_float_left
{
padding:0 3px 0 3px;
float:left;
display:inline-block;
}
.i_float_right
{
padding:0 3px 0 3px;
float:right;
display:inline-block;
vertical-align:middle;
}
.sprite
{
display:inline-block;
background: url(../img/icn_sprite_1.png);
width: 16px;
height: 16px;
vertical-align: middle;
}
.icn1{background-position:0,0}
.icn2{background-position:0,16px}
my sprite is always aligned to the bottom, while the checkbox and text are in the middle.
This is not going to work, a span is an inline element so as soon as you remove the text, it will collapse; height and width won´t do anything.
I´m not sure what you want to achieve exactly, but it seems to me that you need to put your sprite as a background to one of the elements you already have (like .i_contain_things), and not put it in a separate element.
If you do need to put it in a separate element, you need to make sure it´s a block level element (for example a div or a span that's set to display:block). That element needs to be positioned where you want it.
You need to specify the background-position property. Like so:
sprite { background: url(../img/icn_sprite_1.png) 50% 50% no-repeat;
Where the first number is axis-x and the second number is axis-y You can use percentages, pixels, or keywords (right, top, center) to declare the position of the background image.
http://www.w3schools.com/css/css_background.asp
Hi I have a container which has a width of 1150px. Now I have this other mainmenu, with width: 100% that I want to place inside the container. But then ofcourse it only get 100%(1150px) but I want it full width from side to side, so it should ignore the setted width only for .mainmenu
I tried position: absolute which made it all wrong and weird
#mainmenu
{
height: 37px;
width: 100%;
margin: 0px auto;
background-image: url(../images/mainmenu_bg5.jpg);
}
Why is the menu in the container in the first place? If you want the menu to span the full width yet the contents of the container are only 1150px I think it is by definition not right to put the menu in the container. Consider restructuring your document. This is an example, I do not have your full code:
<body>
<div id="page">
<div id="header" style="background:Blue;">
header header header
</div>
<div id="mainmenu" style="background:Green;">
menu menu menu menu
</div>
<div id="container" style="width:1150px;margin:auto;background:Red;">
container container container
</div>
</div>
</body>
And if you want the contents of the header and menu to span no farther than 1150px which I think is what you want then consider this:
<head>
<style type="text/css">
.pagewidth {
width: 1150px;
margin: auto;
}
</style>
</head>
<body>
<div id="page">
<div id="header" style="background:Blue;">
<div class="pagewidth">
header header header
</div>
</div>
<div id="mainmenu" style="background:Green;">
<div class="pagewidth">
menu menu menu menu
</div>
</div>
<div id="container" class="pagewidth" style="background:Red;">
container container container
</div>
</div>
</body>
If your container is fixed-width, but you want a menu which has a background at full page-width, then you can have the menu background as a positioned background of html, and maintain the same HTML code. This will make the menu's background "bar" cover the whole page width.
Example of this method: http://templates.arcsin.se/demo/freshmade-software-website-template/index.html
How to do this: use positioned backgrounds:
http://www.w3schools.com/css/pr_background-position.asp
css is below, but sometime it depend from the content inside:
#mainmenu
{
height: 37px;
width: 100%;
margin: 0px;
position: relative;
background-image: url(../images/mainmenu_bg5.jpg);
}
This is a jQuery solution:
$('#mainmenu').width() == $('#container').width();
To get a background image to simulate the menubar spanning the entire width of the page you need to apply the #mainmenu background to the body or a container div like so:
body {
background: url(YOURIMAGE) repeat-x left 64px;
}
The 64px needs to be how far the #mainmenu is from the top.
If the body already has a background image then you will need another div just inside the body containing everything else. If you have no control over the HTML then using javascript to insert a div that will either wrap all the content or get rendered behind it (using position and z-index.)
position:absolute is the best way to get this while keeping the background in #mainmenu. In fact, it's the only one I can think of off the top of my head. Without javascript, of course. Everything else will require changing HTML or moving the background property to a different place.
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
Because #mainmenu's width:100% then will become 100% of the viewport rather than the containing block. (Unless a parent is position:relative or overflow:hidden)
So when you say it "got all weird", I assume that's because of other things on the page. Both absolute and float take items out of the normal document flow. So things below the menu can & will end up underneath it.
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
#mainmenu + *
{
padding-top:37px;
}
/* Exact selector not recommended due to poor browser support */
The solution to that is, basically, applying 37px of margin or padding to the first thing after #mainmenu. You'll also be unable to center absolutely positioned elements using margin:0 auto, but if you want it spanning the full width of the viewport, that shouldn't be a concern...If you want to center the live sections of the menu, of course, you'll need some sort of descendant to center:
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
#mainmenu > *
{
margin:0 auto;
}
/* Exact selector not recommended due to poor browser support */
/* & more properties needed if descendant is list with floated <li>s */
#mainmenu + *
{
padding-top:37px;
}
/* Exact selector not recommended due to poor browser support */
But there are lots of things you'll see change in relation to other things on the page with position:absolute. So to troubleshoot that I really need to know more about the other things on the page.
You may find another solution, but if you don't -- post a page I can look at & I may be able to help you with the weirdness you experienced with absolute positioning. That is, if it will work with this particular layout.