This one is taking a lot of time as I can not understand the problem associated with.I am still a newcomer to CSS and don't understand the problem completely .
This is the piece of code from CSS which controls the background of the web page
#intro1 {
height:1000px;
background: #000 url('../innerimages/slide4.jpg');
background-position:center 0px;
background-repeat:no-repeat;
background-size:cover;
}
at this point the web page looks something like this
now if i change the color to fff.i.e
#intro1 {
height:1000px;
background: #fff url('../innerimages/slide4.jpg');
background-position:center 0px;
background-repeat:no-repeat;
background-size:cover;
}
the page looks like this
and this is the html part
<div id="verticalScrollArea" style="display: block; top: -65.27584886649873px;">
<section id="intro1" data-navigation-tag="About SVP 69" style="display: block; background-position: 100% 44.8228px;">
<div id="intro1content" class="content" style="display: block; margin-top: 61.86937866666666px;">
<div class="contentData"> <div class="background">SOME TEXT <br>
<img src="./69 SVP_files/know-more.png">
</div> </div>
<div class="scrollDown"> <span>SOME TEXT</span> <img src="./69 SVP_files/scroll-down.png"></div>
</div>
</section>
What I want is the image to be in full screen .I can not figure it out where am I going wrong in removing the back/white strip ?
How it can be removed
You have to remove margin-top from your #intro1's inline CSS, you can use padding-top instead of margin
The problem is being caused by this line of code:
<div id="intro1content" class="content" style="display: block; margin-top: 61.86937866666666px;">
Specifically, the margin-top that you are applying inline is causing this colored strip to show. Just remove this inline css for margin-top.
There in this ID:
remove the margin-top: 61.86937866666666px;
I don't find any problem with the header section. Only one glitch I saw that a white strange line was appearing. for better explanation check the screenshot.
let me know this is what you want?
okay do you want like this? check the update screenshot?
Related
HTML/CSS newbie here. I am making a web page with a text header in the top center of the page and a login button on the upper right. I'm writing in Bootstrap using React (which uses embedded HTML). Here is the code.
Header:
<div className="page-header">
<h1 id="header">Header text</h1>
</div>
Login button:
<div id="login">
/*Displays login button if user is logged in, 'Welcome, user' if not*/
{this.state.loggedIn?
<div className="welcomeText">
<p>Welcome, {this.state.user}</p>
</div> :
<div>
<button id="loginButton" onClick={this.onClick}>Login</button>
</div>
}
</div>
CSS:
#header {
text-align:center;
}
#login {
float:right;
}
.welcomeText {
float:right;
}
The issue is that the login button is pushing the header text to the left and I have no way to move it back. I can temporarily solve this using padding; however, when the login button is replaced by a username, it gets pushed over even further the longer the username is. I'd like to know how I can fix this so that the username will be right-aligned and the header will stay in place. Thanks in advance!
As you write in it seems it may be react or something like javascript jsx format.
for header fix you should have to write code like below. this below given code is just to fix header at top position as per your need.
.page-header{
position:fixed;
top:0;
width:100%;
}
I'd use absolute positioning. I've simplified the example but you should get a good idea.
HTML
<div id="page-header">
<h1 id="header">Header text</h1>
<div id="login">
<div className="welcomeText">
<p>Welcome, Test User</p>
</div>
<div>
<button id="loginButton">Login</button>
</div>
</div>
</div>
CSS
#page-header {
background-color: #f0f0f0;
padding: 1em;
position: relative;
text-align: center;
}
#login {
position: absolute;
right: 1em;
top: 1em;
}
Set position: relative on #page-header so that the child element is positioned relative to it rather than the page. Then set position: absolute on the #login element. If you set its right position it will always sit to the right of the centralised #header text.
As long as you apply to absolute position to the #login element the size of the children won't matter. You'll probably need to tweak this on smaller devices, though, as there will be text overlapping.
https://codepen.io/raptorkraine/pen/QBdbPy
I'm currently learning html and CSS. I'm practicing by making a very basic website but have came across an issue when I added another image on top of my background image (the twitter logo). I tried to move the image using style="top:-90px;"but there was no effect. What ever classes I used to try to move the image nothing happened. I don't know how to target the image via CSS either.
Please help, sorry I know very little because I'm trying to learn.
<!DOCTYPE html>
<head>
<style>
body {
text-align: center;
background: url("LINK");
background-size: cover;
color: white;
font-family: sans-serif;
background-repeat: no-repeat;
background-attachment: fixed;
font-weight: lighter;
}
p {
text-align: center;
font-size: 24px;
font-family: sans-serif;
}
</style>
</head>
<body>
<img src="http://www.scottish.parliament.uk/images/Logos%20and%20graphics/TwitterLogoSmall20120927.gif" height="50" width="50" style="top:-90px;">
<p>Hello!</p>
</body>
top doesn't do anything to elements with position:static (the default). You should set position to:
position:relative Moves the image 90 pixels up
position:absolute Moves the image so its top edge is 90 pixesl above the top edge of its offset container (<body> in this case)
position:fixed Moves the image to be 90 pixels above the top of the vieport.
In your situation, I'm fairly sure you want position:relative
top works with position: absolute.
Maybe you wanted to set
margin-top: value;
If you are new to html and css then I recommend put your image and link
<img src="xyz"/>
inside of a div (if you aren't using html5), like this
<div id="myImage">
<img src="xyz"/>
</div>
then in your css use
#myImage {
position:relative;
top:-90px
<img src="http://www.scottish.parliament.uk/images/Logos%20and%20graphics/TwitterLogoSmall20120927.gif" height="50" width="50" style="top:-90px; position:relative;">
Copy this and paste it on your file.
In style you can do:
#image{
margin-top:90px
}
in html
<div id="image"><img src...........>
This is an example but it will work
I am trying to setup background images using CSS but I can't seem to get the images to populate correctly.
Here is the CSS for what I want to do
a.fb {
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
Here is the html code that I am using, I have tried a couple of different ways to populate the images with no luck
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank"></a>
</div>
Any help would be greatly appreciated
Okay added the following and still not go any other thoughts
a.fb {
display:block;
width: 33px;
height: 33px
background-image: url('img/Facebook.png');
}
EDIT: Yup got it working now forgot the ; after height, but no I get a white border around it and tried setting border: none; no luck
a.fb {
border: none;
display:block;
width: 33px;
height: 33px;
background-image: url('img/Facebook.png');
}
An anchor tag by default shows as an inline elements, so it depends on its content in order to get a height and width. To do what you want, you should add some styles: display:block; width: 20px; height: 20px.
You could also change the aproach completely and use html + mouseover and mouseout events:
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank">
<img src="http://www.facebook.com/images/fb_icon_325x325.png" alt="fb" name="fb" width="33px" height="33px" name="image_name" onmouseover="fb.src='http://goo.gl/cxiR7'; fb.width='38'; fb.height='38';" onmouseout="fb.src='http://www.facebook.com/images/fb_icon_325x325.png'; fb.width='33'; fb.height='33';" />
</a>
</div>
Here is a jsBin: http://jsbin.com/onehuw/1/edit
background-image only draws in the space that the element occupies. Your a tag has no content, and therefore it's width is 0. You'll not see any content (and background) until you give it at least some width (and height if needed).
You need to add padding to the <a> tag otherwise it has a width and height of 0 for example:
a.fb {
padding: 20px;
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
You could also just set the width and height of the anchor
I would like the top half of this image to display by default, and then use some CSS to make the image shift upward so that the bottom half shows when the mouse hovers over it. Here is the code and what I've tried, but it is not working. Can anyone help me make this code work?
HTML:
<div id="next">
<img src="images/next3.png" alt="next page">
</div>
CSS:
#next a:hover{background: url('images/next3.png') 0 -45px;}
EDIT:
HTML:
<div id="next">
</div>
CSS:
#next {
height:40px;
width:160px;
background-image:url('images/next3.png');
}
#next:hover{background-position: 100% 100%;}
I think you need to use background-position attribute to achieve this.
CSS
div
{
height:40px;
width:160px;
background-image:url('http://i.stack.imgur.com/OOGtn.png');
}
div:hover
{
background-position:100% 100%;
}
JS Fiddle Example
You can also look into CSS Sprites.
You need to use it as a background in the first place. The <img> is covering the background.
Get rid of the image HTML and just use some CSS like this
a {
display: inline-block;
height: 40px;
width: 160px;
background: transparent url(img.jpg) 0 0 no-repeat;
}
a:hover {
background-position: 0 40px;
}
In this case you will need to remove your <img> tag and consistently use the CSS background attribute for both cases. Also define your height and width width of your a tag with CSS too.
I have this code:
HTML:
<img class="d" src="i3.jpg" alt=""/><img class="d" src="i4.jpg" alt=""/>
CSS:
img.d{margin-top:10px;margin-left:20px;}
however, I want to put the i3.jpg in the CSS, not the html to further separate the structure from the presentation...how do I go about doing this.
Thanks.
Found this
link here
You can set the image as a background image of an element.
HTML:
<div class="d"></div>
CSS:
div.d{width:20px; height:20px; margin-top:10px; margin-left:20px; background:url('i3.jpg') 0 0 no-repeat;}
One option would be to use e.g. a div-element and attach a background image to it using CSS.
An img tag should be used when the image is content, like a cat wearing a fun costume. Moving image references to CSS can make sense when they're stylistic/UI and not content.
That said, the answer is to remove your img tags and replace them with divs. You can then set a background-image for the div, and just give it some basic properties to size/position it.
HTML:
<div class="d"></div>
CSS:
div.d {
display: block;
background-image: url('i3.jpg');
width: 100px; /* or whatever it should be */
height: 100px; /* or whatever it should be */
margin-top: 10px;
margin-left: 20px;
}