Hello my wonderful peeps.
The heading "whatever" overlaps on my list.
I want the list to appear after the heading.
<div style="width:1024px;height=auto;position:absoulte;min-height:768px;">
<div class="heading">
<h1>Whatever</h1>
</div>
<div class="list" id="listID" >
<div style="height:15px;">Nope</div>
<div style="height:15px;">Yes</div>
<div style="height:15px;">Maybe</div>
<div style="height:15px;">Definetely</div>
</div>
<button>Print</button>
<button style="posititon:relative;top:0px;">add</button>
</div>
and this is the css
.heading
{
position:relative;
top:50px;
}
.list
{
position:relative;
min-height:10px;
top:0px;
margin-left:20px;
}
http://jsfiddle.net/zd5n3L5z/
Help me out. Thank you :)
Change top to margin top for the heading
.heading
{
position:relative;
margin-top:50px;
}
.list
{
position:relative;
min-height:10px;
top:0px;
margin-left:20px;
}
Since you dont want to affect the possition in relation to other elements, you don't need to use the relative attribut. So your 'CSS' should look like:
.heading
{
margin-top:50px;
}
.list
{
min-height:10px;
margin-left:20px;
}
This will keep your css clean!
Add display: inline in class .list:
css
.heading
{
position:relative;
top:50px;
}
.list
{
position:relative;
min-height:10px;
top:0px;
margin-left:20px;
display: inline;/*Add display inline*/
}
fiddle
inline This value causes an element to generate one or more inline
boxes.
Also you have a syntax error in your main div container. Is position:absolute no absoulte.
You set the .heading top:50px. What happens here is that this value (50px) is not relative to the .list but to the div it sits in. Simply change the value like this:
.heading
{
position:relative;
}
Don't use position top for ".heading" class
.heading
{
position:relative;
}
.list
{
position:relative;
min-height:10px;
margin-left:20px;
margin-bottom:30px;
}
button{clear:both;}
Related
Having issue in my background image when I mouse over to particular div, I want to bring a image, When I a:hover to p1 div.How do I do this? but The image should be in p1 div via, because I need to give anchor tag.
Here is my html
<div class="product">
<div class="p1"><img src="img/dynamic/boysproducts-01.png"/></div><!--endof p1-->
<div class="p2">Text Descripition</div><!--endof p2-->
</div><!--endofproduct-->
Here is my css
.product
{
width:300px;
height:auto;
float:left;
}
.p1
{
width:300px;
height:100px;
float:left;
background-color:#333333;
}
.p1 a
{
width:300px;
height:100px;
display:block;
}
.p1 a:hover
{
width:300px;
height:100px;
background-image:url(../img/dynamic/girlsproduct-01.png);
}
HTML:
<footer>
<div class="foot">
<ul>
<span class="facebook"></span>
<span class="instagram"></span>
</ul>
</div>
</footer>
CSS:
.facebook {
display:block;
background-image:url("../images/facebook.png");
height:64px;
width:64px;
}
.instagram {
display:block;
background-image:url("../images/instagram.png");
height:64px;
width:64px;
}
.social {
height:64px;
width:64px;
display:inline-block;
position:relative;
margin:0 auto;
}
footer {
height:75px;
width:inherit;
bottom:0;
position:fixed;
}
.foot {
text-align:center;
}
The way I'm going about it could possibly be the wrong way. Any direction/advice would be great. I've tried using z-index and other properties but just nothing is working. I kinda wonder if it has to do with positioning/display inline.
A <span> should not contain any display:block elements anyway, it was designed for inline content although you can use it your way. Try use the <img> tag instead.
And wrap all your lines inside lis because you are using an ul
The links worked for me with no trouble.
You don't even need the span. You can move the class to the <a and have either 2 (social & facebook), or just make it to one css each with the inline and margin.
A span can have display:block property, but why you add span if you have your link ? I cleaned up your html :
HTML
<footer class="foot">
<ul>
<li></li>
<li></li>
</ul>
</footer>
and CSS
.social-facebook {
background-image:url("../images/facebook.png");
}
.social-instagram {
background-image:url("../images/instagram.png");
}
.social {
height:64px;
width:64px;
display:block;
margin:0 auto;
}
.foot {
height:75px;
width:inherit;
bottom:0;
position:fixed;
text-align:center;
}
I removed properties repetition and add a little bit of OOCSS :)
I'm trying to create something that looks like this:
so far I have: http://jsfiddle.net/ePse6/
Without using something like: margin-top:-25px;, how can I position the Edit/Delete links to be on the right of the title (the part that says "iPhone" or "Android") and have both the title and links halfway between the borders?
Thanks!
just like most of answers, here i come with text-align:right and float:left .
I reduced code to minimal and plain CSS for your actual structure and to make it clear to you : http://jsfiddle.net/ePse6/7/
ul , a { /* basic reset we need */
padding:0;
margin:0;
color:gray;
text-decoration:none;
}
.mini > ul > li {
display:block;/* reset from list-item */
border-bottom:solid;
text-align:right;
overflow:hidden;/* wraps floatting element within */
}
.mini > ul > li> h3 {
float:left;
margin:0;
}
.mini > ul > li ul,
.mini > ul > li li {
display:inline-block;
}
Why not use something simple and really handy?
I have removed all of your messy code, and have created a new fiddle for you.
http://jsfiddle.net/afzaal_ahmad_zeeshan/ePse6/4/
I have used just a few lines of code, I have used a div and inside that, I have used 2 paragraphs to seperate each of them. Then inside that I used span element to seperate the right and left floating elements.
Using CSS I selected the classes and then styled them to get the desired input!
Here is the code:
<div>
<p>
<span class="left">Android</span><span class="right">Delete Edit</span>
</p>
<p>
<span class="left">iPhone</span><span class="right">Delete Edit</span>
</p>
</div>
CSS is as:
p {
border: 1px solid #333; // border that you wanted!
padding: 20px; // padding all around the element
padding-bottom: 40px; // padding at the bottom of the element
}
.left {
float: left; // making the elements float at the left
}
.right {
float: right; // floating elements at the right side
}
You can go to the fiddle page, and check for the design of the layout now. It was a simple thing. Hope its what you wanted.
This is without the lists. Just some CSS to do the trick: http://jsfiddle.net/Lg96p/
CSS:
.wrap{
width:100%;
border-bottom:solid 1px #666666;
margin-bottom:20px;
padding-bottom:10px;
}
.title{
font:bold 16px arial;
}
.fl{
float:left;
}
.fr{
float:right;
}
.lnk{
color:#6c6c6c;
display:inline-block;
text-align:right;
margin:0 10px 0 0;
text-decoration:none;
font:normal 14px arial;
}
HTML:
<div class="wrap fl">
<div class="title fl">iPhone</div>
<div class="fr"><a class="lnk" href="">Edit</a><a class="lnk" href="">Delete</a></div>
</div>
<div class="wrap fl">
<div class="title fl">Android</div>
<div class="fr"><a class="lnk" href="">Edit</a><a class="lnk" href="">Delete</a></div>
</div>
You should create two columns that fill the parent div. Make them both float:left; and for the right column you can align the text to the right text-align:right; or put two divs in it with float:right; for edit and delete.
Here is my fiddle: http://jsfiddle.net/ePse6/5/
Whatever you put into the columns or how to format it is up to you. But from here you have 2 columns independently next to each other.
If you want multiples of these stacked on top of each other i would change the container to a class and just add multiple of these containers with the columns to keep it tidy and readable. Like in this fiddle: http://jsfiddle.net/ePse6/6/
HTML:
<div class='container'>
<div class='leftCollumn'>
Iphone
</div>
<div class='rightCollumn'>
<a hreft="">Edit</a><a hreft="">Delete</a>
</div>
</div>
<div class='container'>
<div class='leftCollumn'>
Iphone
</div>
<div class='rightCollumn'>
<div class="button">Edit</div><div class="button">Delete</div>
</div>
</div>
CSS:
.container
{
width:600px;
margin:auto;
}
.leftCollumn
{
float:left;
width:400px;
background-color:#999;
}
.rightCollumn
{
float:left;
width:100px;
text-align:right;
background-color:#CCC;
}
.rightCollumn a
{
margin-left:10px;
margin-right:5px;
}
.button
{
margin-left:10px;
margin-right:5px;
background-color:#000;
color:#FFF;
float:right;
}
Trying to vertically align text for the buttons in the middle, however i want entire button are to be a link (not just text) so i stretched the anchor tag, now i cannot vertically align text anymore even if i wrap it in another tag still does not work for some reason.
* {
margin:0;
padding:0;
}
hr {
border:0;
height:1px;
background-color:#000000;
}
ul {
border-spacing:15px;
width:100%;
display:table;
}
li {
display:table-cell;
background-color:#ccc;
height:75px;
text-align:center;
}
a {
width:100%;
height:100%;
display:block;
background-color:#FCF;
text-decoration:none;
opacity:0.5;
}
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
ABOUT<HR/>US
</li>
<li>
NEW<hr/>EVENTS
</li>
</ul>
Key points:
I like to keep buttons auto stretch to the page width like it is now.
I like to have entire button area to be click able not just text.
I like to keep unordered list for menu structure as its semantically correct for menu
http://jsfiddle.net/vWrE8/
Final Result Should look like this http://i.stack.imgur.com/kKEc8.png
In my opinion wrapping text inside anchor tag with div is a way to go and then valign-middle, however i cannot make it work.
Here is one solution that may work for you:
Demo Fiddle
You need to remove the disiplay:block from the anchor tags, and vertically align them throught he li element.
CSS
li {
// other styles here
vertical-align: middle;
background-color:#FCF; //<-move the bg to here
}
a {
// other styles here
// display:block;
// background-color:#ccc;
}
I don't think this is achievable without wrapping the multi-line texts in another element, but once that's done, it's quite straightforward. Assuming that wrapper element is a div, just add
a div {
display:inline-block;
width:100%;
vertical-align:middle;
}
a:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
As per http://jsfiddle.net/vWrE8/9/
BadAdviceGuy's solution is good, but given you want whole block to be clickable, you can try fluid padding for the anchor tags. Fiddle
CSS:
a {
width:100%;
height:100%;
display:block;
padding: 50% 0;
text-decoration:none;
opacity:0.5;
}
This is as close as I can get to what you want: http://jsfiddle.net/vWrE8/6/
Only works for one line break, after that it falls apart... =/
* {
margin:0;
padding:0;
}
hr {
border:0;
height:1px;
background-color:#000000;
}
ul {
width:100%;
list-style:none;
}
li {
display:inline-block;
vertical-align:top;
background-color:#ccc;
min-width:110px;
height:75px;
text-align:center;
margin:0px 10px;
}
a {
height:100%;
display:block;
background-color:#FCF;
text-decoration:none;
opacity:0.5;
line-height:2em;
}
a span {
position:relative;
display:block;
line-height:1em;
top:30%;
}
<ul>
<li> <span>HOME<span></li>
<li><span>ABOUT<span></li>
<li><span>ABOUT <HR/>US<span></li>
<li><span>NEW <HR/>EVENTS<span></li>
</ul>
I learn and use css and css3 around 2 years but i dont know 1 thing and i cant find a really good answer or fix for this.
So here is an example :
I created a div and inside this div we have a link (its a button).
When i hover my mouse on the div this div will change the bg-color but the link not because im above the div... So when im above the div this div and the link too will change the color or background this is what i need... But how to do it ? I never used this but now i think i'll need this for my next work :))
Thank you very much!
It's very easy to achieve using css: (working jsFiddle)
HTML:
<div class="container">
<a class="button">some text</a>
</div>
CSS:
.container:hover{
background-color:red;
}
.container:hover .button{ // selector for .button which is in a hovered .container
background-color:blue;
}
Try this:
<div id="test">
A link
</div>
CSS :
div#test:hover {
background-color: red;
}
div#test:hover a {
background-color: red;
}
What you're asking is the following CSS selector:
div:hover a{
/* your styles here */
}
Demo here
Hope this demo link will work for you.
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
background-color:#F2F2F2;
}
ul, li, ol {
list-style-type:none;
}
.wrapper {
width:95%;
padding:10px;
overflow:hidden;
height:100%;
margin:0 auto;
border:1px solid green;
}
.spacer {
clear:both;
font-size:0;
line-height:0;
height:0;
}
.wrapper:hover {
background-color:#999999;
cursor:pointer;
}
.btmoOne {
width:170px;
margin:0 auto;
height:20px;
background-color:#FF0000;
padding:10px;
}
.wrapper:hover .btmoOne {
background-color:#006600;
}