First of, I know there are many similar questions to this, but none of the articles I have read has helped me. Somehow this won't work..
I want to make the area inside the class="downloadBoks" to be clickable, and not just the text within <a></a>. Not using JavaScript.
HTML:
<div class="sideboks">
<div class="downloadBoks">
Prosjektbeskrivelse
</div>
<div class="downloadBoks">
Statusrapport
</div>
</div>
CSS:
.downloadBoks {
height: 23px;
width: 150px;
font-size: 14px;
border-style: solid;
border-color: #000000;
border-width: 0px 0px 2px 0px;
margin-top: 0px;
margin-bottom:0px;
line-height: 25px;
vertical-align:middle;
box-shadow: inset 0px 0 2px 2px #777777;
}
div.sideboks{
width: 150px;
height: 50px;
margin-top: 150px;
margin-left: 54px;
position: fixed;
background-color: #B7AFA3;
border:solid;
border-width: 5px 0px 5px 5px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: inset 1px 0 0px 0px #777777;
}
This is the code I have so far. Right now the "downloadBoks" is purely looks.
edit: So I realised that having the div, within another div might have something to do with it? So updated with that code as well. Thanks for all the responses so far!
.downloadBoks a {
display: block;
height: 100%;
}
This will make the entire square clickable. DEMO
With HTML5, you can put blocks in a tags:
<a href="Prosjektplan.pdf">
<p class="downloadBoks">
Prosjektbeskrivelse
</p>
</a>
You need to make the <a> inside of the div's have 100% height and width. This way they take all the interior of the div and thus the div is "clickable":
.downloadBoks a
{
display:inline-block;
height:100%;
width:100%;
}
Related
i try to set two div boxes side by side and a third div box under these two with the length of both of them.
atm i have this code:
<div id=\"recordCard\">
</div>
<div id=\"myAnswer\">
</div>
<div id=\"cardButtons\">
</div>
css code:
#recordCard {
float: left;
padding: 10px;
margin-right: 10px;
width: 450px;
min-height: 250px;
background: #eee;
border: 4px solid white;
box-shadow: 0 0 1px rgba(0,0,0, .4);
}
#myAnswer {
float: right;
padding: 10px;
width: 450px;
min-height: 250px;
background: #eee;
border: 4px solid white;
box-shadow: 0 0 1px rgba(0,0,0, .4);
}
#cardButtons {
display: none;
float: left;
background-color: #8cff80;
border: 1px solid #3dcf2d;
border-radius: 4px ;
margin-top: 10px;
padding: 10px;
width: 910px;
}
while the third div-box is not displayed, the two div-boxes are perfectly side by side.
But by displaying the third box, the second box jumps a bit to the right.
Can anyone help me?
thanks =)
It seems that it may be due to the fact that the two divs that are supposed to be side by side - #myAnswer and #recordCard - do not have widths that equal that of the third div. Currently the two divs in the first row only equal a total of 892px (this includes widths, padding and border dimensions). While the third div totals 930px.
#myAnswer {
float: right;
padding: 10px;
width: 450px;
min-height: 250px;
background: #eee;
border: 4px solid white;
box-shadow: 0 0 1px rgba(0,0,0, .4);
}
#recordCard {
width: 458px;
height: 190px;
}
#cardButtons {
display: none;
float: left;
background-color: #8cff80;
border: 1px solid #3dcf2d;
border-radius: 4px ;
margin-top: 10px;
padding: 10px;
width: 910px;
}
Since there is a difference of 38px in total width, you can add that to #myAnswer, or #recordCard. #myAnswer is already at 470px (with padding), so adding the width to #recordCard making it 458px will make the dimensions closer.
Or, narrow the third div as Marc suggests.
The small shift to the right is due to the width of the #cardButtons div.
The div width should be 890px, which with 10px padding will give an overall width of 910px,
which is the width of the two preceding elements.
Every time I include the code for the facebook friends like box the div element box below it goes wacky. I cannot control where its positioned. It either disappears or overlaps a different div. Originally I just wanted specials, events, then fbFriends in a row then the box div below the three divs. I have been trying to wrap the divs to control everything better but am still unsuccessful. Any help would be appreciated
specials events fbFriends
box -------------------box
<div id="specialsWrapper">
<div id="specials" ><p>Featured Specials</p></div>
<div id="events" ><p>What's happening at the hub</p></div>
<div id="fbFriends">
<div class="fb-like-box"
data-href="https://www.facebook.com/pages/********"
data-height="395" data-width="250" data-show-faces="true"
data-colorscheme="dark" data-stream="false" data-header="true" />
</div>
</div>
</div>
<div id="box" ></div>
#specialsWrapper
{
height: 450px;
width: 920px;
color: white;
}
#specials {
float: left;
border:2px dashed white;
height:390px;
width: 270px;
color: white;
margin: 25px 10px 0px 48px;
}
#specials p {
margin: 0px;
padding: 15px;
text-transform:uppercase;
font-size: 24px;
font-style: oblique;
}
#events {
float: left;
border:2px dashed white;
height:390px;
width: 270px;
color: white;
margin: 25px 15px 15px 15px;
}
#events p {
margin: 0px;
padding: 15px;
text-transform:uppercase;
font-size: 24px;
font-style: oblique;
}
#fbFriends {
float: left;
margin: 25px 15px 15px 15px;
width: 250px;
height:390px;
}
#box
{
clear: left;
border: 2px dashed white;
height: 60px;
width: 853px;
color: white;
margin: 25px 15px 15px 48px;
}
Here's anwser for your question
EXAMPLE ON CODEPEN
Your build of these box's is weird thats why I had to use top: 40px; with position: relative;
btw. that's how you do on jsfiddle or codepen exampl, thats all community ask. Spend 5 min for your question isnt much to ask?
hope thats help.
EDIT:
I found what what the issue, you didnt closed specialsWrapper div thats why margin dint work.
I also cancel margin-botton from boxes inside specialWrapper and put overflow: auto to specialWrapper to countheight.
Now top: no need to be writen.
I think what you might want it display: inline-block; but without something to see I can't really know what's going on. And your description isn't enough. Could you post what's going on on js.fiddle.net or give us an example site?
I have a facebook app and I am working on the front-end now. I am just getting started with css and html, so this might be a silly question- sorry for that.
What I am trying to do is to divide the page in two sections. I've created two divs for that, but the problem is the way they are positioned. My code is the following:
<style>
.choose_div{
width: 20%;
height: auto;
padding: 1px;
left: 0px;
border: 2px;
}
.frame_div{
right:0px;
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
position: relative;
}
</style>
<div id="choose_div">
<ul>
<li class="li_choose">
<div class="li_div">
<p>Save</p>
<img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
<hr>
</div>
</li>
</ul>
</div>
<div id="frame_div">
<iframe id="frame_opened">
</div>
I thought that right:0px; for one and left:0px;for the other would position them properly, but they are just one at the bottom of the other.
Can anyone please help with this?
This is the normal way to do what you ask, using float:left;. There were a few other issues with your styles though:
You were targetting .choose_div the class (.), not the id (#)
You need to use box-sizing:border-box when you're doing this otherwise the padding and border is added on top of width:20% making the width larger than 20%.
jsFiddle
#choose_div {
width: 20%;
height: auto;
padding: 1px;
border: 2px;
float:left;
box-sizing:border-box;
}
#frame_div {
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
float:left;
box-sizing:border-box;
}
As for left and right, they can be used to align to a particular side of the screen if using position:absolute. position:relative simply shifts the element a particular amount, for example left:2px would shift the element 2 pixels to the left.
position:absolute positions the element on its closest ancestor that has a position of non-static. Then left/right/top/bottom can be used to indicate the sides of the ancestor.
for the div which to be shown write:
float:left
And for the right one:
float:right
<style>
#choose_div{
width: 20%;
height: auto;
padding: 1px;
left: 0px;
border: 2px;
float:left;
}
#frame_div{
float:right;
right:0px;
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
position: relative;
}
</style>
If you add borders you must shrink your divs' witdh. Or they overflows the parent section and seen top-bottom.
<style>
html,body{margin:0;}
#choose_div{
display:block;
float:left;
width: auto;
height: 100%;
padding: 1px;
}
#frame_div{
float:right;
height: auto;
width: 80%;
height: 100%;
border: 2px 2px 2px 2px;
border-left:solid 2px #000000;
padding:10px;
overflow:hidden;
}
</style>
<body>
<div id="choose_div">
<ul>
<li class="li_choose">
<div class="li_div">
<p>Save</p>
<img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
</div>
</li>
</ul>
</div>
<div id="frame_div">
<iframe id="frame_opened">
</div>
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Formatting an <li> element within a <div>
The facebook and twitter elements are not aligned. I want them to be positioned perfectly, one above the other. Please can you help?
Here's my code:
#floating-box {
width: 65px;
height:auto;
background-color: #484848;
margin: 54px 10px 0px 623px;
position:absolute;
z-index:1;
text-align: justify;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
border-right: 1px solid #484848;
}
.social {
position : relative;
list-style-type : none;
margin-left: 2px;
}
.social li a {
float: left;
padding: 1px 5px 5px 0px;
margin: 0px 0px 3px 0px;
display: inline;
}
The HTML that uses this CSS is:-
<div id="floating-box">
<img src="likeusnow.jpg" />
<ul class="social"><!-- Facebook Like/Share Button -->
<li><a name="fb_share" type="box_count" rel="nofollow" share_url="http://www.mysite.com"></a>
</li>
<li>
Tweet
</li>
</ul>
try display: inline-block; instead
Ok I am making a lot of assumptions on this one.
Assumptions
You are using the vertical Facebook share (which has been deprecated, so I'm demonstrating with the Facebook Like Button)
Your are using the similarly styled Twitter share, also with the vertical count.
This is supposed to be a modal dialog that pops up in the middle of the screen.
The image "likeusnow.jpg" is just the text "Like Us Now"
I'd float the <li> elements rather than the <a>'s. Styling the <a>'s will not matter since their content is an <iframe>. It's the fixed width of the div that is getting you into trouble. While the buttons are supposed to be floated left, there is not enough room and the Twitter button is being bumped below the Facebook one.
CSS:
#floating-box {
position:absolute;
background-color: #484848;
margin: 54px 10px 0px 623px;
z-index:1;
text-align: justify;
border: 1px solid #000;
border-right: 1px solid #484848;
padding: 15px;
}
.social {
position: relative;
list-style: none;
margin-left: 2px;
padding: 0;
}
.social li {
float:left;
margin-left: 10px;
}
I made a demo using jsFiddle and inserted placeholder Facebook Like and Twitter Share plugins here.
Hi all and good morning!
The issue I'm having today is with IE7's rendering (shock, horror) of my work in progress website. Below is some code that is intended to create a page wide <div> that has an image on the left hand side (an arrow) and then 2 lines of text to the right of the image, then a progress bar holder <div> with another <div> inside that will be widened and narrowed to fill the progress bar.
<div class="courseItem">
<img src="images/courses-arrow.jpg" width="41" height="41" alt="->" />
<p><span class="title">Intermediate Microsoft Excel 2010</span><br />
<strong>Last accessed:</strong> 21st September 2011</p>
<div class="courseProgress">
<div class="progressContainer">
<div class="progressFill" style="width: 60px">
</div>
</div>
<p>50%</p>
</div>
<div class="clearBoth"></div>
</div>
Now, what's the problem you ask? Well the issue is that for some reason, and this has really stumped me, the first of these bar divs (there are 4 in total, all exactly the same as the code above, no changes what so ever) has a massive white space between itself and its border which forces the other 3 bars below to be pushed away.
Here's the css;
.courseItem {
margin: 0px 0px 15px 0px;
border-bottom: 1px solid #b0dff7;}
.courseItem img {
float: left;
margin: 0px 20px 15px 0px;}
.courseItem p {
font-size: 11px;
color: #999999;
margin: 5px 0px 0px 0px;
padding: 0;
float: left;}
.courseItem p span.title {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 12px;
color: #00154d}
.courseItem .courseProgress {
float: right;}
.courseItem .courseProgress p {
width: 50px;
font-size: 20px;
color: #52b9ed;
margin: 7px 0px 0px 10px;}
.courseItem .courseProgress .progressContainer {
margin: 15px 0px 0px 0px;
padding: 0;
width: 120px;
height: 12px;
background: url(../images/courses-empytprogress.jpg) no-repeat;
float: left;}
.courseItem .courseProgress .progressContainer .progressFill {
margin: 1px 0px 0px 0px;
height: 10px;
max-width: 120px;
background: url(../images/courses-fillprogress.jpg) repeat-x;
float: left;}
This is the visual representation
http://img1.uploadscreenshot.com/images/orig/10/29204251178-orig.jpg
Thanks in advance.
(Sorry for long windedness, just trying to paint a picture)
Remove the float:left property of .div p, and add display:inline-block;. Then, define the clear:both CSS property for the .clearBoth class.
Fiddle: http://jsfiddle.net/Jqhe8/
Fixed CSS:
.courseItem p {
font-size: 11px;
color: #999999;
margin: 5px 0px 0px 0px;
padding: 0;
display: inline-block; /*Removed float, added display*/
}
.clearBoth { /*Define clear:both!!!*/
clear: both;
}
In your code you didn't clear it's parent div & you .clear class is not working so; first clear the parent div because the child div's have float in it. Write like this
.courseItem {
border-bottom: 1px solid #B0DFF7;
margin: 0 0 15px;
overflow: hidden;
}