So I am new to css,and have been trying to develop a basic website as a college project,but I am having problems aligning the background image for a div with class name mainhead,it leaves a whitespace at left of the screen.
Whatever width I set it to,there is a blank white space on the left.
I dont know what to do,I havent set any padding or margins and also specified left: 0px,but no joy.
The class I am having problem with is the mainhead class
Here is the code,please help!
.loginbox
{
position: fixed;
top: 0px;
margin: 0px;
left: 0px;
font-weight: bold;
background-color: #2C2C2C;
text-align: right;
width: 1370px;
height: 40px;
}
.loginbut
{
background-color: #2C2C2C;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
font-size: 100%;
color: #c9c9c9;
text-align: right;
margin-right: 50px;
margin-top: 5px;
border-color: #2C2C2C;
border-radius: 8px;
top: 10px;
text-decoration: none;
outline: none !important;
}
.loginbut:hover
{
background-color: #000000;
}
.mainhead
{
background-image: url("grey.jpg");
background-repeat: none;
border: 1px solid black;
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
top: 40px;
width: 1360px;
height: 170px;
color: #c9c9c9;
text-align: center;
}
.mainhead h1
{
font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
font-size: 300%;
}
Use background-position: center center; and background-size: cover; and remove width from mainhead. Hope it should work
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover
Try using this reset code by Eric Meyer enter link description here and also set the .mainhead div to 100%.
Related
I have a button that needs to be centered in it's div class ex. div="sanfrancisco-image". It's placed 17px from the bottom of the box, however it will appear center, even though I've placed justify-self:center; and align-items: center; tabs.
Here's the codepen link: https://codepen.io/holmedw/pen/KrvJEb
.btn {
align-items: center;
position: absolute;
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
border: 2px black solid;
border-radius: 1px;
background: transparent;
cursor: pointer;
bottom: 17px;
justify-self: center;
}
No need for the align-items and justify-self. not sure they do any good, so try to remove them. on the css of the button? => set the following:
margin: 0px auto 0px auto;
try that and let me know if it works.
The quickest way to get what you want is to add position: relative to the .our-story-block, .our-dna-block, .sanfrancisco-block then you add a new div to include your button, like <div class="btn"><button>See More</button></div>. Set that div to position: absolute; bottom: 17px; width: 100%; left: 0; so it would center the absolute div inside a relative element. You won't need to include those values in your .btn css class anymore so just remove them.
.btn {
position: absolute;
width: 100%;
left: 0;
bottom: 17px;
}
.btn > button{
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
border: 2px black solid;
border-radius: 1px;
background: transparent;
cursor: pointer;
}
I'm using dreamweaver to code my website. I've got a div with text inside an anchor element in order to get the whole div clickable, however when displayed in a browser, there's a weird Purple/Red line underneath the Text.
I have text-decoration: none; in the code. Any help would be appreciated!
Website in Browser: http://test.crows-perch.com/
HTML of Text in question:
<div id="Guides"><div id="GuidesT">GUIDES</div></div>
CSS of all related elements:
#Guides {
z-index: 4;
position: relative;
margin: 0 auto;
top: -135px;
right: 89px;
width: 133px;
height: 65px;
background: url(../images/button%20texture%20b.jpg);
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
border-top: none;
border-bottom: none;
text-align: center;
}
#Guides:hover {
width: 133px;
background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
background-size: cover;
}
#GuidesT {
text-decoration: none;
font-family: "Cinzel Regular";
font-size: 18px;
letter-spacing: 1px;
color: #D2C300;
line-height: 65px;
vertical-align: middle;
}
The text-decoration is typically applied to the link, not elements inside it. Try this instead:
a.Guides { text-decoration: none; }
I've already run my code through a validator, so there are no syntax errors, but I can't figure out what's going on. Nothing I do changes the "p" elements in my code. I've tried styling the p class. I've tried wrapping them in a "div" tag and stylizing that, but it just seems to keep inheriting the body properties. If I want to style the text at all, I have to do it through the body properties.
Here's the HTML.
<div id="topBar"><img src="images/logo.png" alt="Escaping Shapes"/></div>
<div id="rope"><img src="images/rope2.png" alt="Bottom of logo border"/></div>
<p>Yarrrrgh! Shapes be escaping from below the surface of the Web! Push'em back down below the page as fast as ye can!</p>
<p class="bold">Your time: <span id="time">(not attempted yet)</span></p>
<div id="box">
</div>
Here's the CSS for the body:
body {
width: 100%;
font-family: Verdana, Geneva, sans-serif;
margin: 0;
background-color: #ecf0f1;
font-weight: bold;
text-align: center;
}
Here's the CSS for the "p" element that does NOTHING for me lol.
p {
position: relative;
font-weight: bold;
width: 20px;
margin: auto;
text-align: center;
}
Not sure what's going on, but any help would be greatly appreciated. I can provide more of my code if necessary.
EDIT My Entire CSS:
body {
width: 100%;
font-family: Verdana, Geneva, sans-serif;
margin: 0;
background-color: #ecf0f1;
font-weight: bold;
text-align: center;
}
#topBar {
background-color: #2980b9;
height: 120px;
width: 100%;
position: relative;
}
#topBar img {
display: block;
margin: 0 auto;
width: 600px;
position: relative;
top: 25px;
left: -85px;
}
#box {
background-color: #0ff;
height: 150px;
width: 150px;
display: none;
position: relative;
top: 0;
margin-top: 0;
margin-bottom: 10px;
opacity: 0.9;
box-shadow: 10px 10px 5px #7e7e7e;
-webkit-transition:all 0.1s linear;
-moz-transition:all 0.1s linear ;
-ms-width:all 0.1s linear ;
-o-width:all 0.1s
}
#box:active {
box-shadow: none;
top: 10px;
margin-bottom: 0;
-webkit-transform:scale(0.25, 0.25);
-moz-transform:scale(0.25, 0.25) ;
-ms-width:scale(0.25, 0.25) ;
-o-width:scale(0.25, 0.25) ;
}
#box:hover {
opacity: 1;
}
#rope {
background-repeat: repeat-x;
background-image: url(images/rope2.png);
width: 100%;
position: relative;
top: -25px;
.bold {
font-weight: bold;
}
p {
position: relative;
font-weight: bold;
width: 20px;
margin: auto;
text-align: center;
}
You have not closed off -o-width:all 0.1s
with a semi-colon under your #box css properties This is your problem.
You also haven't closed off your #rope properties }
It seems that the p styles are being applied to the p. I tried by setting the font color via the p rule and it works: http://jsfiddle.net/L2q1Lbzj/
body {
width: 100%;
font-family: Verdana, Geneva, sans-serif;
margin: 0;
background-color: #ecf0f1;
font-weight: bold;
text-align: center;
}
p {
position: relative;
font-weight: bold;
width: 20px;
margin: auto;
text-align: center;
color: red;
}
There is no problem in your css.
The <p> is working good enough in your given code.
CSS properties overlap each other.So be careful about this.
jsfiddle
edit:
as your new edit
you are missing closing }
write
#rope {
background-repeat: repeat-x;
background-image: url(images/rope2.png);
width: 100%;
position: relative;
top: -25px;
}
instead of
rope {
background-repeat: repeat-x;
background-image: url(images/rope2.png);
width: 100%;
position: relative;
top: -25px;
link
This is the main code that positions the box. I need to make the search input along with the other parts always center on any size screen. The input area of the box keeps moving to the far right of the screen, which is a problem.
.wsite-search {
position: relative;
margin-top:78px;
margin-right:auto;
margin-bottom:0px;
margin-left:auto;
}
.wsite-search-input:focus {
background: #f8f8f8;
border: 1px solid #000;
}
.wsite-search-input {
width: 158px;
height: 19px;
border: 0;
padding: 10px 45px 10px 7px !important;
font-family: 'Oxygen', sans-serif;
color: #8e8e8e;
font-size: 17px;
line-height: 24px;
background: #fff;
border: 1px solid #000;
border-radius: 3px;
font-weight:300;
}
.wsite-search-button {
position: absolute;
width: 18px;
height: 18px;
border: 0;
right: 14px;
top: 10px;
background: url(submit-button-v3.png) no-repeat 0px 0px;
}
are you trying to center just the input box itself, if so you can center it by using margin
margin: 0 50%;
http://jsfiddle.net/rlynjb/eyjzhj8s/
if you want to center both input and button in the middle. you can wrap those 2 elements in a div tag and use the margin: 0 50% to center both elements.
I'm trying to create a button and here is the demo so far.
Right now I can't figure out how I can position the sprite image so that only the black icon is visible.
Does anyone know how I can fix this?
This is what I want to achieve with the button:
No hover:
Hover:
Here is the code I have:
HTML:
<a class="top-language" href="#" alt="Choose your language">Language</a>
CSS:
.top-language {
border: 1px solid #ddd;
padding: 5px;
text-decoration: none;
color: #000;
position: relative;
font-weight: bold;
font-size: 13px;
padding-right: 10px;
padding-left: 35px;
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 0;
}
.top-language:hover {
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 -22;
}
This will work. Here is a jsfiddle
.top-language {
border: 1px solid #ddd;
width: 100px;
color: #202020;
padding-left: 10px;
padding-right: 10px;
display: block;
font-weight: bold;
font-size: 13px;
width: 80px;
margin: 0;
line-height: 22px;
text-align: right;
text-decoration: none;
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat top left ;
}
.top-language:hover {
background-position: bottom left;
color: #d13030;
}
You can either:
a. reduce the height of the button;
b. increase the vertical gap between the two sprites in the image itself;
c. background: url(...) no-repeat 0 2px; adjust the value to push out the red icon
.top-language {
display: block;
width: 22px;
height: 22px;
font-size: 13px;
background: url('http://imageshack.com/a/img853/7081/1u5z.png') bottom;
text-indent: -99999px;
}
.top-language:hover {
background-position: 0 0;
}
You can provide image display position as follows:
display:inline-block