I have an <H2> with a background that has rounded corners. I'm looking for a way to create a 1px line that moves from the box to end of the container at the right. Does anyone have an idea?
Well, I finally gave up and stuck some divs in my h2. :(
CSS
#content h2 {
background: url(../images/bg-page-title.png) -900px 0px no-repeat;
font: 1.4em Georgia, Times, Arial bold;
height: 40px;
margin: 0px 20px;
text-transform: uppercase;
}
#content h2 .head {
background: url(../images/bg-page-title.png) no-repeat;
float: left;
padding: 8px 20px;
height: 100%;
}
#content h2 .tail {
background: url(../images/bg-page-title.png) -857px 0px no-repeat #ffffff;
float: left;
height: 100%;
width: 15px;
}
HTML
<h2>
<div class="head">Find A Job</div>
<div class="tail">& nbsp;</div>
</h2>
Include the line in the background image
Related
I have a background image with a h1 and paragraph tag on top. I wish to create a border around the h1 tag without affecting the padding or margin of the header. When I create the border, it surrounds the text and the top padding. Is there a way to apply a border around the text only?
The complete code is on JSFiddle here.
The CSS code is here:
header {
background-image: url("https://images.pexels.com/photos/8263/pexels-
photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
height: 500px;
padding: 0;
margin: 0;
background-attachment: fixed;
background-size: cover;
text-transform: capitalize;
}
h1 {
color: black;
text-align: center;
display: block;
font-size: 50px;
padding-top: 180px;
margin: 0;
}
Is this what you are after?
Below is the code that was used to get the effect. You can have a play with the padding and margins for the H1 to space it out if you want.
body{
background-color: #404040;
}
header{
background-image: url("https://images.pexels.com/photos/8263/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
height: 500px;
padding: 0;
margin: 0;
background-attachment: fixed;
background-size: cover;
text-transform: capitalize;
padding-top: 180px;
text-align:center;
}
h1{
color: white;
text-align: center;
font-size: 50px;
padding:0px;
border:1px solid #000000;
display:inline-block;
margin:0 auto;
line-height:40px;
}
p{
color: white;
text-align: center;
font-size: 30px;
}
<body>
<header>
<h1>Guitar Covers</h1>
<p>This is a new page for uploading my Guitar Covers to share with the world</p>
</header>
</body>
I went a different rout and created a wrapper around the H1 with the padding-top
https://jsfiddle.net/9ss2g8eL/1/
<body>
<header>
<div id="h1_surround">
<h1>Guitar Covers</h1>
</div>
<p>This is a new page for uploading my Guitar Covers to share with the world</p>
</header>
</body>
body{
background-color: #404040;
}
header{
background-image: url("https://images.pexels.com/photos/8263/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
height: 500px;
padding: 0;
margin: 0;
background-attachment: fixed;
background-size: cover;
text-transform: capitalize;
}
#h1_surround{
padding-top:180px;
}
h1{
color: white;
text-align: center;
display: block;
font-size: 50px;
margin: auto;
border:1px solid #FF0000;
width:350px;
}
p{
color: white;
text-align: center;
font-size: 30px;
}
I would like to have my Header Elements stack on top of each other to the right hand side of the screen (H1 element with the H2 element right under it). I am just starting to get a hang of CSS so do bear with me. Tried searching online for solutions but was only able to find an answer for when there was a single element.
Anyways this is what the page is looking like right now on screen:
The blue "We Help People and Businesses" is an H1 Element. The white "Achieve today's Goals and tomorrow's Aspirations" is an H2 Element. Both of these Header elements are nested within a DIV
Currently the CSS code is looking like this:
.hero01_content-div {
margin-top: 400px;
}
.hero01_content-head-test-main {
position: relative;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
float: right;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}
.hero01_content-subhead-test-main {
position: relative;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
float: right;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}
How can I make the H2 element stack right under my H1 element with both of these elements on the right hand side? I would appreciate any help. Thank you in advance.
A codepen demonstrating the above can be found here: http://codepen.io/anon/pen/qOoVxb
You need to set float: right to the parent container and remove the floating properties from the heading element as it takes it out of the normal flow.
Codepen Demo
.hero01_content-div {
margin-top: 400px;
float: right; /* Added */
}
.hero01_content-head-test-main {
position: relative;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}
.hero01_content-subhead-test-main {
position: relative;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
float: right;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}
<div class="w-section hero-01">
<div class="hero01_overlay">
<div class="w-container hero01_content">
<div class="w-clearfix hero01_content-div hero01_test" data-ix="scroll-reveal">
<h1 class="hero01_content-head-test-main">We Help People and Businesses</h1>
<h2 class="hero01_content-subhead-test-main">Achieve today's Goals and tomorrow's Aspirations</h2>
</div>
</div>
</div>
</div>
OK you need to remove
.hero01_content-div {
margin-top: 400px;
float: right;
}
Then change these
.hero01_content-head-test-main {
postion: absolute;
top: 0px;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
float: right;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}
.hero01_content-subhead-test-main {
float: right;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}
The div class circle renders on the right had page but even adding margin:0 auto; nothing works it just stays there what gives.
Here is my html/php
<?php
/*
Template Name: Home Page
*/
?>
<?php get_header(); ?>
<div id="content">
<header>
<h1><span class="tech">TECH</span><span class="basics">BASICS</span></h1>
<h2>Personal Tech Specialists</h2>
</header>
<div class="circle"></div>
</div> <!-- end #content -->
<?php get_footer(); ?>
Here is my css
html {
font-size: 16px;
}
body {
background: #BAE4FF;
font-family: "Open Sans", sans-serif;
}
nav {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
font-weight: 400;
}
nav .menu {
list-style-type: none;
padding: 0;
margin: 0;
}
nav .menu li {
padding: 3px 0 3px 0;
display: none;
}
nav .menu li a {
text-decoration: none;
color: #fff;
font-size: 2.1em;
}
nav .menu .blog {
background: #1669B5;
}
nav .menu .contact {
background: #3892E3;
}
nav #touchNav {
background: #48B4EF;
width: 100%;
display: block;
color: #fff;
font-size: 2.1em;
padding: 3px 0 3px 0;
text-decoration: none;
}
header {
margin: 50px 0 0 0;
margin-top: 50px;
text-align: center;
width: 100%;
}
header h1 {
margin: 0 auto;
width: 100%;
}
header h1 .tech {
color: #fff;
font-weight: 500;
margin-right: 3.5px;
font-size: 1.1em;
}
header h1 .basics {
color: #48B5EF;
margin-left: 3.5px;
font-size: 1.3em;
}
header h2 {
font-size: 2.1em;
font-weight: 100;
width: 100%;
margin: 0 auto;
color: #fff;
line-height: 1.2em;
}
.circle {
margin-top: 100px;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 auto;
}
try to add position tag.. u can use fixed as position or relative whatever suits your needs.. to the .circle class.
Your circle class margins are funny.
Try this instead:
.circle {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
http://jsfiddle.net/q5w3G/1/
One should think that this will work too but trust the first one more:
.circle {
margin: 0 auto;
margin-top: 100px;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
http://jsfiddle.net/q5w3G/2/
CSS means Cascading style sheets. Cascading means that if one property is defined two or more times for the same element then the property read last is applied. So if you define margin on circle, then again latter in the same style sheet, then again later in a second style sheet with its rel link after the first in the head section, then in the head section itself after the rel links in a style tag, then again inline on the element itself, then the inline value is used. In fact that is the order they are used.
it would be beeter to have an example of page when you ask about css,
but here is the real problem for you
in css margin top does not work as you expect.
its not making a space on the top of your elements unless all the elements be in the same parent z-index (or simpler i mean they all have one parent) i.e all li's within a ul.
the top margin affects space between li's not between li and ul.
for making that you should give the ul a padding-top.
Hope it helps
I'm trying to remove the top spacing of my layout I am working on, which you can view here: 50.116.81.173/~speedcit/wordpress/. However, I don't seem to be having much luck with it. I essentially would like to remove the white spacing at the top of the page.
Below is the CSS code I am currently using:
body, html {
font-family: Arial;
font-size: 11.5pt;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
table, tr, td, div {
font-family: Arial;
font-size: 11.5pt;
}
#outer {
text-align: center;
margin: 0px;
}
#wrapper {
border-left: 1px #000000 dotted;
border-right: 1px #000000 dotted;
padding-top: 2px;
padding-left: 2px;
text-align: left;
width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
#header {
background-image: url(http://50.116.81.173/~speedcit/images/header.jpg);
width: 1024px;
height: 280px;
}
#menu {
width: 1024px;
height: 61px;
}
#content {
background-image: url(http://50.116.81.173/~speedcit/images/content-bg.jpg);
background-repeat: no-repeat;
width: 804px;
height: 357px;
padding-top: 80px;
padding-bottom: 10px;
padding-left: 110px;
padding-right: 110px;
line-height: 24pt;
}
#footer {
margin: 0px;
padding: 0px;
}
.txt {
color: #BF2736;
font-weight: bold;
}
Add padding 0 to your wrapper. CSS reset should fix your problem but might create new ones.
http://meyerweb.com/eric/tools/css/reset/
#wrapper {padding:0;}
The root cause to the problem is that you did not reset the way in which the browser renders CSS back to zero.
Change the Padding of the #wrapper to Zero
#wrapper {
border-left: 1px #000000 dotted;
border-right: 1px #000000 dotted;
padding-top: 0px; -- Change This to zero!!!
padding-left: 2px;
text-align: left;
width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
You might want to read about css reset tool
http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in
things like default line heights, margins and font sizes of headings,
and so on
Replace padding-top:2px with padding:0 in the #wrapper rule. If you add padding:0 before the padding-top property, you will still have the problem.
problem of your bottom padding is image it-self. There is a white space in image. Edit it and remove it:
50.116.81.173/~speedcit/images/footer.jpg
And problem of your top white space is what others said before.
So I'm trying to add a badge to the top right corner of a site I'm doing some work on. z-index works to float the object above the page content but each time i try to use position relative the background image disappears only position absolute shows the image. I don't really want to use absolute as the image needs to be positioned on the right hand side of the sites menu bar not the right hand side of the viewport.
Any thoughts or advice appreciated
<div class="badge-box">
Book Now!
</div>
<div id="header">
<img src="images/pixel.gif" width="378" height="31" alt="Welcome to Gwynfryn Farm Cottages" />
</div>
<div id="main-menu">
<div>
Home
Our Cottages
Bed & Breakfast
Price Guide
Location & Local Attractions
News & Special Offers
Contact Us
</div>
</div>
.badge-box {
width: 1030px;
margin-left: auto;
margin-right: auto;
border: 0px solid red;
}
.badge {
background: url(../images/badge.png) 0px 0px no-repeat;
width: 148px;
height: 148px;
text-indent: -10000px;
position: relative;
z-index: 999;
}
#header {
width: 960px;
height: 40px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
padding: 20px 0px 0px 20px;
background: #58564f url(../images/header-top-background.png);
}
#main-menu {
width: 980px;
margin-left: auto;
margin-right: auto;
height: 35px;
/*background: red;*/
background: #58564f url(../images/header-bottom-background.png);
font-family: Georgia, "Times New Roman", Times, serif;
}
#main-menu div {
width: 776px;
height: 35px;
margin-left: auto;
margin-right: auto;
background: blue;
}
#main-menu div a {
display: block;
float: left;
padding: 5px 10px 0px 10px;
height: 30px;
color: #FFFFFF;
font-size: 1.2em;
text-align: center;
background: green;
}
#main-menu div a:hover {
background-color: #333333;
}
unless you do a display:block on that .badge class, a lot of the styles you have defined won't take effect as it defaults to inline. maybe that is all you need to get started.
i am not sure what is the effect you are trying to achieve. can you post a png/jpeg of the mock-up?