I am trying to look at this page in Firebug:
http://128.48.204.195:3000/
What I am trying to do is make the top-right area with login/signup be all the way to the right, but I am not sure how to do it. I tried to I surround that stuff with its own div called site_login but it didn't seem to do the trick.
Any idea how to put that stuff on top right further to the right so it looks a little more proportional and symmetrical?
Here is what my css looks like:
.banner .site_login {
height: 20px;
position: absolute;
float:right;
right: 0.5em;
top: 0.5em;
color: #fff;
}
.banner .site_login a
{
color: #fff;
text-decoration: underline;
}
.banner .site_login a:hover
{
color: #ff0;
}
Thank you!
Looks like you accidentally commented out the closing div tag </div>
Get that back in there (un-comment it), then position it absolutely (you'll always want it in the same place):
.site_login{position:absolute;width:300px;text-align:right;padding:10px;}
.banner{position:relative}
As Faust pointed out, you forgot your closing div tag </div>. Also, I added a float:right and it seems to work the way you are asking for. Check it out.
Related
Im trying to accomplish the next situation;
If got a h1 tag, and right of it i want a small line (separator.png)
But my image keeps crossing the h1 text..
http://i57.tinypic.com/2m30l51.png
I've got a example of how i need it to be;
http://themes.webcreations907.com/ninezeroseven/option-two/#prettyPhoto
Those titles: "Take a Look, Recent Works"
HTML is like this;
<div class="titleBar">
<h1 class="left"><span>DIENSTEN</span></h1>
</div>
CSS;
#diensten .titleBar{
background:url('images/sep.png') repeat-x;
background-position:center;
}
#diensten .titleBar h1{
display: inline-block;
}
If tried a lot of things, even copied the code from the original site, but actually i have nog idea what to do.. Can someone help me with it?
Thanks
UPDATE
So i've tried all the things you guys answered.
So far none of them are working for me..
First;
The background tag, smart idea but my page background is transparant.. So transparant on transparant won't work. And even if i make the background transparent, the line will shine trough it. Are there any solutions to this problem? Because its a easy way to do it with a background tag.
Second;
Paulie_D's solution, i actually don't understand it.. Not advanced enough is guess, tried copying the exact code and change the parameters so it fits in my coding, but didn't work.. Can you help me making it fit my coding?
Simply give your h1 element a background of its own which matches the background of the page.
#diensten .titleBar h1 {
background: #f00;
display: inline-block;
}
You can then space the line apart from the h1 element by introducing some right padding (which will extend the background past the end of the text):
#diensten .titleBar h1 {
...
padding-right: 10px;
}
Your div titleBar is around the h1 title, I don't think using inline-block will solve this.
You should just wrap all around a div :
<div class="titleWraper">
<h1>DIENSTEN</h1>
<div class="titleBar">
</div>
</div>
and your css like this :
#diensten .titleBar{
background:url('images/sep.png') repeat-x;
background-position:center;
display: inline-block;
}
#diensten .titleWraper h1{
display: inline-block;
}
You can get the same kind of style. But the thing, they used some background color around h1 tag to avoid to show the stripped line(used as a background for titlebar). If you are ok with the effect do the following. Add your css like below and check the jsfiddle below.
.titleBar{
background:url('http://themes.webcreations907.com/ninezeroseven/option-two/wp- content/themes/ninezeroseven/assets/img/theme/sep.png') repeat-x 0 55%;
background-position:center;
padding-top:0;
}
.titleBar h1{
display: inline-block;
background-color:#f2f2f2;
}
Jsfiddle link below..
http://jsfiddle.net/vapnF/
A pseudo element will work although it does require an additional span but you can dispense with the image if required.
Codepen.io Demo
HTML
<h1 class="left"><span>Some Text</span></h1>
CSS
h1 {
overflow:hidden; /* hides all extra pixels */
font-size:2em;
}
h1 > span {
diaplay:inline-block;
position:relative;
}
h1.left > span:after {
content: "";
position: absolute;
left:100%;
top: 50%;
height: 1px;
width:2000px; /* some really large number*/
background:red;
margin-left:0.5em; /* or remove and add padding-right to span */
}
Actually I'm new to web designing and I'm going to make my own social network and I'm using the amazing layout of Angelsmood.com music social network.
Everything is OK with designing except that I can't place the "Sign Up" button on the right place; it has a lot of margin on its right side. The problem is that there's no margin in my CSS code. Here's my code:
<div id="header_register">
Sign Up
<div>
Artists and their true fans are human angels.
Find them, connect with them and become one of them.
</div>
</div>
And Here's the CSS:
#header_register {
position: relative;
font-size: 12px;
}
#header_register a {
display: block;
height: 30px;
line-height: 30px;
background: ##810101;
color: #fff;
font-weight: bold;
font-size: 14px;
float: left;
text-decoration: none;
border: 1px #508F54 solid;
}
Please help me to fix this.
I made a fiddle and tried to fix your problem the best I could based on the information you gave us.
jsfiddle
Things I did... took your line-height out and moved the link after the div so you didn't have to use it... then I margin: 0 auto to center the <a> tag.
Instead of float: left;
I took it out added a width of the <a> tag so it did not span the width of the screen.
If you need this to function in a different way that I have illustrated ask and I will show you on the fiddle I posted.
Alrighty so I am attempting to create a header for a website I'm making, but I'm having a bit of trouble with padding some links out for my top level nav.
Basically what's happening is, if I have a long link name, it overlaps with another link.
I think this is something to do with the width but I'm not sure how I can fix it. I also really don't want to create a fixed width for the links, as I am wanting to make each text in the links 60px away from the previous.
HTML:
<nav id="top_navigation">
Home
Example1
Longtextjustbecause
Testpage3thingy
</nav>
CSS:
#top_navigation a {
display: inline-block;
height: 60px;
color: #3b3b3b;
font-family: Hero;
font-size: 26px;
text-decoration: none;
line-height: 60px;
padding: 0px 30px; }
Any help is greatly appreciated, thanks!
Yeah so it turned out to be the font that I was using for some reason. It doesn't appear to like padding in any circumstance very much.
I am currently finishing a site that the client wants to work on all browsers. However, there seems to be a CSS issue which I can not get around. The border around this page seems to start from the middle of the page, as opposed to surrounding the entire page. It works on all other browsers though. I am guessing that it is a float problem, but the #contact-form underneath has basically the same CSS applied to it but the border still surrounds it, while the #info seems to have broken out of the border.
The webpage in question is http://lunaskymoda.co.uk/contact-us/
The only validation error is with an unregistered keyword "Nextgen", but i doubt that is the problem. I have spent an entire day tackling this and cannot seem to come up with a reasonable explanation as to why this is happening.
the CSS for the possible HTML elements producing the error are:
#main #main-content {
border: 1px solid white;
display: block;
margin: 12px 0;
background: black;
}
.contact #main-content .info {
margin: 10px;
width: 300px;
font-size: 14px;
color: white;
float: right;
display: block;
}
You're not the first one to have issues with ie6 :)
The problem is of course the "clear: both" of the clear class not being honoured, so you need to hack it.
Here's a possible approach:
http://damienhowley.wordpress.com/2009/04/01/ie6-hack-replacing-clearboth/
You may also try to replace the <div class="clear"></div> by <br clear="all">.
I'd like all my content to flow around an image. To do this, I simply did
img#me {
width: 300px;
float: left;
margin-right: 30px;
}
This works for text wraping, but other elements go behind it. For example
<style>
h2 {
background: black;
color: white;
}
</style>
<img id="me" src="http://paultarjan.com/paul.jpg" />
<h2>Things!</h2>
Then the h2 background flows right past the 30px margin. How should I do this instead?
I wish I could explain why exactly, but
h2 {
...
overflow: hidden;
...
}
should fix your problem.
I'm not sure I understand the problem, but I'm pretty sure it comes from the h2 being a block element. If it works for you, the easiest cure would be making it display: inline. Otherwise, give the h2 a specific width, and a float: left, as well.