i want to place 4 rectancles with text in my website
something like this (blue is the color that specifies them!
http://imageshack.us/photo/my-images/42/983f.jpg/
and the real footer looks like this
http://imageshack.us/photo/my-images/545/aygh.jpg/
area with grey is the area with the links down
here is what i have
HTML
<div class="footer" id="footer">
<p>
About Us<span>|</span>
Terms and Conditions<span>|</span>
Privacy<span>|</span>
FAQ<span>|</span>
Advertise with us<span>|</span>
Careers
</p>
</div>
CSS
#footer
{
background: rgba(0,0,0,0.5);
color: White;
padding: 0;
text-align: left;
vertical-align: middle;
line-height:normal;
margin: 0;
position: fixed;
bottom: 0px;
width: 100%;
font-size: 1em;
clear: both;
height: 10%;
}
#footer p {
position: absolute;
bottom: 0px;
margin-left: 600px;
}
#footer a{
text-align: center;
color: white;
position: relative;
bottom: 0px;
margin: 20px;
}
#footer span {
bottom: 5px;
}
i dont want to change the
<p>
About Us<span>|</span>
Terms and Conditions<span>|</span>
Privacy<span>|</span>
FAQ<span>|</span>
Advertise with us<span>|</span>
Careers
</p>
i want to add another div with 4 sqare boxes with positions left, center-left, center-right and right
if you want the links to render horizontally across the page you can apply the following css.
div a
{
display:inline;
border:1px solid #000;
padding:5px;
margin:auto;
bottom:0px;
}
.footer{
position:absolute;
bottom:0px;
}
get rid of the <p> tag it is not needed
You can style the rest as needed. If you are looking for something more particular please update your question with specifics
here is a fiddle
Related
I have 3 images in a div placed horizontally. When I resize the page the images changes their position and float in a vertical alignment.I want the page responsive and when i resize the page i want that the whole div is adapted and resized. I need also to put in the page others div with others images. I want the images align in the bottom side.Sameone help me please?
This is the code example.
.box{
display: inline-block;
position: relative;
bottom:100%;
width: 100%;
margin: 5% 5% 0 0;
font-size: 12px;
}
.box:before{
content: "";
display: block;
padding-top: 100%;
}
img {
max-width:100%;
height:auto;
border:1px solid black;
text-align:center;
}
.content{
/* Positioning */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* Styling */
border:1px solid;
padding: 30px;
text-align: center;
vertical-align: center;
text-transform: uppercase;
color: #fff;
}
<div class="box">
<div class="content">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
<img src="http://fantapr.altervista.org/paul.jpg" width="350px">
</div>
</div>
strong text
Just add this to the img:
See fiddle https://jsfiddle.net/16q2xr8k/27/
img {
width: calc((100% / 3) - 2px);
height: auto;
border: 1px solid black;
text-align: center;
}
I have an Image on the page. I have put a Div on footer with a heading and a paragraph inside the Div. I have made the Div's background transparent like this way , background-color: rgba(0,0,0,.6);.
But I need to implement this like this way , background-color:black; opacity:0.6".
The problem is, if I am doing it using opacity then the heading and paragraph is also getting blur with the Div's colour. How can I solve it?
Below is my full code.
CSS
<style type="text/css">
.div1 {
max-width: 100%;
height: auto;
text-align: center;
display: block;
border: none;
}
.feature-text-overlay {
background-color: rgba(0,0,0,.3);
bottom: 0;
padding: .6em 0 .8em;
position: absolute;
text-align: center;
width: 100%;
}
.feature-title {
font-size: .875em;
margin: 0;
text-transform: uppercase;
color:white;
}
.feature-description {
line-height: 1.2;
margin: 0 2em;
color:white;
}
</style>
Html
<div class="div1">
<img src="~/Content/Image/rendering-graphics-in-resolution-222734.jpg" />
<div class="feature-text-overlay" style="height:52.599999277954px; min-height:1px;">
<h4 class="feature-title">Enterprise Mobility Suite</h4>
<p class="feature-description">Manages Users, Devices and Data</p>
</div>
</div>
css
.feature-text-overlay {
bottom: 0;
padding: .6em 0 .8em;
position: absolute;
text-align: center;
width: 100%;
position:relative; /* add this to specify position */
}
/* create pseudo css element */
.feature-text-overlay:before {
content:"";
background-color: #000;
opacity:0.3;
bottom: 0;
top:0;
right:0;
left:0;
position: absolute;
}
Demo
edit as per comment demo 2
i am trying to put text over image it works but is there a better way to do it. should i use a different html tag for the text.
any suggestions
http://jsfiddle.net/8rDda/
body{
background-color:#F0F0F0 ;
color:#000305;
font-size: 87.5%;
font-family: Arial,'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
width:80%;
margin:2% auto;
}
.main {
width:45%;
height:300px;
background-color: #20b2aa;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.main img{
width:80%;
height:auto;
margin: 6% 10%;
float: left;
}
.main h2 {
color:white;
position: absolute;
margin:50px;
margin-left: 50px;
width: 100%;
}
Maybe one solution could be, that you set the image as background-image for your div. And edit the test in it. So you jut have a single div, which you must edit.
http://jsfiddle.net/QX36R/1/
http://jsfiddle.net/8rDda/1/
I would use absolute positioning instead of float.
.main {
width:45%;
height:300px;
background-color: #20b2aa;
border-radius: 5px;
position: relative; //keep children absolutely position constrained to this element.
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.main h2 {
color:white;
position: absolute;
margin: 6% 10%;
top: 0;
left: 0;
}
You could also use z-index and different divs. But at last you need position:absolute; with different positions or margin-top: -whatever with position:relative;. There is not really a right or wrong approach to do this. As long as it works on your site, it is all fine.
You can use <div> tag means creating one div and put it on the top of image or set any position or else link it with another div which will be your image. There are plenty of things you can do with <div> tag.
Example.
<div style="abcd">
top: 99;
left: 99;
position: absolute;
z-index: 1;
visibility: show;">
<!-- content will go here -->
</div>
I'm sorry I tried everything, tried for thirty minutes couldn't get anything. Ok so this is my code. For some reason "div2" is not working and not moving down but ONLY able to move left and right. I want it to be able to move down and up from top or bottom of screen, but its only moving left and right and is located on the same level as the navbar
body {
background-color: LightGoldenRodYellow;
font-family:"Arial Black", Gadget, sans-serif;
}
#rightcolumn {
float: left;
margin-left: 100px;
}
#wrapper {
background-color: #33CC00;
color: #000066;
}
#midcolumn {
float: left;
width: 100px;
Margin: 15px;
}
#leftcolumn {
float: left;
width: 100px;
margin: 10px;
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
.navbar {
text-decoration: none;
margin: 15px;
display: block;
}
.div2{
position:absolute;
float: left;
left: 200px;
margin-top:100px:
}
.title{
color: LightCoral;
position:absolute;
left: 50%;
top: 10%;
}
.titlesub{
color: Green;
position:absolute;
font-size: 12pt;
left: 50%;
top; 30%;
}
.content{
color: LightCoral;
}
ok next file
<!doctype htm>
<html>
<head>
<link href="midterm_helper.css" rel="stylesheet" type="text/css" />
<title>Vacation Destination </title>
</head>
<body>
<h1 class="title">
Vacation Island
<p class="titlesub">
~vacation awaits!
</p>
</h1>
<p class="div2">
test
</p>
<div>
<a class="navbar" href="hotel_form.html" target="_blank">Reservations</a>
<a class="navbar" href="hotel_room.html" target="_blank">Rooms</a>
</div>
</body>
</html>
If any of you actually bothered to read his code, you'd see that he has a colon: after his top style instead of a semi-colon;
This will do what you want it to do. The float: left; isn't necessary though :)
.div2 {
position:absolute;
float: left;
left: 200px;
margin-top:100px;
}
To position the div2 from bottom try this giving bottom value to the div
.div2{
bottom:0; // change the value as you need
}
why you giving position and float at same time in class. If you used position:absolute then you may give the values to top bottom and left and right.
Also your HTML code is really messed up. remove unwanted space and first make it proper HTML.
For example you are giving position and floating the element at same time. you should use only one at one time.
.div2{
position:absolute; /*either you should remove it*/
float: left; /*or you should remove this line*/
left: 200px;
top:100px;
left:0;
}
You can set top to move your div2 up and down like you have set by left
.div2{
top: 20px; /*set the value depending upon your requirement */
}
I've created a basic layout and on the page are 2 links, one register and one login button.
Take a look at my jsfiddle link to see how it looks. There's a black box which will be the logo and you will see the green and blue boxes which are my buttons.
I need them at the top of the page.
http://jsfiddle.net/4EZa5/
Not sure what I need to do to the CSS to make the links sit at the top of the very page?
HTML:
<div id="accountLinks">
<ul>
<li class="login">Log in</li>
<li class="register">Register</li>
</ul>
</div>
CSS:
#accountLinks{
float: right;
height:20px;
width: 170px;
margin: 0;
padding: 0;
}
#accountLinks ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#accountLinks li{
float: left;
text-align: center;
}
#accountLinks .login{
background: url(../images/button_login.gif) no-repeat;
width: 70px;
height: 20px;
color: #FFF;
}
#accountLinks .register{
background: url(../images/button_register.gif) no-repeat;
width: 70px;
height: 20px;
color: #FFF;
}
Thanks
Your H1 tag is a block element and is pushing the rest down. Just add float: left; to h1 css
h1{
width: 351px;
height: 49px;
background: #000;
text-indent: -9999px;
float: left;
}
To style the link only in login:
#accountLinks .login a {
color: #FFF;
}
#accountLinks .login a:hover {
color: yellow;
}
They're being pushed down by the <h1>Salesboard</h1> - is it possible to move that to just after the accountLinks div, or does that need to stay before them in the HTML?
If so, then this should fix the accountLinks:
#accountLinks{
position: absolute;
top: 0px;
right: 0px;
height:20px;
width: 170px;
}
See this fiddle: http://jsfiddle.net/NZ2T5/
I added a style next to the id="accountLinks" this will be easier to position you div which contains the login etc..
<h1>Salesboard</h1>
<div id="accountLinks" style="margin-top:-45px;">
<ul>
<li class="login">Log in</li>
<li class="register">Register</li>
</ul>
</div>
Simply place h1 at the bottom of #header.
You couldn't see your links, because they were floating left! underneath your css-styled Salesboard
Additionally your text-intend (9999) is such that no text will be shown.
Solution
Newer browsers offer, the attribute fixed which will do exactly as it says.
Add this "position: fixed;"
#accountLinks{
position: fixed;
top: 0px;
right: 0px;
height:20px;
width: 170px;
}
#Container{
width:100%;
}