I would like to style up my navigation bar, so it would look like this one nav bar on the picture. I have already startet and on the jsfiddle link below you are able to see what I have so far and as you can also see, that there are still a couple of things to fix.
It is important for me to align all elements to the same line, because I will maybe add some more elements to it (e.g. input field and button)
I would also like to have a background in two colors like on the picture. Lets say 30% purple, 70% black.
I have chosen T-Mobile logo image on purpose, because it is originaly very big. I have succeded to resize and fit it to the nav, however I would also like to ask if this is the right/best thing to do.
Thx in advance
https://jsfiddle.net/amsalk/y6km93gm/
body {
background: #EEE;
}
div#wrapper{
margin: auto;
background: white;
width: 800px;
height:2000px;
}
#horizNav {
display: block;
padding: 10px 10px 10px 10px;
background: black;
}
img {
max-height: 50px;
vertical-align: middle;
}
h3 {
color: white;
display: inline-block;
float: right;
}
<body>
<div id="wrapper">
<nav id="horizNav">
<img id="pageLogo" src="http://intranet.t-mobile.at/intranet/arbeitsplatz/T_Logo_magenta_schwarz_Brandneu_RGB.jpg" />
<h3>Title</h3>
</nav>
</div>
</body>
I am not writing whole html and css for you but follow these examples
http://fortawesome.github.io/Font-Awesome/examples/
Related
The given css code gives the bottom border line to my header in html page. I want to add a similar vertical line which starts from the border line in header till bottom of the page such that I can get a sidebar panel from left. Please help me.
header {
border-bottom: #bfa161 solid 3px;
height: 60px;
background-color: #fff;
position: relative;
z-index: 9999;
}
Yeah, do what Hash said. You should have your site organized into wrappers and "sub" wrappers using the "div" tag. W3Schools has some really well written documentation on it. I strongly advise you read it. It's not very long. Just google it.
Here's a link explaining the basic concept if you aren't familiar.
What is the correct way to do a CSS Wrapper?
You should make a div as the first thing inside your body tag, and the last thing before the closing tag. Assign an ID to that tag. Most people call that wrapper. Here's what the HTML would look like.
<body>
<div id=wrapper>
#content for your page
</div>
</body>
Then when you do your CSS, add something like this.
NOTEIt's a good idea to define a "max-width". You can actually customize different widths for different resolution ranges when you get comfortable doing more complicated things in CSS.
#wrappper{
max-width: 900px;
max-height: 1750px;
border: #bfa161 solid 3px;
margin: 0 auto; <---"This is so the wrapper centers itself on your screen"
}
Now if you wanted to have a left navigation menu that didn't interfere with any of your page content, you could make two more div tags inside your wrapper div. Give one an id of something like navigationdiv and the other one contentdiv. Float the content div right and float the navigation div left. Obviously, you should place your nav in the navigationdiv and everything else in the contentdiv. Make sure you make both div tags inline-block. It never hurts to define a width either.
navigationdiv{
display: inline-block;
width: 200px;
border-right: #bfa161 solid 3px; <---"This will make the line you wanted"
float: left;
}
contentdiv{
display: inline-block;
max-width: 700px;
float: right;
}
I hope this was clear and thorough.
Simple as this, you just need to give a border color to the div. You can size the div to match the requirement.
header {
border-bottom: #bfa161 solid 3px;
height: 60px;
background-color: #fff;
position: relative;
z-index: 9999;
}
footer {
border-top: #bfa161 solid 3px;
background-color: #fff;
}
#mainContent {
display: inline-flex;
}
#vertical_line {
border-left: 3px solid #bfa161;
width: 60px;
}
<header>
MY HEADER
</header>
<body>
<div id="mainContent">
<div>
<p>THIS IS SIDEBAR</p>
</div>
<div id="vertical_line">
<p>THIS IS MY CONTENT</p>
</div>
</div>
</body>
<footer>
MY FOOTER
</footer>
I am trying to figure out how to add a background that extends to the edges of the page no matter what the size, like on the website here http://www.wisemanpanel.co.nz/
And I'm talking about this particular area that is highlighted in green
I've been looking at the source code and I can't find anything specifically for that part, also have tried right click -> inspect but still didn't find much, perhaps I have poor research skills.
I would just like a basic example of what the html/css would look like please if anyone could provide it?
It's simply a background image applied to the tag <body> which repeats horizontally (background-repeat: repeat-x;)
Just right click->inspect-> body tag and you will see :)
If you inspect their code, you will see that their <body> has a background-image that is 10px (but could have also been 1px) wide and that repeats horizontally :
http://www.wisemanpanel.co.nz/uploads/images/bg_repeat.png
It's an old trick I have used a lot too. Consider this very simple jsfiddle using the very same image :
HTML:
<div id="content">
<div id="top">
TOP BAR
</div>
<div id="middle">
Content !!
</div>
</div>
CSS:
#top {
height: 50px;
line-height: 50px;
background: yellow;
width: 70%;
margin: 0 auto;
text-align: center;
padding: 20px;
}
#content {
width: 100%;
background: url("http://www.wisemanpanel.co.nz/uploads/images/bg_repeat.png") repeat-x;
}
#middle {
width: 70%;
margin: 0 auto;
height: 600px;
background: #fff;
text-align: center;
padding: 20px;
}
I am using Foundation 6 to try to create a header image which overlaps part of a navigation bar. It uses the .row class as a responsive div.
HTML
<header class="row text-center">
<a href="//google.com">
<img src="path/to/horizontal banner image">
</a>
</header>
<nav>
<div class="row text-center">
Text here
</div>
</nav>
CSS
header{
background-color: lightgreen;
}
nav{
margin-top: -5%;
font-size: 150%;
background-color: lightblue;
}
http://jsfiddle.net/hvmt2j1j/
As illustrated in the above fiddle, I have an image and a nav bar that includes links. The image itself is a link too.
However I found out that:
when the screen size is large, the text goes upward and does not not
align with the image properly anymore.
In some browsers the image link overlaps the nav bar link. I would like to restrict the clickable area of the image to the green area only.
I am quite new to this, therefore I believe there is probably a better way to structure the <div> tags or CSS to achieve this. Thank you very much.
My proposition:
body {
margin: 0;
}
header {
background-color: #6C6;
background-image: url("http://sweetclipart.com/multisite/sweetclipart/files/imagecache/middle/banner_white.png"), url("https://i.imgur.com/TILTsNC.png");
background-repeat: no-repeat, repeat-x;
background-position: top center, bottom;
height: 189px;
max-width: 100%;
width: 550px;
}
.green {
display: block;
height: 80%;
}
.blue {
display: block;
font-size: 2em;
height: 20%;
text-align: center;
text-decoration: none;
}
<header>
<a class="green" href="https://www.google.com/"></a>
<a class="blue" href="https://www.yahoo.com/">Text here</a>
</header>
You define a header with just two <a> elements that you treat as block (flow in HTML5) content, meaning they will behave just like divs, but will be clickable of course, because they are still links after all. To do so, you got to give them display: block style. Then you need to stack two backgrounds for <header>. First one is your picture and the second one is lightblue color with width of 1px and height of desired blue area height (in this case 20% of 189px). More info on Using CSS multiple backgrounds (MDN).
I'm creating some kind of chat box for my website and I can't make vertical scrollbar to appear outside the border.
This is what I'm getting:
All I want is that scrollbar to appear outside the border, on the right. It's not really pretty as it is now, is it.
The main HTML code (with one message insise the chatbox) of thix box looks like this:
<div id="sb_body">
<div id="sb_messages_set">
<div class="sb_message">
<div class="sb_message_header">
<div class="sb_message_author">PookyFan</div>
<div class="sb_message_hour">12:11</div>
</div>
<div class="sb_message_content">test</div>
</div>
</div>
<!-- Some other chatbox's elements -->
</div>
My CSS code looks like this:
div#sb_messages_set
{
border: 2px solid black;
border-radius: 10px;
background-color: #0080E0;
overflow: auto;
height: 300px;
}
div.sb_message
{
margin: 2px 4px 5px 4px;
border-bottom-style: dashed;
border-width: 1px;
border-color: black;
}
div.sb_message_header
{
clear: both;
display: block;
margin-bottom: 3px;
}
div.sb_message_author
{
display: inline;
text-align: left;
font-weight: bold;
}
div.sb_message_hour
{
display: inline;
float: right;
}
div.sb_message_content
{
clear: both;
text-align: left;
padding-bottom: 5px;
}
Is there any way to achieve what I want? I was looking for answer but didn't find anything that would solve my problem.
Oh, and if there's anything wrong with my code but it's not connected with my issue, please share your thoughts, I started having fun with creating websites pretty recently so it's possible that I make some newbie mistakes here and am not really aware of it.
Edit: important thing I forgot to mention about - I want the border to be fully visible all the time, I mean - I want just the messages to be scrolled, but wihout making the border be scrolled with it.
In other words, I don't want anything like that:
In this picture the chatbox has been scrolled a little and the top and bottom frame isn't visible. But I want the entire frame to be visible despite div's content being scrolled.
Well, if that won't work, and you're married to the design, I think you have to use a bg image. I can't find a way to style the scrollbar with CSS. I made another jsfiddle with this solution demonstrated: http://jsfiddle.net/jlmyers42/mrx46geg/
But basically, you just move some of your CSS around:
#sb_body {
width: 272px;
height: 300px;
overflow: auto;
padding: 0;
margin: 0;
background: url("http://arcsuviam.com/play/random/bluebg.png") no-repeat left top;
}
div#sb_messages_set {
margin: 5px;
}
div.sb_message {
padding: 2px 4px 5px 4px;
border-bottom-style: dashed;
border-width: 1px;
border-color: black;
}
I'd put the whole thing in a container that has the overflow:auto style applied.
See this fiddle: http://jsfiddle.net/jlmyers42/8tptqt19/
<div id="sb_body">
<div id="sb_container">
<div id="sb_messages_set">
<div class="sb_message">
<div class="sb_message_header">
<div class="sb_message_author">PookyFan</div>
<div class="sb_message_hour">12:11</div>
</div>
<div class="sb_message_content">test</div>
</div>
</div>
</div>
<!-- Some other chatbox's elements -->
</div>
CSS
div#sb_container {
overflow: auto;
}
Simple.
With your div
Put the static width like below:
#divID{
overflow: hidden;
width: calc(1024px + 0);
}
#divID:hover{
overflow-y:scroll;
}
Stumbled across it and works for me. My div is positioned absolute if that makes a difference.
The scroll bar appears outside the div when hovered on
so you can check out that site - it describes you the solution precisely. I created a small jsfiddle for you. Note here that the text-div inside the "li" has a width in "vw". This makes the effect of scrolling outside the content. Hope this helps!
HTML
<ul><li id="lio" class="open"><div class="text">
Lorem..
</div></li></ul>
<button>
Halo
</button>
CSS
.open {
overflow: hidden;
display: block;
width: 100%;
height: 100px;
background-color: red;
}
.text {
padding: 15px;
background-color: orange;
width: 30vw;
}
ul {
display: table;
}
JQUERY
$(document).ready(function() {
http://jsfiddle.net/fcLzqp5o/#run
$("button").click(function() {
$("#lio").css("overflow-y", "scroll");
});
});
I'm really struggling to get this navigation-menu with a image that splits the navigation to work. Responsive is a big plus. I don not believe the current code is on the the right way to go, so please be open minded of how to approach this problem.
HTML
<div id="nav">
<ul class="nav-left">
<li>1</li>
<li>2</li>
</ul>
<div class="nav-logo"></div>
<ul class="nav-right">
<li>3</li>
<li>4</li>
</ul>
</div>
CSS
#nav {
width: 400px;
background: #f5f5f5;
border: 1px solid grey;
text-align: center;
}
.nav-left, .nav-right, .nav-logo {
display: inline-block;
height: 30px;
vertical-align:bottom;
}
.nav-left {
background: red;
}
.nav-right {
background: red;
}
.nav-right, .nav-left {
width: 100px;
line-height: 30px;
padding: 0;
}
.nav-logo {
background: yellow;
width: 30px;
height: 100px;
margin-left: 10px;
margin-right: 10px;
}
ul {
margin: 0;
text-align: justify;
list-style: none;
}
li {
display: inline;
width: 100%;
}
Update 05.05.14
Updated it with my current code as requested.
I have gone ahead and made a slightly responsive header for you: JSfiddle (Note: random coffeeshop logo borrowed from google image search... man I should go get a coffee)
The idea is to use the html5 nav element to contain your links, each with a width:20% so it resizes with the width of the screen.
The image is positioned with background:url('...') no=repeat center; to avoid sizing problems. It's in a separate div to allow you to stripe the <nav> element. This is possible with pure css.
As you want to position the links vertically they are nested in divs, and space for the image is made using an empty div with the same width:20%; property as the link containers.
The design breaks once you get close to small mobile device widths (as the links cover the image). For this you can use #media queries.
I hope this gives you a starting point, but design is very subjective and there are many different ways to do it.
It may be worth while to style your page with Bootstrap and inspect their CSS to see what's happening.
Can you please add your css and html codes into your qustion then I can help you with a best solution. Also if you want then email me your codes, I will send you the best solution.
Orherwise just add a class .navfix on the main navigation container div or ul. then add the style property z-index:9999999 for the class .navfix into your stylesheet. Also if you have use any other div for the background then you have to add same thing for the nav background container but here z-index property should be negative or lower then other one.
sample :
.navfix {
z-index:9999999;
}
for background container (if you have)
then
.navfix {
z-index:9999999;
}
.backgrounContainerClassName {
z-index:-1;
}