I am trying to develop a web site from scratch. Here is the code
<html>
<head>
</head>
<body >
<div id="top" style="height:200px;background-color:green">
</div>
<div id="middle" style="height:800px;background-color:white">
</div>
<div id="footer" style="height:200px;background-color:green">
</div>
</body>
</html>
Problem is that there is a white space around above div tags. I can remove white space using margin: -10px; property. But I don't like to handle it that way. Is there way to handle this in decent way in css?
<body style="margin: 0;">
Set the margin for the body to 0;
<body style = "margin:0">
Related
I'm using the w3.css, I wanted to make a colored background with width 100%,
and inside it another box with width 80% which will contain the text, so I used the following:
<div class="w3-container w3-light-green">
<div class="w3-container w3-sand w3-center" style="width:80%">
test
</div>
</div>
The problem is that the second container with the 80% width is not centered in the page although I used w3-center.
I noticed that w3-center only centers the text, but the container itself isn't centered, so how can I center the container block?
I think this should work.. Try It..
<div class="w3-container w3-light-green">
<div class="w3-container w3-sand w3-center" style="width:80%;margin:auto;">
test
</div>
</div>
W3.CSS has no class for centring block elements. The only classes which do that have other effects as well.
You'll need to set the left and right margins to auto yourself.
`<html> <div class="w3-container w3-light-green">
<div class="w3-container w3-sand w3-center justify-content-md-center" style="width:80%">
test
</div>
</div>`
This should do the trick.
w3-auto is a container for responsive size centered content.
w3-content is a container for fixed size centered content.
https://www.w3schools.com/w3css/w3css_references.asp
w3-auto is
{
margin-left: auto;
margin-right: auto;
}
I suggest
<div class="w3-container w3-light-green">
<div class="w3-container w3-sand w3-auto" style="width:80%">
test
</div>
</div>
If you want to center the text, use also w3-center, of course.
I don't know much about w3.css there could be a native solution to this but If you prefer hacky way there it is:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-light-green" style="text-align: center">
<div class="w3-container w3-sand w3-center" style="width:80%; display: inline-block;">
test
</div>
</div>
</body>
</html>
https://jsfiddle.net/k2j676ba/
Given the layout below, how can I hide #header-precursor if it's under #link-preview or #linkPreviewIframe?
Here is the basic layout in text form:
<p id="link-preview>
<iframe id=linkPreviewIframe>
#document
<html>
<head>..</head>
<body>
<div id="page">
<div id="header-precursor">
This is the one I want to hide
</div>
</div>
</body>
</html>
I tried #link-preview #header-precursor { display: none;} but it didn't work. I don't know much about Shadow DOM but I think that's what #document indicates, so I tried this too with no luck: #link-preview::shadow #header-precursor { display: none;}
I need to display some text that alternates between one color and another. I've used CSS and <div style=""> to mark any text that should be a particular color:
<html>
<head>
<style type="text/css">
div {
.dark{ color: black }
.light{ color: blue }
}
</style>
</head>
<body>
<div style="dark">This</div><div style="light">text</div><div style="dark">should</div><div style="light">alternate</div><div style="dark">between</div><div style="light">light</div><div style="dark">and</div><div style="light">dark</div>.
</body>
</html>
When I open this in a Web browser, it only displays text in black. What do I need to fix to make this alternate the colors properly?
The HTML is wrong. dark/light are not styles, they should be classes in this instance.
jsFiddle example
Your HTML should be..
<div class="dark">This</div>
<div class="light">text</div>
<div class="dark">should</div>
<div class="light">alternate</div>
<div class="dark">between</div>
<div class="light">light</div>
<div class="dark">and</div>
<div class="light">dark</div>
If you wanted to achieve this via the style attribute, you would use the following:
jsFiddle example
<div style="color:blue">This</div>
<div style="color:black">text</div>
<div style="color:blue">should</div>
<div style="color:black">alternate</div>
<div style="color:blue">between</div>
<div style="color:black">light</div>
<div style="color:blue">and</div>
<div style="color:black">dark</div>
Classes are obviously the better way to achieve this though.
I have a slight problem that I swear should work...it kinda seems like a silly question ...but here it is ...
i want a div i created to act as a button ...it how ever does not want to change its background when i click on it( giving the effect of a button)
here's my code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#button1 {
width:100px;
height:50px;
background-image:url(normalbutton.jpg)
}
</style>
</head>
<body class="asd">
<div id="container">
<a href="#">
<div id="button1" onmousedown="document.getElementById("button1").style.backgroundImage='url(onmousedownbutton.jpg)'"></div></a>
</body>
</html>
I think using jQuery it will be easy :
$("#button1").mousedown(function() {
$(this).css({'background-image': 'url(1.jpg)'})
});
Just use css :
HTML
<html>
<body class="asd">
<div id="container">
<a href="#">
<div id="button1" ></div>
</a>
</div>
</body>
</html>
CSS
#button1 {width:500px;height:500px;background:red}
#button1:hover {background:green;}
#button1:active {background:grey;}
You use double quotes inside double quotes. Change the quotes around button1 to single quotes like this:
<div id="button1" onmousedown="document.getElementById('button1').style.backgroundImage='url(onmousedownbutton.jpg)'"></div>
Further notes:
Your <div id="container"> isn't closed
You can't use <div> inside of <a>
Change the mouse down like this
<a href="#">
<div id="button1" onmousedown="this.style.backgroundImage='url(http://t3.gstatic.com/images?q=tbn:ANd9GcT6-aJ6Hz_oXi_M2ZScbEiNGKZFKN3hyhffh2NMWTmbgU2WX-IZKA)'">Button
</div>
</a>
LiveDemo
onmousedown="this.style.backgroundImage='url(http://t3.gstatic.com/images?q=tbn:ANd9GcT6-aJ6Hz_oXi_M2ZScbEiNGKZFKN3hyhffh2NMWTmbgU2WX-IZKA)'">
I have used some images from Google it will look good with some custom images. :)
You also can try css:
#button1:focus {
background: url(onmousedownbutton.jpg);
}
or
#button1:active{
background: url(onmousedownbutton.jpg);
}
Building on Bushan's answer, this will swap to the downclick image when mouse is held down, and revert back to the original image when mouse button is released.
$("#button1").mousedown(function() {
$(this).css({'background-image': 'url(image2.jpg)'})
}).mousedown(function(){
$(this).css({'background-image': 'url(image1.jpg)'})
});
HTML:
<div id="button1" style="background-image:url('image1.jpg');"></div>
Sources/References:
CSS background-image - What is the correct usage?
I am trying to figure out a way to have multiple background colors on a project i am working on. The design is made with 4 colors on the background. 1 for the header and content, 1 for the sidebar and 1 for each of the 2 footer sections.
Setting the background-color on those is easy as pie - the problem comes when i need to make the colors actually grow outside of the container (match the width of the browser) but still have a max-width of the container itself for 940px.
I am using Twitter Bootstrap 3 as the boilerplate for the project.
Any suggestions?
If background images are an option, then you could split your page into a top part and a bottom part, and then apply background images to those containers.
Your HTML would look like this:
<!DOCTYPE html>
<html>
<head>
…
</head>
<body>
<div class="main-wrapper">
<div class="container">
<header class="header" role="banner">
…
</header>
<div class="row">
<section class="col-8" role="main">
…
</section>
<aside class="col-4" role="complementary">
…
</aside>
</div>
</div>
</div>
<footer class="footer" role="contentinfo">
<div class="container">
…
</div>
</footer>
</body>
</html>
And then you would just create styles for your .main-wrapper and .footer that applies your tiling background image to them.
Create a new style sheet called application.css and load it after bootstrap.min.css, and place the following CSS rules in it:
.main-wrapper {
background: url(../img/main-bg.png) repeat-y 50% 0;
}
.footer {
background: url(../img/footer-bg.png) repeat-y 50% 0;
}