This is my website:
http://www.jrbaldwin.com
I'm having a problem of my left sidebar getting cutoff when the window is reduced past a certain width. I assume it's a simple CSS issue, but I am not sure.
remove Position fixed and negative margin
#sidebar {
border-bottom: 0 solid #E7E7E7;
border-right: 0 solid #E7E7E7;
color: #59454F;
float: left;
font-size: 13px;
width: 132px;
}
so you can use different way, replace these 3 Classes:
#header {
border-bottom: 0 solid #E7E7E7;
height: 65px;
margin-left: 135px;
margin-right: 20px;
}
#outer {
border-bottom: 0 solid #E7E7E7;
border-left: 0 solid #E7E7E7;
border-right: 0 solid #E7E7E7;
border-style: solid;
line-height: 1.4;
margin-left: auto;
margin-right: auto;
width: 1055px;
}
#sidebar {
border-bottom: 0 solid #E7E7E7;
border-right: 0 solid #E7E7E7;
color: #59454F;
float: left;
font-size: 13px;
margin: 0 0 -1px;
overflow: hidden;
position: relative;
width: 132px;
}
There is a margin-left of -149px on the #sidebar. Setting this to 0px will fix your issue.
Related
I'm trying to create a "price tag" shape using CSS, with the sharper edge facing to the right. When the edge of the tag is facing left, there's no problem adding text (be it short or long), since the triangle is static and only the rectangle is stretching.
I need to create the same thing but with "elastic" right facing triangle, to keep using only one class and not a dedicated class for each text length.
For both examples please see this fiddle.
.pricetag {
position: relative;
margin: 0 5px 0 10px;
displaY: inline-block;
height: 46px;
padding: 0 35px 0 15px;
background: #E8EDF0;
font-size: 20px;
line-height: 41px;
}
.pricetag:after {} .pricetag:before {
position: absolute;
content: "";
left: -15px;
width: 1px;
height: 0px;
border-right: 14px solid #E8EDF0;
border-top: 23px solid transparent;
border-bottom: 23px solid transparent;
}
/**********/
.pricetag-right {
position: relative;
margin: 0 5px 0 10px;
displaY: inline-block;
height: 46px;
padding: 0 35px 0 15px;
background: #E8EDF0;
font-size: 20px;
line-height: 41px;
}
.pricetag-right:after {} .pricetag-right:before {
position: absolute;
content: "";
left: 382px;
width: 1px;
height: 0px;
border-left: 14px solid #E8EDF0;
border-top: 23px solid transparent;
border-bottom: 23px solid transparent;
}
<span class="pricetag">no problem with long text</span>
<br>
<br/>
<span class="pricetag-right">need to create a new class for each length</span>
You just need to position the arrow according to the right side of the tag with the right property instead of the left property :
.pricetag {
position: relative;
margin: 0 5px 0 10px;
display: inline-block;
height: 46px;
padding: 0 35px 0 15px;
background: #E8EDF0;
font-size: 20px;
line-height: 41px;
}
.pricetag:before {
position: absolute;
content: "";
left: -15px;
width: 1px;
height: 0px;
border-right: 14px solid #E8EDF0;
border-top: 23px solid transparent;
border-bottom: 23px solid transparent;
}
/**********/
.pricetag-right {
position: relative;
margin: 0 5px 0 10px;
display: inline-block;
height: 46px;
padding: 0 35px 0 15px;
background: #E8EDF0;
font-size: 20px;
line-height: 41px;
}
.pricetag-right:before {
position: absolute;
content: "";
right: -15px;
width: 1px;
height: 0px;
border-left: 14px solid #E8EDF0;
border-top: 23px solid transparent;
border-bottom: 23px solid transparent;
}
<span class="pricetag">no problem with long or short text (length auto adjusts)</span>
<br>
<br/>
<span class="pricetag-right">need to create a new class for each length</span>
<br/>
<br/>
<span class="pricetag-right">need to create a nqsdqsdqsdqsdqsdqsdew class for each length</span>
I want div 2 to stay fixed to the top of the screen when the browser scroll reaches the navigation bar. How would i do this ?
My current styles probably suck as im still learning from google but here they are:
/*main wrapper*/
#main {
width: 90%;
height: auto;
margin-left:auto;
margin-right:auto;
}
/*logo start*/
#logo {
background-color: #e6e6e6;
position: relative;
padding: 2px;
margin: 0px;
border: 3px solid #000000;
border-radius: 25px 25px 0px 0px;
height: 174px;
width: 100%;
}
/*navigation bar start*/
#nav-outer {
position: relative;
width: 100%;
margin-bottom: 40px;
}
#nav-box {
width: auto;
display: inline-block;
position: absolute;
top: -3px;
padding-left: 15px;
background-color: #e6e6e6;
border-left: 3px solid #000000;
border-right: 3px solid #000000;
border-bottom: 3px solid #000000;
border-radius: 0px 0px 15px 15px;
text-align: left;
}
For an easy solution, there is this jQuery plugin:
http://stickyjs.com
And a tutorial for it:
http://www.websitecodetutorials.com/code/jquery-plugins/sticky-js-position-fixed-at-certain-point-in-page.php
Because this is such a common issue, there is also a new CSS position value called sticky which will do exactly what you want. If you're interested in that then there's a great article about it here:
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
Ok, set the position then to:
#nav-box {
position: fixed;
..
..
I need to make a box using css containing arc as shown in image . I want to do this using pure CSS. I am able to make arcs but not able to draw line. Here is my html and css code.
<style type="text/css">
.left_arc{
border-bottom: 1px solid #D0BFA6;
border-radius: 0 0 360px 0;
border-right: 1px solid #D0BFA6;
float: left;
height: 11px;
padding-top: 1px;
width: 11px;
}
.right_arc{
border-bottom: 1px solid #D0BFA6;
border-left: 1px solid #D0BFA6;
border-radius: 0 0 0 360px;
float: left;
height: 11px;
padding-top: 1px;
width: 11px;
}
.text_arc {
background: none repeat scroll 0 0 #FEEEEA;
border-top: 1px solid;
color: #A29061;
float: left;
font-family: times new roman;
font-size: 16px;
font-style: italic;
letter-spacing: 1px;
padding-left: 18px;
padding-top: 6px;
text-transform: uppercase;
width: 88px;
}
</style>
<div class="main_style">
<div class="left_arc"></div>
<div class="text_arc">Canada</div>
<div class="right_arc"></div>
</div>
Here is the output of my code.
LIVE DEMO
Simplify your HTML markup
and create crazy things using the CSS pseudo :before and :after selectors
HTML
<div class="main_style">
<div class="text">Canada</div>
</div>
<div class="main_style">
<div class="text">USA</div>
</div>
CSS:
.main_style {
background: none repeat scroll 0 0 #FEEEEA;
font: italic normal normal 16px/1em Times, "Times New Roman", serif;
text-transform: uppercase;
text-align:center;
letter-spacing: 1px;
color: #A29061;
position:relative;
overflow:hidden;
float: left;
}
.text{
border: 1px solid #D0BFA6;
padding:8px 20px 4px;
}
.main_style:before, .main_style:after{
content:'';
position:absolute;
top:-13px;
width:24px;
height:24px;
background:#fff;
border: 1px solid #D0BFA6;
border-radius: 42px;
}
.main_style:before{
left:-13px;
}
.main_style:after{
right:-13px;
}
You can just create a border with negative radius for only the top corners. See this post for more info...
Add extra Corner class to your left_arc and right_arc divs.
That will be shown in this JSBin.
.text_arc {
background: none repeat scroll 0 0 #FEEEEA;
border-top: 1px solid;
color: #A29061;
float: left;
font-family: times new roman;
font-size: 16px;
font-style: italic;
letter-spacing: 1px;
padding-left: 18px;
padding-top: 6px;
text-transform: uppercase;
width: 100px;
}
.corner {
position: absolute;
height: 10px;
width: 10px;
border: 1px solid #333;
background-color: #fff;
}
.left_arc {
top: -1px;
left: -1px;
border-radius: 0 0 100% 0;
border-width: 0 1px 1px 0;
}
.right_arc {
top: -1px;
left: 110px;
border-radius: 0 0 0 100%;
border-width: 0 0 1px 1px;
}
.main_style {
position: relative;
margin: 30px;
width: 119px;
height: 28px;
background: #ccc;
border: 1px solid #333;
}
I'm building a fairly interestingly shaped navigation for a site at the moment. The shape each menu item needs to be is illustrated below:
The final nav will look like an extended version of this:
I thought it would be an interesting experiment to do these shapes in CSS. The CSS and HTML for one of the arrow shapes is here:
.arrowEndOn {
font-size: 10px; line-height: 0%; width: 0px;
border-top: 11px solid #FFFFFF;
border-bottom: 11px solid #FFFFFF;
border-left: 5px solid transparent;
border-right: 5px solid #FFFFFF;
float: left;
cursor: pointer;
}
.arrowBulkOn {
height: 20px;
background: #FFFFFF;
padding: 2px 5px 0px 0px;
float: left;
color: #000000;
line-height: 14pt;
cursor: pointer;
}
.arrowStartOn {
font-size: 0px; line-height: 0%; width: 0px;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 5px solid #FFFFFF;
border-right: 0px solid transparent;
float: left;
cursor: pointer;
}
<div id="nav" class="navArrow" style="position: relative;">
<div class="arrowEndOn" id="nav"> </div>
<div class="arrowBulkOn" id="nav">NAV</div>
<div class="arrowStartOn" id="nav"> </div>
</div>
Each nav item has a negative offset applied to it (which I've left out of the demo) as it's rendered to get them all flush with each other.
I'm handling the rollovers and on states with Javascript.
My problem is getting the nav to stretch all the way across the width of the page. At the moment I have to set the nav container to a much larger width to accommodate it all.
I've tried setting overflow to hidden but the last item is dropping down a level rather than carrying on and just having the end cut off.
I've set an example up here - http://jsfiddle.net/spacebeers/S7hzu/1/
The red border has overflow: hidden; and the blue doesn't.]
My question is: How can I get the boxes to all float in a line that fills the width of the containing div without them dropping down a level.
Thanks
Add a negative margin to each arrow:
.navArrow {
float: left;
margin-left: -8px;
}
Demo: http://jsfiddle.net/S7hzu/2/
Flexbox
You can use this example
https://codepen.io/WBear/pen/pPYrwo
it works on new browsers, to support old ones some changes needed.
HTML:
<div class="content">
<div class="as1">
NAV
</div>
<div class="as2">
NAV
</div>
<div class="as3">
NAV
</div>
</div>
CSS:
.content {
margin-top: 10px;
width: 100%;
display: inline-flex;
}
.as1, .as2, .as3 {
height: 70px;
min-width: 8%;
max-width: 100%;
background-color: black;
position: relative;
display: inline-flex;
text-align: center;
flex-wrap: wrap;
flex-grow: 1;
}
.as1 a, .as2 a, .as3 a {
text-decoration: none;
display: inline-flex;
color: white;
margin: auto;
font-size: 14pt;
}
.as1:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid black;
border-bottom: 35px solid transparent;
z-index: 2;
}
.as2 {
background-color: grey;
margin-left: -29px;
}
.as2:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid grey;
border-bottom: 35px solid transparent;
z-index: 3;
}
.as3 {
background-color: #A9A9A9;
margin-left: -29px;
}
I'm trying to get 2 divs to sit side by side, a div for an ad (skyscraper_ad), and a main black (smaller_main) but when I add a float the DIV will overlap another DIV, can somebody help?
My css:
#skyscraper_ad {
display: block;
width: 160px;
height: 600px;
padding: 5px;
margin-right: auto;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
position:relative;
margin-bottom: 4px;
}
#smaller_main {
display: block;
width: 605px;
height: auto;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
position:absolute;
padding: 5px;
float: right;
margin-bottom: 4px;
}
This should work:
#skyscraper_ad {
width: 160px;
height: 600px;
padding: 5px;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
margin-bottom: 4px;
float:left;
}
#smaller_main {
width: 605px;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
padding: 5px;
float: left;
margin-bottom: 4px;
}
I took out your references to margin, positioning, and display. (and a height:auto which was meaningless as far as i could see). The margin auto was meaningless, the positioning was probably causing overlap, and the display was redundant (divs are already block)