I know there is like 100 of topics made and I've tried all 100's of them and I just can't get it to work, Aligning the image in the middle, if you check in to
http://one1.no-ip.org/index.php?hitta=tanto&page=search
you'll see that the logo is at the top of the screen and whatever I do I just can't make it align correctly. I'm sure something is interfering but I just can't find out what, I even made a fiddle to check if the method im using is working and it is
http://jsfiddle.net/UJATF/
Working example with the image in the middle of the div element
CSS
.logo{
background:white;
position:absolute;
width:105px;
height:90px;
line-height:90px;
left:180px;
margin-top:20px;
line-height:90px;
text-align:center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:inset 0px 0px 0px 1px white,inset 0px 0px 10px -4px black;
z-index:1000;
overflow:hidden;
}
.logo img{
vertical-align:middle;
max-width:90px;
max-height:40px;
}
HTML
<div class="logo">
<img src="http://www.tantobil.se/images/logo.png">
</div>
so all help would be very much appreciated
Define your anchor link display : inline-block and give to margin-top
as like this
.logo > a {
display: inline-block;
margin-top: 22px;
}
Results is
--------
Is your are using dynamic with of img than used to this
Second option is
.logo > a {
display: table-cell;
height: 90px;
text-align: center;
vertical-align: middle;
width: 105px;
}
Since you're using fixed heights in your css, why don't you just use simple math to determine the top position of the logo?
.content is 121px high,
.logo is 90px high
The difference is 31px, which means you need a top offset of 15.5px
Also, set the .content to position: relative so you position the logo relatively to .content's top.
Related
I have two divs on the top of the webpage. I just want to overlap the shadow of the top div to the following one. Absolute and relative positioning completely changed the positions/places of divs by either expanding or fixing position. Is there a line of code that just achieves to decide which div will be overlapped and which div won't be without changing their positions? If there is not, how I can do this with posititioning?
My top div:
div#divSlogan{
background-color: #FFBD01;
width: 50%;
margin-left: auto;
margin-right: auto;
margin-top: -1.15%;
padding: 0.1%;
-moz-box-shadow: 0px 0px 10px 2px #888888;
-webkit-box-shadow: 0px 0px 10px 2px #888888;
box-shadow: 0px 0px 10px 2px #888888;
}
The following div:
div#menu{
text-align: center;
font-size: 120%;
background-color: #FFA700;
padding: 0.1%;
height: 20%;
width: 49%;
margin-left: auto;
margin-right: auto;
}
My webpage:
All in all, I want to put the shadow of the top div (which is written Listen. Enjoy..) to the following below div (which is menu). How can I do this?
You don't need to use absolute positioning for this .I'm not sure why relative positioning didn't work for you . To use z-index you need to use absolute , relative or static position .
Here is the working code , replace the div#menu by this in your css file .
div#menu{
text-align: center;
font-size: 120%;
background-color: #FFA700;
padding: 0.1%;
height: 20%;
width: 49%;
margin-left: auto;
margin-right: auto;
position:relative;
z-index:-1;
}
Edit 1:
You have to use position relative here because z-index won't work otherwise .
Here is a JSFiddle of this working: http://jsfiddle.net/pezrwv0z/3/
Edit 2 :
Other things that can be improved in the code .
Instead of margin-left:auto ; margin-right:auto; use
margin:0 auto ;
To center the div .
height:20%;
You can't give height a value in % , use pixels (px) instead . eg: height:50px;
Edit 3 :
It seems that links don't work in a container with negative z-index .
Here is the updated fiddle . http://jsfiddle.net/pezrwv0z/3/
Try changing div#menu to - should do the trick:
div#menu {
text-align: center;
font-size: 120%;
background-color: #FFA700;
padding: 0.1%;
height: 20%;
width: 49%;
margin-left: auto;
margin-right: auto;
/* add these */
margin-top: -10px;
/* z-index: 3; - this was the wrong way around, ignore this line :) */
z-index: -1;
}
Edit: not too sure on the margin-top - might be more appropriate to change margin-bottom on the slogan div - again, a negative value of your choosing.
Pretty new to html and css and i'm just having the problem described in the title. My nav is pushing down div with the id main.
nav{
width:120px;
float:left;
margin:0px 5px 0px 5px;
#main{
display:inline-block;
padding: 1em;
float:left;
position:relative;
min-width: 900px;
Any help is appreciated, cheers.
edit:
Hi guys, maybe i should explain it better. On the page there is a nav to the left and a div to the right of it. When the windows width is made smaller the div to the right is being pushed below the nav instead of stay where it is and it's content being displayed off the screen.
You have explicitly told your element to behave like that. When you set min-width and a width in pixels, you are telling your elements to stay the same size no matter what happens. Remove min-width and set width to a percentage value like 1% instead of 50px like this:
nav {
width: 50%;
background: red;
height: 50px;
float:left;
}
#main {
display: inline-block;
height:50px;
float:left;
position: relative;
width: 50%;
background: black;
}
body {
margin: 0;
}
<nav></nav>
<div id="main"></div>
I'll start by saying that my css skills are very weak.
Here is the site, and I was trying to add some margins to this background so I can see all the content. I now understand that I am not able to use margins on a background, so what are my options here?
Here is my HTML
<body>
<div id="container">
<nav id="navigation">
<ul>
<li>Homepage</li>
</ul>
</nav>
</div>
</body>
and here is my css
body {
background: url('images/prices.jpg');
min-height: 100%;
height: 100%;
}
#btn {
color: #FAF3BC;
background: #4FB69F url('images/texture.png') no-repeat right bottom;
padding: 15px 30px;
margin: 150px 0px;
border-top: 5px;
border-radius: 25px;
text-decoration: none;
text-transform: uppercase;
}
I am also having issues with the homepage button, I would like some room there as well, but I've tried couple of things like padding and margin and was not able to do it...
I would appreciate any help .... here is the page live, if you like to take a peak http://brewstahs.com/menu.html
I know why your css is not working. The most basic use of CSS is to create a layout, but even though your DOM contains div representing container and footer, the height occupied by each is
equal to the height of its content(because you have not provided any height to the div containers).In short,
margin : 150px 0px does not work because the parent container(nav) does not have that height to provide the margin to it. So provide a height to nav and div and it will work.
Use tools like Firebug to see your layout and see where you're going wrong.
All the best!!
Maybe you should try with background-position attribute:
http://www.w3.org/wiki/CSS/Properties/background-position
What do you want to do?
In case of moving the button, try
margin-top: 50px; for example in the css of btn. This way, the button is moved 50pixels to the bottom. Margin-left moves the button to right, ...
if you are trying to move the button down then you need to first put it in a wrapper
if not try this .
body {
background: url('images/prices.jpg');
min-height: 100%;
height: 100%;
}
#navigation {
position:relative;
display:block;
margin:40px 0px 0px 0px;
padding:0px;
width:auto;
height:auto;
}
#navigation ul {
display:block;
position:relative;
margin:auto;
padding:0px;
}
#navigation ul li {
list-style:none;
}
#btn {
color: #FAF3BC;
background: #4FB69F url('images/texture.png') no-repeat right bottom;
padding: 15px 30px;
margin: 150px 0px;
border-top: 5px;
border-radius: 25px;
text-decoration: none;
text-transform: uppercase;
}
and about your background you can try one thing. Have a looping background texture similar to the one you have right now with background-repeat:repeat; and then put the main background image above it with z-index and centered if required. Just to give you a simple example
body {
background-image:url('images/loop.jpg);
background-repeat:repeat;
}
#backgroundimg {
background-image:url('images/prices.jpg);
background-repeat:no-repeat;
display:block;
position:relative;
width:980px;
height:700px;
margin:auto;
padding:0px;
}
hope this helps :)
I have the following code. It's essentially a simple grid view that uses <ul> and <li> tags. I wanted to make it responsive such that the <li> elements are always centered no matter what the width of the screen is. How can I do so? I've tried setting the padding-left and padding-right as percentages, however it doesn't work. Right now if I adjust the width of the screen it doesn't always stay centered.
Simply add text-align: center to the parent <ul>
Fiddle
I'll extend on the previous answer...
Also center the UL
#home-listing {
text-align: center;
width:80%; /*Pick Your Own Width*/
margin:16px auto;
}
http://jsfiddle.net/Zd9Gf/3/
It depends on what you mean by centered. In order to center the entire list you could do something like:
ul {
padding: 0px;
width:500px;
margin:auto;
}
See this jsFiddle.
add this class:
ul.search-results{
width:100%;
}
and update this class:
ul.search-results li {
border-right: 1px solid #cecdcb;
border-bottom: 1px solid #cecdcb;
border-top: 1px solid #fff;
list-style: none;
padding: 0;
display: inline-block;
vertical-align: top;
width:60%;
margin:0 20%;
text-align:center;
}
I'm trying to display two <div> elements on the same line, but in the center. To center them, I had to set margin:auto; However, in order to get two on the same line, I had to do any one of the following:
Set display:inline; (which cancels out the centering)
Set float:left; to both (which cancels out the centering)
Set display:table-cell; (which cancels out the centering)
What can I do to get both divs to be in the center? Or should I use something else to do this? I've tried <span> but the inline property does the same as stated above for setting display:inline;.
EDIT: Here is the CSS for the <div> elements I'm trying to apply this to:
.homediv {
background-color:#F7F7F7;
border:1px solid #FFFFFF;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
/* width must be defined in the actual element because it can have various sizes */
-webkit-box-shadow: 0px 0px 8px #888888;
-moz-box-shadow: 0px 0px 8px #888888;
box-shadow: 0px 0px 8px #888888;
margin:auto;
text-align:center;
padding:4px;
}
In the HTML file, I only add a width for each element, and now I'm trying to add different display properties that will fix the issue.
The "wrapper" idea suggested below seems to be the only solution, but with this CSS maybe there's something I'm doing wrong?
SECOND EDIT: As one final addition, what would be the best way to put space between these two <div> elements, as they have box shadows and I don't want them to be squished together.
You can do this, but you'll need an explicit width on your outter div.
Try this example:
.outer {
width: 200px;
margin: 0 auto;
}
.inner1 {
float: left;
background-color:
red; padding: 20px;
}
.inner2 {
float: left;
background-color: aqua;
padding: 20px;
}
<div class="outer">
<div class="inner1">Hi</div>
<div class="inner2">Stackoverflow</div>
</div>
Hope this helps!
Wrap the two elements in another element. Set display:inline-block; for the inner elements and margin:0 auto; for the outer one.
Have you tried display: inline-block;? An example of the HTML you are working with would help... put one up at http://jsFiddle.net if inline-block doesn't solve your problem.