I'm trying to create a navigation bar. The background consists of an image, and I'm using text placeholders until I have the links sorted. I cannot seem to get the text to appear on the navigation bar, rather they insist on appearing below in a list style.
An example:
The grey gradiented bar is intended to be the navigation bar.
HTML:
<div id="pagewrapper">
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center">
<div id="pagebanner">
<img src="img/banner.png" />
</div>
<div id="navibar">
<img src="img/navibar.png">
<div class="naviitems">
Home
</div>
<div class="naviitems">
PHolder1
</div>
<div class="naviitems">
PHolder2
</div>
<div class="naviitems">
PHolder3
</div>
<div class="naviitems">
Contact Us
</div>
</img>
</div>
<div id="pagecontent">
<h1>Oh no, I broke my elephant!</h1>
<p>Wiggle!</p>
</div>
</div>
</div>
And the corresponding CSS:
#container{
margin: 0 auto;
width:1017px;
text-align:center;
}
#left{
float:left;
width:160px;
height:900px;
background-color: #D8D8D8;
}
#right{
float:right;
width:160px;
height:900px;
background-color: #D8D8D8;
}
#center{
display: inline-block;
margin:0 auto;
width: 697px;
}
#pagebanner{
display: inline-block;
margin:0 auto;
width: 697px;
}
#navibar{
display: inline-block;
margin:0 auto;
width: 697px;
height: 27px;
}
.naviitems{
margin: 0 auto;
height:25px;
width:20%;
}
#pagecontent{
display: inline-block;
margin:0 auto;
width: 697px;
}
You need to set the background property of the parent DIV to the image instead of calling it using an IMG tag.
.navibar {
background:url(URLofImage)
}
I used
background: linear-gradient(180deg, #777, #eee);
instead of a background image, see if it fits your needs... jsfiddle
Related
I'm trying to design a flag for a website i'm doing and the design is the parts at the bottom of the flag, they stack when i don't float them (expected) but when i do float them, they shrink to the text inside of the box, How can i fix this? Here's my code:
#flag1{
max-width:400px;
max-height:1000px;
margin:0 auto;
}
#mainflag{
background-color:#BA0500;
max-width:400px;
max-height:1000px;
position:relative;
height:auto;
margin: 0 auto;
text-align:center;
padding:5px;
color:white;
}
#flagdesign1{
background-color:#BA0500;
max-width:100px;
position:relative;
max-height:50px;
color:#BA0500;
margin-top:-21px;
margin-right:20px;
}
<div id="flag1">
<div id="mainflag">
<h1>Flag</h1>
</div>
<div id="flagdesign1">
<h1>A</h1>
</div>
<div id="flagdesign1">
<h1>A</h1>
</div>
</div>
In the end, it should look something like these
If I understand your question well, you could try using display: table;.
Also, an ID is supposed to be unique, you should use classes instead.
I also used span instead of h1 for the flag element, as IE might not permit using display: inline-block;, depending on the version you're supporting.
#flag1{
max-width:400px;
max-height:1000px;
margin:0 auto;
}
#mainflag{
background-color:#BA0500;
max-width:400px;
max-height:1000px;
position:relative;
height:auto;
margin: 0 auto;
text-align:center;
padding:5px;
color:white;
}
.bottomFlag {
display: table;
width: 100%;
}
.bottomFlagElem {
display: table-cell;
}
.bottomFlagElem.center {
text-align: center;
}
.bottomFlagElem.left {
text-align: left;
}
.bottomFlagElem.right {
text-align: right;
}
.bottomFlagElem span {
display: inline-block;
width: 100%;
background-color:#BA0500;
max-width:100px;
position:relative;
min-height:30px;
max-height:50px;
color:#BA0500;
margin: 0;
}
<div id="flag1">
<div id="mainflag">
<h1>Flag</h1>
</div>
<div class="bottomFlag">
<div class="bottomFlagElem left">
<span>A</span>
</div>
<div class="bottomFlagElem center">
<span>A</span>
</div>
<div class="bottomFlagElem right">
<span>A</span>
</div>
</div>
</div>
I have a dynamically creating chart whose width might keep on increasing. It is placed inside a container with fixed width and auto scroll. So the chart scrolls if it is wider than the container.
My issue is that the width of the chart is not fixed, it depends on the content.
Can I use width:auto to set the chart width as per its need. If not is there any way with just CSS to achieve it.
EDITS:I want the blocks to be in a single line even if the container has to have scroll. Is this possible just using CSS.
.container{
float:left;
width:300px;
background:#e3e3e3;
height:200px;
overflow:auto;
}
.sidebar{
float:left;
width:100px;
background:#666;
height:200px;
}
.chart{
margin:50px 20px;
}
.block{width:100px;float:left;background:#ccc;margin:10px;}
<div class="container">
CONTAINER
<div class="chart">
<div class="block">100</div>
<div class="block">200</div>
<div class="block">300</div>
<div class="block">400</div>
<div class="block">500</div>
</div>
</div>
<div class="sidebar">
SIDEBAR
</div>
The blocks have to be aligned horizontally. Updating with a image to show the output layout
If you change your .block from float: left to display: inline-block and set white-space: nowrap on your .chart, they will line up horizontal.
.container{
float:left;
width:300px;
background:#e3e3e3;
height:200px;
overflow:auto;
}
.sidebar{
float:left;
width:100px;
background:#666;
height:200px;
}
.chart{
margin:50px 20px;
white-space: nowrap;
}
.block{width:100px;background:#ccc;margin:10px;display: inline-block;}
<div class="container">
CONTAINER
<div class="chart">
<div class="block">100</div>
<div class="block">200</div>
<div class="block">300</div>
<div class="block">400</div>
<div class="block">500</div>
</div>
</div>
<div class="sidebar">
SIDEBAR
</div>
You can try to use display: table-cell;
only CSS changed :
.container{
float:left;
width:300px;
background:#e3e3e3;
height:200px;
overflow:auto;
}
.sidebar{
float:left;
width:100px;
background:#666;
height:200px;
}
.chart{
margin:50px 20px;
}
.block{width:100px;background:#ccc;padding:10px;display: table-cell;}
https://jsfiddle.net/us5Ljz7t/4/
white-space:nowrap will do the trick.
.container {
float: left;
width: 300px;
background: #e3e3e3;
height: 200px;
overflow: auto;
}
.sidebar {
float: left;
width: 100px;
background: #666;
height: 200px;
}
.chart {
/* width:800px;*/
white-space: nowrap; /* ← added */
margin: 50px 20px;
}
<div class="container">
CONTAINER
<div class="chart">
Dynamically adding chart content here
</div>
</div>
<div class="sidebar">
SIDEBAR
</div>
You can take the width: inherit, so that the width will be taken from the parent element, that is the container div.
.container{
float:left;
width:300px;
background:#e3e3e3;
height:200px;
overflow:auto;
}
.sidebar{
float:left;
width:100px;
background:#666;
height:200px;
}
.chart{
margin:50px 20px;
width: inherit
}
.block{width:100px;float:left;background:#ccc;margin:10px;}
<div class="container">
CONTAINER
<div class="chart">
<div class="block">100</div>
<div class="block">200</div>
<div class="block">300</div>
<div class="block">400</div>
<div class="block">500</div>
<div class="block">100</div>
<div class="block">200</div>
<div class="block">300</div>
<div class="block">400</div>
<div class="block">500</div>
</div>
</div>
<div class="sidebar">
SIDEBAR
</div>
Here is the fiddle
This is my first time trying an overlay. It is somewhat working however, hovering the first image would overlay below.. I tried making the position absolute, but that means that overlay would stay at top.
<div class="galleryContainer">
<div class="row">
<div class="galleryItem">
<img src="http://upload.wikimedia.org/wikipedia/commons/d/da/Gold-jewellery-jewel-henry-designs-terabass.jpg"/>
<div class="imgCaption">
<p>lulz</p>
</div>
</div>
<div class="galleryItem">
<img src="http://3.bp.blogspot.com/_HEjoNp_qRz8/TSsQZNyVFUI/AAAAAAAAJhI/xc7MCnnNYZY/s1600/World%2527s+Most+Funniest+Animals+Photos+%25288%2529.jpg"/>
<div class="imgCaption">
<p>lulz</p>
</div>
</div>
</div>
<div class="row">
<div class="galleryItem">
<img src="http://funny-pics-fun.com/wp-content/uploads/Very-Funny-And-Creative-Ads-Using-Animals-19.jpg"/>
<div class="imgCaption">
<p>lulz</p>
</div>
</div>
<div class="galleryItem">
<img src="http://funny-pics-fun.com/wp-content/uploads/Very-Funny-And-Creative-Ads-Using-Animals-18.jpg"/>
<div class="imgCaption">
<p>yaw</p>
</div>
</div>
</div>
</div>
css:
.row {
margin:2%;
}
.row .galleryItem {
float: left;
padding-right: 5%;
width:300px;
height:350px;
}
.row .galleryItem img {
width:280px;
height:330px;
padding:0;
margin:0;
}
.row .galleryItem .imgCaption {
top: 0px;
width:300px;
height:350px;
background:#FF2400;
opacity:0;
}
.row .galleryItem .imgCaption p {
color:white;
font-weight: 400;
font-size:16px;
text-align: center;
}
.row .galleryItem:hover .imgCaption {
opacity: 0.7;
}
.galleryContainer {
margin: auto;
max-width: 900px;
}
Here is a jsfiddle I made that demonstrates the issue. Any help would be appreciated.
Your problem is that your caption is positioned wrongly. It can be finished by adding float:left; to your img.
Here's a fiddle.
EDIT:
Other changes:
The caption div didn't fade properly so I switched the show up method from, opacity:0 -> opacity: 0.7;, to display:none -> display: block.
I removed the margins and paddings from the <p> element since it appeared displaced.
I have two divs:
<div id="left_menu" > menu </div>
<div id="content" > centered </div>
Currently they have a css of
#content {
margin-left:auto;
margin-right:auto;
display:table;
}
So this would create a div with menu and a line below that a centered div with centered. What I want is a centered div#content with div#left_menu to the left of it. I DON'T want to center BOTH the divs together, only the div#content. This should be done with only divs and css and should work on all browsers.
So this could possibly look like
---> menu centered <--------
Just to clarify things:
I'm not centering/positioning the text, it's the divs that matter (text is there for marking the position in the example). I want both divs on the same line (like a span, but i want to use divs), the centered div should be centered in the middle of the page. The menu div should be right next to it, touching the left border of the centered div.
This solution should work for every screen size (e.g. if the screen is very large the two side gaps to the left and right of the menu and content should be very large, e.g. if the screen is too small for both the menu and content, there should be no gaps and the result should look like (the >< represent the cutoff) Notice how if the screen is too small, the menu div is fully displayed first with the centered div cutoff (as if it were just two divs floated left).
>menu cent<
Due to the number of incorrect answers being submitted:
1) Please verify your answers by creating your own .html file with your code
2) Refresh once on full screen and refresh once with browser resized to a smaller size such that the browser cannot hold both divs (e.g. the centered div is semi-cutoff)
3) Use inspect element tool(chrome) or equivalent tools to be sure that the two divs are touching, the centered div is indeed centered, etc
To further clarify what i want i've included a better example(NOT a solution though):
This does not work for every screen size:
http://jsfiddle.net/prt38/2/
Updated per requests in comments.
I really like using the vertical-align property when vertically-aligning elements.
HTML:
<div id="container">
<span id="alignment"></span><div id="wrapper">
<div id="sidebar">
</div><div id="main">
</div>
</div>
</div>
Notice how the closing and the succeeding are touching. For inline and inline-block elements to touch, there cannot be space between them in the markup.
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
text-align: center; }
#container { white-space: nowrap; }
#wrapper {
white-space: nowrap;
text-align: left;
margin: 0 75px 0 0;
vertical-align: middle;
display: inline-block; }
#alignment {
height: 100%;
vertical-align: middle;
display: inline-block; }
#sidebar {
background: red;
width: 75px;
height: 200px;
vertical-align: middle;
display: inline-block; }
#main {
background: blue;
width: 300px;
height: 400px;
vertical-align: middle;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/2Xrcm/8/
Your do it with simple overflow:hidden like this:
#left_menu{
float:left;
width:200px;
height:100px;
background:green;
}
#content {
margin-left:auto;
margin-right:auto;
display:table;
height:100px;
background:red;
overflow:hidden;
}
http://jsfiddle.net/hnXqg/
The solution for this is you have to create a wrapper class or id for a div like..
<div id="wrapper">
<div id="left_menu" > menu </div>
<div id="right">
<div id="content" > centered </div>
</div>
</div>
then the css is..
#wrapper{
margin:0px auto;
display:table;
width:90%;
}
#menu{
float:left;
width:300px;
margin:5px;
}
#right{
float:right;
display:block;
}
#content{
displat:table;
margin:0px auto;
}
I think this css should do the job, if I understood your question:
#left_menu{background:red;
width:100px;
height:100px;
float:left;
margin: auto 0;
z-index:2}
#content {
background:white;
width:100px;
height:100px;
margin: auto 0;
float:left;
position:absolute;
left:20%;
z-index:200;
padding-left:4%
}
And Html is below:
<div id="left_menu" >RED DIV</div>
<div id="content" >WHITE DIV</div>
I think this is what you are looking for. Adjust the sizes to suit your needs, obviously.
<style type="text/css">
.container {
margin: auto;
width: 500px;
}
.menu {
margin: 10px;
width: 180px;
}
.content {
margin: 10px;
width: 280px;
text-align: center;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="menu floatLeft">
Menu
</div>
<div class="content floatLeft">
Content
</div>
<div class="clear"></div>
</div>
Edited:
<style type="text/css">
.container {
margin: auto;
width: 500px;;
background: red;
}
.menu {
width: 50px;
margin-left: 50px;
background: green;
}
.content {
width: 300px;
margin: auto;
background: blue;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="menu floatLeft">
Menu
</div>
<div class="content">
Content
</div>
<div class="clear"></div>
</div>
<div align="center">
<span id="left_menu"> menu </span>
<span id="content"> centered </span>
</div>
html { text-align: center; }
div#content { display: inline; margin: 0 auto; text-align: left;width: 980px; }
something like this should work.
Well i am developing a site and having trouble in CSS please help me to get rid of this issue.
You can see the following image for final results.
http://i51.tinypic.com/5bwpee.jpg
so i code like that
<div id="header">
<div class="pattern"></div> <!-- .pattern -->
<div id="wrapper">
<div class="topHeader">
</div>
</div>
</div> <!-- #header -->
and CSS is .. actually in the following codes i use gradient image of and use pattern image to overflow the background.
#header {
width:100%;
height:150px;
background:url(images/header_gradient.png) repeat-x;
}
.pattern {
width:100%;
height:150px;
background:url(images/header_transparent.png) repeat;
}
#wrapper {
width:1200px;
margin:0 auto;
background-color:#F00;
height:100px;
}
so please kindly help me to solve this problem that how i set logo and author details in center of header..
i tried position but maybe it goes wrong.
Now i edited my code the results below, but still having problem
<div id="wrapper">
<div id="header"></div>
<div id="pattern"></div>
<div id="main">
<img src="http://i52.tinypic.com/16i6z9d.jpg" />
</div>
</div>
CSS
#wrapper {
position:relative;
}
#header {
width:100%;
height:150px;
background:url(http://i55.tinypic.com/1zpgny8.jpg) repeat-x;
}
#pattern {
width:100%;
height:150px;
background:url(http://i51.tinypic.com/ao75eg.jpg) repeat;
position:absolute;
top:0px;
}
#main {
width:1200px;
margin:0 auto;
margin-top:-103px;
}
#main img {
z-index:5px;
}
after doing all this still having problem that the #pattern over all the layers. so please kindly help me to solve this issue.
Thank you all.
Create a div for your logo and sitename content.
Move the div towards the right with position:relative; left: 400px or whatever distance you need.
Float the logo and sitename to have them line up side by side.
Set the container div (#logoandsitename) to overflow:auto; to contain the floats.
HTML
<div id="header">
<div class="pattern"></div> <!-- .pattern -->
<div id="wrapper">
<div class="topHeader">
<div id="logoandsitename">
<img src="img.source" />
<span id="sitename">Your Site Name</span>
</div>
</div>
</div>
</div> <!-- #header -->
CSS
#logoandsitename {
overflow: auto;
width: 300px;
height: 100px;
position: relative;
left: 300px;
}
#logoandsitename img {
float:left;
}
#sitename {
float:left;
font-size: 40px;
}
That pretty much what you are looking for?
Why you need "width:1200px;" in #wrapper?
Why not you try this html?
<div id="header">
<div id="wrapper">
<div class="topHeader">
<div id="logo">Logo</div>
<div id="author">Author Details</div>
</div>
</div>
<div class="pattern"></div> <!-- .pattern -->
</div> <!-- #header -->
and this css:
#header {
width:100%;
height:150px;
background:url(images/header_gradient.png) repeat-x;
}
.pattern {
width:100%;
height:150px;
background:url(images/header_transparent.png) repeat;
}
#wrapper {
width:1200px;
margin:0 auto;
background-color:#F00;
height:100px;
}
#logo, #author{
width:200px;
height:50px;
float:left;
}
#author{
margin-left:20px;
}
.topHeader{
width:500px;
margin:0 auto;
}