http://bmww.com/clients/phwm_sc_website/index.html
^ thats the link to the site being tested thus far. I took everyone's advice here and am working on removing the tables which i did for the head navigation. So now they are aligned side by side but the logo with the div needs to be higher but not the top is getting cut off.
Here is my html:
<div id="header" class="header2" align="center">
<div class="container3">
<div class="divrow"><h1><a class="ex1" href="index.html">[ HOME ]</a></h1></div>
<div class="divrow"><h1><a class="ex1" href="index.html">[ TEAMS ]</a></h1></div>
<div class="divrow1"><img align="middle" src="images/phwm_sc_logo.png" width="170" height="212" alt="logo" /> </div>
<div class="divrow"><h1><a class="ex1" href="index.html">[ STAFF ]</a></h1></div>
<div class="divrow"><h1>[ GALLERY ]</h1> </div>
</div>
</div><!--end red navigation header div-->
and here is my css:
.header1 { position:relative; top: 0px; z-index:10;
width: 100%; height:50px;
background: rgba(0, 54, 103, 0.6); /* Color white with alpha 0.9*/
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 54, 103) transparent;
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99003667, endColorstr=#99003667);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99003667, endColorstr=#99003667)";}
.header2 { position:relative; top:10px;
width: 100%; height:80px; z-index:50;
background: rgba(210, 6, 46, 0.4); /* Color white with alpha 0.9*/
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(210, 6, 46) transparent;
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99d2062e, endColorstr=#99d2062e);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99d2062e, endColorstr=#99d2062e)";}
.divrow { position: relative; display:inline; margin-top:30px;
float:left; }
.divrow1 { position:relative; display:inline; margin-top:-60px;
float:left; z-index:50; margin-bottom:-20px; }
.sponsor { position:absolute; top: 730px; z-index:10;
width: 100%; height:300px;
background-color: #FFF;
-webkit-box-shadow: 0 0 10px #FFF;
-moz-box-shadow: 0 0 10px #FFF;
box-shadow: 0 0 10px #FFF
}
.container1 { clear:both;
width: 960px; z-index:-1;
background-color: none; /* Color white with alpha 0.9*/
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
margin-top:60px;
}
.container2 {
width: 960px; z-index:-1;
background-color: none; /* Color white with alpha 0.9*/
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
margin-top:100px; }
.container3 {
width: 700px;
background-color: none; /* Color white with alpha 0.9*/
margin:auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
I can provide more if needed...i know this probably is a simple fix but i am still learning. Thanks in advance!
The CSS for divrow1 class has a typo. You have miss-spelled "position: absolute;" on line 134 of the CSS file. If you have the absolute spelled correctly the image will no longer be cut off.
If you remove the
overflow:hidden;
from .container3, your image will not be cut off.
This, however will distort your site. This is because the logo is too big, resize it to a height of around 190px and you'll be ok.
Add
clear: both;
to .container1
And remove
overflow:hidden;
from .container3
That should do the trick!
I notice that your .divrow1 margin need to be changed:
.divrow1 {
position: absoulte;
display: inline;
/*margin-top: -30px;*/
float: left;
}
EDIT:
You need to do little update to your layout, this is not the best approach but it might be the simple one:
<div class="container3">
<div class="divrow1">
<img align="middle" src="images/phwm_sc_logo.png" width="170" height="212" alt="logo">
</div>
<div class="divrow"><h1>[ HOME ]</h1></div>
<div class="divrow"><h1>[ TEAMS ]</h1></div>
<div class="separator"></div>
<div class="divrow"><h1>[ STAFF ]</h1></div>
<div class="divrow"><h1>[ GALLERY ]</h1> </div>
</div>
Revised CSS:
.divrow1 {
position: absolute;
display: block;
margin-top: -50px;
margin-left: 200px;
}
.separator {
float: left;
width: 150px;
margin-top: 30px;
}
Related
i'm having trouble making a custom pure css mobile first responsive navigation from scratch. i have this navigation menu i found on the internet and trying to manipulate the code so i can have a horizontal navigation bar on an inline block. I want the navigation bar to uncollpase as it was for a desktop version and show the links when i set a media query at min-width: 480px and hide the navicon. Not sure how exactly to go about it. This is what i have so far. any help would be appreciated thank you. Here's the original navigation bar code unedited that i tried to modify
DEMO: http://cssdeck.com/labs/dropdown-menu
HTML:
<body>
<div id="header">
<div id="logo">
</div>
<input type="checkbox" class="checkbox" name="menu" value="mobiledropmenu" id="mobiledropmenu">
<label for="mobiledropmenu" class="label"><img src="http://developer.jmbarcelon.com/Images/dropmenu.png"></label>
<div class="title">
<div class="button">Home</div>
<div class="button">Casa</div>
<div class="button">Zahause</div>
<div class="button">Maison</div>
</div>
<h1>Drop-Down Menu</h1>
</div>
CSS:
background:#E5F2FF;
}
#header {
width:100%;
background:#72BBFF;
z-index:2;
}
.checkbox {
display: none;
}
.label{
-webkit-transition:.3s;
-moz-transition:.3s;
-o-transition:.3s;
transition:.3s;
width: 64px;
height:64px;
font-size: 20px;
display: inline-block;
background-size:cover;
margin:.5em;
background:rgba(0,132,255,0.15);
box-shadow: 1px 1px 5px rgba(0, 135, 255,0.5);
border-radius:1px;
}
.checkbox:checked + .label {
-webkit-transition:.3s;
-moz-transition:.3s;
-o-transition:.3s;
transition:.3s;
box-shadow:inset 0px 0px 10px rgba(0, 135, 255,0.5);
background:rgba(0,132,255,0.3)
}
#mobiledropmenu:checked ~ .title {
-webkit-transition:1s;
width: 100%;
height: 250px;
opacity: 1;
}
.title {
-webkit-transition:1s;
width: 0%;
height: 0px;
opacity: 0;
}
.button {
color:#fff;
text-decoration:none;
border-top:1px solid #fff;
text-align:center;
text-transform:uppercase;
width:100%;
padding:1.2em;
}
.button:hover {
cursor:pointer;
background:rgba(0,132,255,0.15);
}
h1 {
width:100%;
color:rgba(188, 230, 255, 0.2);
text-align:center;
text-transform:uppercase;
text-shadow: 1px 3px 6px #E5F2FF,
0 0 0 #47a0d3,
1px 4px 6px #E5F2FF;
font-weight:lighter;
font-size:2.5em;
position:absolute;
margin-top:10%;
}
#media only screen and (min-width: 480px){
h1{color: red;}
.label {display: none;}
.title {display: inline-block;
OK, I removed the false start and here's a working example for you based on your edited question. I added this under the CSS in your linked code:
#media only screen and (min-width: 480px){
/* always show the nav, and make it a fixed height */
.title {
width: 100%;
height: 50px;
opacity: 1;
}
/* change nav items to be horizontal and only as big as they need */
.button {
height: 50px;
display: inline-block;
width: auto;
}
/* hide the menu toggle button */
.label { display: none; }
}
What this does is hide the menu toggle and switch the nav to always be visible, and be horizontal. Example is here: http://cssdeck.com/labs/hehuga5u (resize the right pane to see it in action)
Again, you'll have to tweak to get your exact needs, but this should be much closer to what you need. Good luck!
Container #666 has margin: 20px; overflow: hidden;.
Nodes #333 have margin: 20px 0 0 20px; float: left;.
Example, http://jsbin.com/owejal/3/edit or picture:
However, the intended result is:
container with 20px margin,
children with 20px margin in-between, but not with the container.
This could be achieved using negative padding (i.e. if container had padding: -20px 0 0 -20px), though such thing does not exist.
The desired result can be achieved using additional element (http://jsbin.com/owejal/4/), though I am keen to learn whether there is CSS only solution.
If you only care about the spacing between the elements, you can discard the pseudo element. It's only there for the background.
http://codepen.io/cimmanon/pen/mucDv
<div class="foo"></div>
<div class="group">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="foo"></div>
The CSS:
.group {
overflow: hidden;
margin: -10px 0 -10px 10px;
padding-right: 10px;
position: relative;
}
.group:before {
display: block;
content: '';
position: absolute;
z-index: -1;
top: 10px;
right: 20px; /* 20px instead of 10px due to padding */
bottom: 10px;
left: 10px;
background: #666;
}
.node {
width: 100px;
height: 100px;
float: left;
background: #333;
margin: 10px;
}
.foo {
height: 20px;
background: #00f;
margin: 20px;
}
This is a little hacky, but how about just hiding the top and left margin areas with some strategically placed pseudo-elements?
http://jsfiddle.net/SUJtd/
.foo {height:20px; background:#00f; margin:20px 20px 0;}
.group {overflow:hidden; margin:0 20px 20px 0; background:#666; position:relative;}
.group:before{content:""; position:absolute; top:0; left:0; right:0; height:20px; background:#fff;}
.group:after{content:""; position:absolute; top:0; bottom:0; left:0; width:20px; background:#fff;}
.node {width:100px; height:100px; float:left; background:#333; margin:20px 0 0 20px;}
No extra HTML tag - but a class change & No Pseudo elements
A simple trick which probably should work for you :
http://jsbin.com/owejal/65/edit
Screenshot:
Will work with all possible number of nodes :)
<div class="foo"></div>
<div class="group">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="foo2"></div>
CSS:
.group { overflow: hidden; margin: 20px; margin-bottom:0px; /* margin is required */ background: #666; }
.node { width: 100px; height: 100px; float: left; background: #333; margin: 0px 20px 20px 0px; /* there must 20px gap between every node, but not the container */ }
.foo { height: 20px; background: #00f; margin: 20px;}
.foo2{
height:20px;
background:#00f;
border-top:20px solid white;
margin:20px;
margin-top:-20px;
}
Since you didn't mention resizability as requirement, you could simple use a nth child declaration like in here:
http://jsbin.com/owejal/51/
However, this solution is optimized for fixed widths of parent container, so there should always be 4 elements in a row for example. Nevertheless, its css only.
Change the margin of the node to:
.node { margin: 0 20px 20px 0; }
See http://jsbin.com/owejal/52/edit. Note that this will still give you extra padding at the bottom, but this is a common issue that isn't easily solved. See http://css-tricks.com/spacing-the-bottom-of-modules/ for various ways to solve this (though in the case you presented, none of these solutions work).
The following CSS will get you the desired result, actually you will still have 2 limitations:
If you change the background of body, you need to update the border color for element .foo
The inner nodes still have right margin, this is also the case your desired result screen shot (.group can have 5 nodes, but in this solution it will only have 4).
.group {
overflow: hidden;
margin: 20px; /* margin is required */
background: #666;
}
.node {
width: 100px;
height: 100px;
float: left;
background: #333;
margin: 0px 20px 20px 0px;
}
.foo {
height: 20px;
background: #00f;
margin: 20px;
}
.group + .foo {
height: 20px;
background: #00f;
margin: 20px;
position: relative;
top:-40px;
border-top: 20px solid #fff;
}
You can still find the solution here
I have an image which is e.g. the width 450px, and a container which is only 300. Is it possible to center the image inside the container with CSS, when the width of the image isn't constant (Some images might be 450 wide, other 600 etc.). Or do I need to center it with JavaScript?
This any good? http://jsfiddle.net/LSKRy/
<div class="outer">
<div class="inner">
<img src="http://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" />
</div>
</div>
.outer {
width: 300px;
overflow: hidden;
}
.inner {
display: inline-block;
position: relative;
right: -50%;
}
img {
position: relative;
left: -50%;
}
Proposition 1 :
.crop {
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
border:1px solid #ccc;
}
/* input values to crop the image: top, right, bottom, left */
.crop img {
margin:-20px -15px -40px -55px;
}
Proposition 2 :
.crop{
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
position:relative; /* this is important too */
border:1px solid #ccc;
width:150px;
height:90px;
}
.crop img{
position:absolute;
top:-20px;
left:-55px;
}
proposition 3:
.crop{
float:left;
position:relative;
width:150px;
height:90px;
border:1px solid #ccc;
margin:.5em 10px .5em 0;
}
.crop p{
margin:0;
position:absolute;
top:-20px;
left:-55px;
clip:rect(20px 205px 110px 55px);
}
Proposition 4 (hold-school efficiency):
.container {
width:400px;
height:400px;
margin:auto;
overflow:hidden;
background:transparent url(your-image-file.img) no-repeat scroll 50% 50%;
}
Of course you will need to ajust the .css to suit your own needs
Carry on.
but instead of hiding part of theimage why don't you put it like
<div id="container" style="width: 300px">
<img src="yourimage" width="100%">
</div>
How can I get <div id="green_bar"> to overlap <div id="top_header"> and stop at the left edge of the logo? I'm trying to get the green bar to expand to the left when the screen width is expanded, but I want it to stop at the left edge of the logo.
I've tried position: absolute; on #green_bar but it expands it 100% across the screen.
JSFiddle: http://jsfiddle.net/hfgQt/14/
HTML:
<div id="header_bar"></div><!-- Grey line on top -->
<div id="top_header"><!-- begin top header -->
<div id="green_bar"></div>
<div class="wrap">
<div id="logo">
<a><h1>info</h1></a>
</div>
</div>
</div><!-- end top header -->
CSS
.wrap {
margin:0px auto;
width:960px;
}
#header_bar {
background-color: #424243;
height: 25px;
}
#top_header {
padding:0px 0px;
background-color:#24303d;
background-image:url("http://i.imgur.com/kGjGG.png");
border-bottom:1px solid rgba(0,0,0,.4);
overflow:hidden;
}
#green_bar {
display: block;
height: 10px;
width: 100%;
background-color: green;
}
#logo {
float:left;
clear:both;
}
#logo h1 {
margin:0px;
padding:0px;
background:url(../images/logo.png) no-repeat;
text-indent:-9999px;
width:258px;
height:56px;
}
Try the snippet below.
As I understand your problem, the trick is to get something that is half of (browser width - 960px). That's the amount of the left margin. I used an extra wrapper div to cut out the fixed width (should be 960px, but I changed it to 480px to get it to look OK in jsfiddle). It's position: absolute to get it out of the flow. Then the inner div (#green_bar) simply has width: 50% to cut it down to half the width of both margins put together - the width of the left margin only.
It's hard to understand what you want, so I might have done the wrong thing. Let me know if you need any more help.
header {
padding-bottom:5px;
margin-bottom:35px;
background:#ffdf85;
border-bottom:1px solid #d4d4d4;
background-color:#ffdf85;
}
.wrap {
margin:0px auto;
width:480px;
background: rgba(128, 128, 0, .5);
overflow: hidden;
}
#header_bar {
background-color: #424243;
height: 25px;
}
#top_header {
padding:0px 0px;
background-color:#24303d;
background-image:url("http://i.imgur.com/kGjGG.png") no-repeat;
border-bottom:1px solid rgba(0,0,0,.4);
overflow:hidden;
position: relative;
}
#green_bar_wrapper {
position: absolute;
padding-right: 480px;
left: 0;
right: 0;
top: 0;
}
#green_bar {
width: 50%;
height: 10px;
background-color: green;
}
/* 3.0.0 Logo
----------------------------------------*/
#logo {
float:left;
clear:both;
}
#logo h1 {
margin:0px;
padding:0px;
background:url(http://i.imgur.com/kGjGG.png) no-repeat;
width:258px;
height:56px;
}
#logo h1 span {
text-indent: -9999px;
}
<header><!-- BEGIN HEADER -->
<div id="header_bar"></div><!-- Grey line on top -->
<div id="top_header"><!-- begin top header -->
<div id="green_bar_wrapper"><div id="green_bar"></div></div>
<div class="wrap">
<div id="logo">
<h1><a><span>info</span></a></h1>
</div>
</div>
</div><!-- end top header -->
</header><!-- END HEADER -->
In a big div I have search box which basically is a div having text box glass image and button. Requirement is to positioned this search wizard vertically in middle and on right side in div. This box is coming on top left inside div. I have tried different things but not getting how to set it. Please guide me.
Thanks
<div class="Right">
<div class="header-search" style="position: relative; top: auto; bottom: auto; right: 0 left:100%;
margin: auto 0 auto auto;">
<input type="text" class="searchbox" />
<input type="button" class="searchbutton" value="›" />
</div>
</div>
div.Container div.Right
{
width:50%;
float:right ;
border: 01px dashed green;
height:95px !important;
padding:auto 0 auto 200px;
}
div.header-search
{
overflow:auto;
display:inline;
text-align:right !important;
border:3px dashed blue;
padding:20px 0 auto 50px;
}
div.header-search input.searchbox
{
border-bottom-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-bottom-left-radius:5px;
border-top-left-radius:5px;
-webkit-top-left-radius:5px;
-moz-left-radius:5px;
border:2px solid #316200;
background-color:white;
height:16px;
padding:4px;
padding-left:28px;
padding-right:10px;
color:#4a4a4a;
float:left;
background:white url(../images/SearchImage.png) 0 50% no-repeat;
}
div.header-search input.searchbutton
{
border-bottom-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-bottom-right-radius:5px;
border-top-right-radius:5px;
-webkit-top-right-radius:5px;
-moz-right-radius:5px;
background:#458A00;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A5D376', endColorstr='#326400'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#A5D376), to(#326400)); /* for webkit browsers */
background: -moz-linear-gradient(top, #A5D376, #326400); /* for firefox 3.6+ */
width:50px;
height:28px;
color:White;
font-size:16px;
font-weight:bold ;
border:2px solid #316200;
border-left:none;
}
The first step in understanding how positioned elements is reading an article like this one:
CSS-Tricks.com - absolute positioning inside relative positioning
you are using position: relative on the wrong div as it should be assigned to .Right- while header-search should have instead 'position: absolute;' and values for left/right and top/bottom
the article above explains it much better than I could ever do!
Perhaps this would be a good starting point:
<div class="Right">
<div class="header-search">
<input type="text" class="searchbox" />
<input type="button" class="searchbutton" value="›" />
</div>
</div>
div.Container div.Right {
position: relative;
width: 50%;
float: right;
border: 1px dashed green;
height: 95px !important;
padding: auto 0 auto 200px;
}
div.header-search {
position: absolute;
right: 0;
top: 0;
overflow: auto;
display: inline;
text-align: right !important;
border: 3px dashed blue;
padding: 20px 0 auto 50px;
}
remove all styling from your div's as this is bad practice. Next, convert your two styles for .Right and .header-search like this:
div.Right {
border: 1px dashed green;
height:95px;
position: relative;
}
div.header-search {
border:1px dashed blue;
position: absolute;
top: 30px;
right: 0;
}
This should accomplish what you are attempting. There isn't a clean, easy way to center vertically, but since you have a fixed height on the outter .Right div and a fixed height on the search elements, it's best just to use a fixed top position on the inner .header-search.
You can see it in action on this jsfiddle:
http://jsfiddle.net/L4sgc/