<div style="width: 600px;">
<div class="header">
<img src="logo.png"/>
</div>
<div class="container">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
<div class="div4">Div 4</div>
<div class="div5">Div 5</div>
</div>
.header
{
height:200px;
background-image: url('http://www.imgur.com/YLVpI.png');
margin:0;
width:100%;
background-position:left;
}
.header img
{
margin-left:auto;
margin-right:auto;
}
.container .div1
{
background-color: black;
background-position:left;
float:left;
width:20%;
margin: 0px;
}
.container .div2
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
float:left;
width:100px;
margin:0; padding:0;
border-bottom-left-radius: 20px;
}
.container .div3
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
float:left;
margin:0; padding:0;
}
.container .div4
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
float:left;
width:100px;
margin:0; padding:0;
border-bottom-right-radius: 20px;
}
.container .div5
{
background-color: black;
float:left;
display:inline-block; width:90px;
width:20%;
margin:0;
}
There are several things I cannot get to work simultaneously:
Make the header span 100% of the page width.
Make div 2 and 4 a set width of 30px each.
Make div 3 a set width of 400px.
Make div 1 and 5 fill the remaining space regardless of how big the window is.
Center everything so it looks nice.
Make the background align correctly.
Does anyone know how to do this? http://jsfiddle.net/jaTuu/
As far as I can tell, you solved 5 on your own, and as far as I know, without extraneous stuff, you need Javascript to do number 4. I cannot attempt 6 without access to your images. Nevertheless, I think you can resolve that on your own.
Below is the solution I came up with given your code:
<div id="header_container" style="width: 600px;">
<div class="header">
<img src="logo.png"/>
</div>
<div class="container"><div class="div1">Div 1</div><div class="div2 width30">Div 2</div><div class="div3 width300">Div 3</div><div class="div4 width30">Div 4</div><div class="div5">Div 5</div>
</div>
*
{
padding:0;
margin:0;
}
#header_container {
background-color: #000;
min-width: 100%;
}
.width30 {
width: 30px;
}
.width300 {
width: 300px;
}
.header
{
height:200px;
background-image: url('http://www.imgur.com/YLVpI.png');
margin:0;
background-position:left;
}
.header img
{
margin-left:auto;
margin-right:auto;
}
.container
{
text-align:center;
}
.container .div1
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
display:inline-block;
background-color: yellow;
width:90px;
border-bottom-left-radius: 20px;
}
.container .div2
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
background-color: purple;
display:inline-block;
/*width:90px;*/
margin:0; padding:0;
}
.container .div3
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
background-color: green;
display:inline-block;
/*width:90px;*/
}
.container .div4
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
background-color: blue;
display:inline-block;
/*width:90px;*/
}
.container .div5
{
background-image: url('http://www.imgur.com/YLVpI.png');
background-position:left;
background-color: orange;
display:inline-block;
width:90px;
border-bottom-right-radius: 20px;
}
A couple things to note here:
Assuming that you want the element names to remain distinct, you can modify the width of the items by adding classes which define sizes as per the above. If you do so, as I did, you will have to remove the widths of the elements as you define them in the CSS (also shown above).
One more note: it seems as though you are attempting to do a navigation menu. If that is the case, it may be a better idea to use lists to represent the items.
Try to centering all background images.
background: url('http://www.imgur.com/YLVpI.png') center center;
Like this demo: http://jsfiddle.net/ongisnade/PThcc/
Related
So I've been playing around with my code for some time now, and I still am
not able to get the div elements to properly center themselves along the bottom of my canvas element. The code I have so far gets me relatively close, but it is not quite there. I've posted the relative css snippets below, if anyone can give me some direction I would be really appreciative.
#shapeCanvas {
width:800px;
height:650px;
border:1px solid #000000;
display:block;
margin: 0 auto;
}
.styleDiv {
color:#FFFFFF;
font-family:"Verdana";
background-color:#36648b;
border:2px solid #000000;
border-radius:5px;
padding:5px;
display:inline-block;
width:150px;
height:25px;
}
Add a container div, also inline-block, and give it text-align: center. This will make sure all your inline-block divs are anchored at the center of the page.
#container {
text-align: center;
display: inline-block;
}
#shapeCanvas {
width:800px;
height:650px;
border:1px solid #000000;
display:block;
margin: 0 auto;
}
.styleDiv {
color:#FFFFFF;
font-family:"Verdana";
background-color:#36648b;
border:2px solid #000000;
border-radius:5px;
padding:5px;
display:inline-block;
width:150px;
height:25px;
text-align: center;
}
<div id="container">
<div id="shapeCanvas"></div>
<div class="styleDiv"></div>
<div class="styleDiv"></div>
<div class="styleDiv"></div>
</div>
I have a slideshow with pager and some buttons next to pager of slideshow (here is html page) which I am trying to make responsive.
The images I am fetching from database. So that are varying in number.
The problem is that pager/navigation of slideshow is fine for less number of images but becomes problematic for more images. Pager is overlapping the buttons which are next to it. as shown below:
For Desktop screen:
For small screen:
Below is the div structure
<div id="controls-wrapper" >
<div id="controls">
<div id="cycle-nav"><ul></ul></div> <!-- pager -->
</div>
<div class="button1" id="button1">
button 1
</div>
<div class="button2" id="button2">button 2</div>
<div class="button3">button 3</div>
</div>
I am finding the solution other than media queries if possible. I tried by giving width in % to all div, by putting container div to above structure and giving it 100% width and height, by $(width).width() function. But not getting the solution.
jsfiddle
Is there any way to dynamically adjust the width of div depending on browser's screen size?
You can use the #media queries. Here's an example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
#media screen and (max-width: 300px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
...
</body>
</html>
This will change the background color of the body to lightblue. But when you resize your browser window to less than 300px it will change to lightgreen. I hope this will help you with your problem.
Here is simple solution using CSS and HTML, no #media queries no JavaScript,
I just modified some lines of HTML and CSS to your code those are below.
HTML
<div id="controls-wrapper" >
<div id="controls">
<div id="cycle-nav"><ul></ul></div>
</div>
<div class="buton-controls">
<div class="button1" id="button1">
button 1
</div>
<div class="button2" id="button2">button 2</div>
<div class="button3">button 3</div>
</div>
</div>
css
/* I wanted to center my loader */
#cycle-loader {
height:32px;
left:50%;
margin:-8px 0 0 -8px;
position:absolute;
top:50%;
width:32px;
z-index:999;
}
/*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/
#maximage {
display:none;/* Only use this if you fade it in again after the images load */
position:fixed !important;
}
#arrow_left, #arrow_right {
bottom:45%;
height:67px;
position:fixed;
right:3%;
width:36px;
z-index:1000;
}
#arrow_left {
left:3%;
}
#arrow_left:hover, #arrow_right:hover {
bottom:45%;
}
#arrow_left:active, #arrow_right:active {
bottom:45%;
}
a {color:#666;text-decoration:none;}
a:hover {text-decoration:underline;}
/*I want to style my pager*/
#cycle-nav {
/* float:left;*/
margin-top: 8px;
margin-left: 0;
text-align: center;
}
#cycle-nav ul {
list-style-type:none;
width: 100%
}
#cycle-nav ul li {
/* border:1px solid #FF8000;*/
display: inline-block;
margin:3px;
}
#cycle-nav ul li a {
/*background: #057c96;*/
background: #49BED8;
float:left;
height:10px;
margin:2px;
width:10px;
}
#cycle-nav ul li a:hover {
background: #000;
opacity:0.6;
}
#cycle-nav ul li.activeSlide {
/* border:1px solid #000;*/
/* background: #075262;*/
}
#cycle-nav ul li.activeSlide > a {
background: #075262;
}
#controls-wrapper { margin:0 auto; height:42px; width:100%; bottom:70px; z-index:4; background:url(../img/nav-bg.png) repeat-x; position:fixed; }
#controls { width: 50%; float: left; }
.buton-controls{
width: 50%;
float: left;
text-align: center;
}
.buton-controls > div{
display: inline-block;
}
.button2{
background-color: red;
font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
height: 20px;
opacity: 0.4;
text-align: center;
width: 70px;
color:#FFFFFF;
}
.button2:hover{
background-color:#000;
cursor:pointer;
opacity:1 !important;
}
.button2hoverBg{
background-color:#137087 !important;
cursor:pointer;
opacity:1;
}
.button3{
background-color: red;
color:#FFFFFF;
font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
height: 20px;
opacity: 0.4;
position: relative;
text-align: center;
z-index: 10;
width: 70px;\
}
.button3:hover, a:hover{
background-color:#000;
cursor:pointer;
opacity:1 !important;
text-decoration:none;
color:#FFFFFF;
}
.button3 a{
color:#FFFFFF;
text-decoration:none;
}
.button1{
background-color: red;
color:#FFFFFF;
font: 14px/23px 'TitilliumText25L600wt',Arial,sans-serif;
height: 20px;
text-align: center;
width: 70px;
z-index: 10;
opacity: 0.4;
}
.button1 a{
color:#FFFFFF;
text-decoration:none;
}
Yes, use the vw and vh CSS properties.
1vw = 1% of window width,
1vh = 1% of window height.
http://demosthenes.info/blog/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design
**HTML**
<div class="bimage">
<img class="fimage" src="http://tinyurl.com/luzr4fr"/>
</div>
**CSS**
.bimage {
display: flex;
border:2px solid red;
width:100%;
height:300px;
background:url('http://tinyurl.com/orwbgck');
background-size:100%;
}
.bimage:hover{
background-size:120%;
}
.fimage {
width: 200px;
margin: auto;
}
Here I can zoom in image when mouse over on that image. But I need centerally zoom in image and animation effect with out increasing div width and height.
JSFIDDLE
You can add background-position:center along with background-size
.bimage {
display: flex;
border:2px solid red;
width:100%;
height:300px;
background:url('http://tinyurl.com/orwbgck');
background-size:100%;
transition:1s all;
background-position:center;
}
.bimage:hover{
background-size:200%;
}
.fimage {
width: 200px;
margin: auto;
}
<div class="bimage">
<img class="fimage" src="http://tinyurl.com/luzr4fr"/>
</div>
I am trying to design a mobile website. Need to get ABC middle vertically. I followed other SO questions reg how to get SPAN text vertically middle. But here its not working. I have included the jsfiddle. http://jsfiddle.net/3tdYT/ I am not sure what I am missing out.
<div id="main">
<div id="header">
<div id="logo"><img src="http://placehold.it/72x38"></div>
<div id="menu">a</div>
<div id="title-wrapper"><div id="title"><span id="screen-title">ABC</span></div></div>
</div>
<div id="company-name">CCCCCC</div>
</div>
* { margin:0; padding:0}
#header{
height:53px;
padding:0;
}
#logo{
float:left;
background: #ffffff;
padding:5px;
}
#title{
text-align:center;
height:100%;
margin:0 auto;
}
#title-wrapper{
height:100%;
background: #ff3eae;
}
#screen-title{
vertical-align: middle;
display: inline-block;
}
#menu{
width:20%;
height:100%;
float:right;
padding:0;
background: #E23222;
}
#company-name{
width:100%;
float:left;
background: darkblue;
clear:left;
padding:0px;
color: #ffffff;
text-align: center;
}
#main {width:240px}
Turn #title's display into a table and #screen-title's display into a table-cell:
/* ... */
#title{
display: table;
height:100%;
margin:0 auto;
}
/* ... */
#screen-title{
vertical-align: middle;
display: table-cell;
text-align: center;
}
http://jsfiddle.net/XMcCR/3/
But notice that there are lots of possibilitis to vertically center some text with css, each with its own specific disadvantages. This is just one possibility. Simply check some of the results of a quick Google search for "vertically center css". It almost appears to be some kind of own scientific field.
It seems that you have to set a static height and width for it.
That should work. have a try)
#screen-title{
display: table-cell;
height: 50px;
width: 200px;
text-align: center;
vertical-align: middle;
Add line-height: Xpx where X is a suitable value to get the effect you want (typically the same as the height of the element)
Im having trouble with my navigation bar hover effects specifically transitions(line 109/110). Essentially i want whichever link the mouse is hovering over to raise(margin increase of 2%) while the other links hold the margin of 0. The problem is that all the link margins increase by 2% whenever i hover on any of them. Its my first time posting so sorry for the messy code, if i broke any posting rules and/or if this question was unclear at all. I played around with it for abit and couldnt figure it out. Also if it is simpler i can figure out how to do it using javascript.
Cheers
<!DOCTYPE html>
<html>
<head>
<title>
Atticus Products
</title>
<script src="http://code.jquery.com
/jquery-1.9.1.js">
</script>
<script>
/*
$(document).ready(function(){
$("a").hover(function(){
$("a").animate({up:'250px'});
});
});
*/
</script>
<style>
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
font-size:100%;
background-color:#6ec247;
font-family: CaeciliaLTStd75Bold,Helvetica,Arial,Sans-serif;
}
#wrapper {
margin: 0 auto;
width: 50%;
height: 100%;
position: relative;
}
/*Header: Contains Logo and NavBar*/
#header {
border-bottom: 8px solid #f2f2f2;
overflow:hidden;
height: auto;
position:relative;
clear:both;
height:auto;
margin:0;
display:block;
}
#logoName {
max-width: 100%;
width:40%;
float:left;
height:150px;
}
#logoName a {
position:absolute;
bottom:0;
color:#FFFFFF;
text-decoration: none;
font-size:3em;
font-weight: bold;
}
/*NavBar*/
#nav {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
right:0;
width:60%;
float:right;
position:absolute;
bottom:0;
}
#nav li {
display: inline;
}
#nav li a {
display: inline-block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
font-size:1em;
margin-bottom:0;
}
#nav li a:hover {
color: #c00;
background-color: #000000;
opacity:0.5;
transition-property: margin-bottom;
transition-duration:4s;
margin-bottom:2%
/*this is where the problem is*/
}
/*Content: Contains Container1, LogoWords and Logo1*/
#content {
height: 60%;
text-align: center;
/*background-color: #4d8e2f;*/
color:#FFFFFF;
margin:0;
top:0;
display:relative;
font-weight: bold;
}
#container1 {
display: block;
max-width: 100%;
position:relative;
height:40.5%;
width:100%;
margin:0;
background-color:#6ec247 ;
z-index:0;
border-bottom: 8px solid #f2f2f2;
}
#logoWords{
z-index:1;
display:block;
position:absolute;
width:auto;
height:auto;
top:18.5%;
right:0;
color:#FFFFFF;
text-decoration: none;
font-size:2.5em;
font-weight: bold;
text-align:left;
}
#logo1 {
display:block;
z-index:1;
position:absolute;
left:0;
top:18.5%;
width:auto;
height:auto;
}
#content{
background-color:#6ec247 ;
}
#content p {
margin:0;
}
#footer {
height:10%;
width: 100%;
position: absolute;
bottom: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li>About</li>
<li>Our Approach</li>
<li>Careers</li>
<li>Contact</li>
</ul>
<div id="logoName">
Atticus <br>Products</br>
</div>
</div>
<div id="content">
<div id="container1">
</div>
<img id="logo1" src="image/justlogo.png" alt="logo" width="207"
height="214">
<div id="logoWords">
<p><br>We find the people</br> that make your company succeed</p>
</div>
<div id="content">
<p>
<br>Careers with Atticus</br>
</p>
</div>
</div>
<div id="footer">
<p>bam</p>
</div>
</div>
</body>
</html>
Your problem is in your jQuery.
Because you have $('a').animate it will effect every a element on the page.
You can get around this by changing 'a' to 'this' without quotation marks.
$(document).ready(function(){
$("a").hover(function(){
$(this).animate({up:'250px'});
});
});
This will only effect the element being hovered over.
Best of luck.