My website URL is http://www.hentaireader.com
At the bottom right corner, I wish to put a small link on the red footer bar.
I have created a simple image of what I wish to do.
How can I achieve this??
The code on this page is a disaster. With that said you would have to remove the http://www.hentaireader.com/images/bar.gif image from the HTML and use CSS to create a background-image.
Something similar to this would be required...
CSS:
#footer-bar {
width:100%;
background-color:#f40000;
background-image: url(http://www.hentaireader.com/images/bar.gif);
background-position:top center;
background-repeat:no-repeat;
text-align: right;
margin-bottom: 10px;
}
#footer-bar ul {
width: 950px;
height: 30px;
margin-left: auto;
margin-right: auto;
position: relative;
left: 0px;
top: 0px;
}
#footer-bar li {
display: inline;
line-height: 30px;
margin-left: 6px;
}
#footer-bar li a {
color: #FFFFFF;
}
HTML:
<div id="footer">
<div id="footer-bar">
<ul>
<li>Contact</li>
<li>Another Link</li>
</ul>
</div>
All characters on hentaireader.com are purely fictional and 18+ years of age.
</div><!--- FOOTER --->
Look here... http://jsfiddle.net/b8Xh7/1/
Ok, well first of all. Do you see the red bar? You have a div inside of the div you have an image. You should have put the (red bar) image as a background, and put a link inside the div. Then you could haver positioned the link where you wanted it with padding/margin.
#footer a {}
Example
Related
I am new to html/css. My problem is when I re-size my browser window the text of the nav-bar shifts/condenses according to the size of the window and becomes distorted. I would like it to remain static so that when I narrow my browser window I would have to have to scroll over to the right to be able to see the text again. I'm using bootstrap as well.
This is my code:
HTML
<body>
<div class="nav">
<div class="container">
<ul class="pull-right">
<li>HOME</li>
<li>WINES</li>
<li>GRAPES</li>
<li>ABOUT US</li>
</ul>
</div>
</div>
</body>
CSS
.nav li {
display: inline;
}
.nav a {
color: #5a5a5a;
font-size: 20px;
font-weight: bold;
padding: 14px 10px;
}
.nav {
position: absolute;
top: 20px;
right: 0px;
}
I tried using .container {width: 900px;} but that didn't help. The nav bar still doesn't stay static.
You can solve this by adding a min-width to the navbar.
navigation {
margin-right: auto;
margin-left: auto;
max-width: 100%;
min-width: 1000px;
}
You can solve this by adding a minimum width to a div surrounding the nav bar.
In your case it would be in the .nav class
.nav {
min-width:165px;
position: absolute;
top: 20px;
right: 0px;
}
I don't know if you shared all the code with us, but from the code you provided 165px should be fine for the minimum width. If there is more code present that makes the navbar a different width then you may need to adjust the pixel amount of min-width:.
This should work
ul {
white-space: nowrap;
}
I want to achieve this:
But there is unnecessary gap on top of the Social icons div. The page is live at http://goo.gl/K17Fjs
My markup:-
<header>
<img src="images/home-layout_02.jpg" alt="Salem Al Hajri Logo">
<div id="top-social">
Follow us on <img src="images/home-layout_05_01.jpg" alt=""><img src="images/home-layout_05_02.jpg" alt=""><img src="images/home-layout_05_03.jpg" alt="">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Projects</li>
<li>Photo Gallery</li>
<li>Contact</li>
</ul>
</nav>
</header>
My CSS:
body {
margin: 0 auto;
background-attachment: scroll;
/*background-image: url(images/home-layout_08.jpg);*/
background-repeat: repeat-x;
background-position: bottom;
}
header {width: 920px; margin: 0 auto;}
#top-social {float: right; text-align: right; vertical-align: middle; padding-top: 13px; width: 538px;}
nav {float: right; width: 538px; text-align: right; margin-top: 45px;}
nav li { display: inline;}
To achieve your layout, you need to float your logo image left.
See this FIDDLE
Add this CSS :
header > img {
float: left;
}
This : header > img {} means propeties will apply only to the first children images of the <header> tag in your case, the logo image and not to the social icons.
Remove "padding-top: 13px;" from your CSS.
Change your style.css line:10 to:
#top-social {
float: right;
text-align: right;
vertical-align: middle;
/*padding-top: 13px;*/
width: 538px;
}
There is a top padding of 13 pixels.
Elements with float: right will be pushed down by other elements that come before them. You can fix this by changing your markup to move the #top-social and nav before the <img>.
However, in this case I think it would be better to absolutely position the top social and the nav to the top right and bottom right of the containing header. This will allow you to easily get the nav links below the social links and keep this appearance.
header {
position: relative;
}
#top-social {
position: absolute;
top: 0px;
right: 0px;
}
I freely admit right up front that I am not blessed with even a speck of design ability. Nonetheless, I find myself hacking through CSS for a simple website. I've run into a problem and for the life of me I can't figure out the issue. The basics...
I have a <div> that contains the entire page and sets the boundaries. The width is set at 1200px. After a other elements I have a links bar that spans the width of the page. This is in a <div> with the id "pinkbar". The "pinkbar" has a width set to 100%, which would be 100% of the 1200px containing division. I created small padding on the left and larger padding on the right to properly position elements within the bar. I need to add one element to the left, a simple text telephone number, and then several links to the right. I put the telephone # in it's own <div> with the id of "pinkphone", and floated that <div> to the left. Worked perfectly. Now I start to add the links. I created a <div> named "pinktest" for the first link, added a border and the text link inside of the division and floated it to the right. And that is where thinks stopped playing nicely. The link division, "pinktest", floats to right about 50px beyond the border of it's containing division, and about 100px to the right beyond that border if you factor in the padding. I've played and tinkered with this to the best of my limited ability and have found no love at all. If someone can offer a suggestion as to how to make this work please do. I still need to add four more links, all floated right, along with the "pinktest" one. Relevant code below:
The CSS:
#pinkbar{
background-image: url(../visual/pinkMenuBar.jpg);
background-repeat: no-repeat;
padding-top: 0px;
padding-left: 30px;
padding-right: 100px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 25px;
}
#pinkphone{
padding-top: 3px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
float: left;
width: auto;
height:25px;
}
#pinktest{
padding-top: 3px;
padding-left: 4px;
padding-right: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: grey;
float: right;
width: auto;
height:25px;
}
The HTML:
<div id="pinkbar">
<div id="pinkphone">
<span class="cambria3black">Tel: 416 450 4460</span>
</div>
<div id="pinktest">
<span class="cambria3black">
Testimonials
</span>
</div>
</div>
Here is simplified example of what I think you might be looking for:
HTML:
<nav>
<ul class="links">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<ul class="info">
<li>Telephone Number</li>
<li>Link 3</li>
</ul>
</nav>
CSS:
nav {
padding: 1em;
}
.links {
float: left;
}
.info {
float: right;
}
nav li {
display: inline;
padding: 1em;
}
You can add as many links as you want.
Demo
A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
CSS W3schools
So in fact, the pinktest div is inside the pinkbar division.
You should change the css of pinktest to:
float: left;
Because pinkbar div is using 100% of the page, pinktest would go as far right as possibl. Now it will go as far left as possible, ie. next to pinkphone.
Hell o, I have floating menu fixed on top of the screen of my single page web site. When I click the menu item, page slowly scrolls down to appropriate section using jquery. I have this code for fixed menu on top of the screen:
<style>
.fixed_elements{ position:fixed; top:100px; }
#top-floating-bar{ background: none repeat scroll 0 0 #2D2D2D; height: 35px; position: fixed; top: 0; width: 100%; z-index: 100; }
ul{ padding: 0; margin: 0; }
.fixed-bar-buttons{ float: left;color: #fff; }
.fixed-bar-buttons ul { height: 25px; padding-right: 10px; }
.fixed-bar-buttons ul li{ display: block; float: left; font-family: sans-serif; font-size: 14px; font-weight: bold; height: 25px; padding-left: 10px; padding-right: 10px; padding-top: 10px; }
.fixed-bar-buttons ul li:hover{ background-color: #605F5F; }
#content-panel{ float: left;margin-top: 40px; }
</style>
</head>
<body>
<div id="top-floating-bar">
<div class="fixed-bar-buttons">
<ul class="nav">
<li>REFERENCIE</li>
<li>KONTAKT</li>
</ul>
</div>
</div>
<div id="section2"> Section2 content</div>
<div id="section3"> Section3 content</div>
...
The code is OK and everything works fine. The thing I need to do is to modify the menu when it's on section2 and section3 only and add "UP" button.
When I load the page, I don't need the "UP" button, because It's not possible to go up and it's confusing to be there, so I need it only if I scroll down. Is it possible with CSS(1,2,3) only? Thank you!
Not possible, because you have to fetch the vertical offset of the document to know if the user is at the top of the page, or have scrolled down. The vertical offset is needed to make the decision whether to display the up button or not.
There is a way to do it with JS, but if you're asking for a CSS-only solution, I've given you the bad news already :P
Hey guys was hoping you can help me out.
been at this for like more than an hour and its driving me crazy.
basically I am a big novice when it comes to CSS but am learning. at the moment I am trying to replicated a menu that looks like this:
what I have so far looks something like this (i know the fonts different but not problem):
As you can see, ive got the background but I just CAN NOT figure out how make the start, end and the breaks (black line part) between each tab.
Also, basically the start, break, end I have as .jpg images. Not looking for html5 or css3 curves etc to do this. Just want to keep it simple :).
this is what I got so far. It would be great if you could could give me some tips on how I could make whats remaining and in case ive used a not-so-great approach, suggest an approach which would be better.
the html:
<div id="header">
<ul id="header-list">
<li class="header-list-item">
<span class= "header-list-item-span" >Home</span>
</li>
<li class="header-list-item">
<span class= "header-list-item-span" >About Us</span>
</li>
<li class="header-list-item">
<span class= "header-list-item-span" >Services</span>
</li>
</ul>
</div><!--END OF HEADER -->
the css:
#header-list{
display: table;
position: relative;
left: -3em;
table-layout: fixed;
margin-bottom: 0PX;
margin-top: 0;
margin-left: auto;
}
.header-list-item-span{
background-image: url("img/menubody.jpg");
color: white;
display: inline-block;
width: 5em;
font-size: large;
text-align: center;
padding: .2em;
}
.header-list-item{
display: table-cell;
height: 4.2em;
vertical-align: bottom;
}
Here's an idea:
Wrap the ul in a div. Set the first jpg as a background image for that div, and add some padding-left so that the image can be visible.
Set the last jpg as a background image for the ul and add some padding-right so that the image can be visible too.
Also, in my opinion, you should simplify your HTML by taking more advantage of CSS selectors.
The header list can be selected as div#header > ul.
The items that you are selecting with the class header-list-item can be selected with div#header > ul > li.
I don't think the span is actually necessary, you could apply the styles directly to the li elements.
Wrap the ul in another div and add padding on the inside to the left and you can place your start image as the background. Then make the right image the background of the ul and add padding on the right.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<style>
div,li,ul,span { margin: 0;padding: 0;}
body { width: 700px; margin: 0 auto; }
#header
{
background: url(http://www.lucascobb.com/wp-content/uploads/2012/02/1-plastic-navigation-bar-565x182.jpg) top center repeat;
padding-top: 50px;
position: relative;
}
#header .nav
{
background: url(http://www.ultracomwireless.com/images/button_left.png) top left no-repeat;
float: right;
width: 413px;
padding-left: 26px;
margin-right: 20px;
}
#header .nav .nav-wrapper
{
background: url(http://www.ultracomwireless.com/images/button_right.png) top right no-repeat red;
padding-right: 26px;
}
#header ul
{
position: relative;
list-style: none;
}
#header ul li
{
background: red;
width: 120px;
float: left;
text-align: center;
}
#header ul li span
{
color: white;
padding: 8px 0px;
}
.clear { clear: both;}
</style>
</head>
<body>
<div id="header">
<div class="nav">
<div class="nav-wrapper">
<ul>
<li><span>Home</span></li>
<li><span>About Us</span></li>
<li><span>Services</span></li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</body>