I have the following structure:
<div class="boxLayer">
<div class="text">Result</div>
<div class="additionalLink"></div>
</div>
.boxLayer{
position: relative;
float:left;
height:28px;
width:100%;
border-top: 1px solid #cccccc;
background-color: #fff;
}
.boxLayer a {
display:block;
height:100%;
width: 100%;
background: white;
}
.boxLayer a:hover{
background-color: #ffeecc;
}
The idea is to have a box with a text shown at the left side of this box and an additional link at the right side of the box. When i hover over the box, the backgroundColor of the box is shown, also when i hover over the text or the second link. I have managed to create the Box, but when i add the text or the link, the hover-Effect of the box is not shown.
I am not sure this will be your answer
please check the fiddle:
.boxLayer {
position: relative;
height:auto;
float:left;
width:100%;
border-top: 1px solid #cccccc;
background-color: #fff;
}
.boxLayer:hover {
background-color: #ffeecc;
}
<div class="boxLayer">
<div class="text">Result</div>
<div class="additionalLink"> </div>
</div>
Related
I have defined a Div which is 100% wide and 380 px in height. Within this Div, I want to display an image, text, and an image right in the middle and center.
I tried using this code -
<div id="mainContent">
<div class="wrapper">
<div class="centered">
<img class="g1" src="http://www.google.com/favicon.ico" height="64" width="64"/>
<div class="text1">
some random text I want to put in the middle
</div>
<img class="g2" src="http://www.google.com/favicon.ico" height="164" width="164"/>
</div>
</div>
</div>
and the related CSS is
#mainContent {
background-color: #10AEEF;
margin: 0px auto;
border: 0px solid #000000;
width:100%;
height:380px;
text-align:center;
}
.wrapper {
text-align:center;
border:0px solid #00FF00;
}
.wrapper:before {
content:'';
height:100%;
display: inline-block;
vertical-align:middle;
}
.centered {
display: inline-block;
vertical-align:middle;
}
.g1 {
margin: 0px auto;
border: 0px solid #0000FF;
float:left;
}
.text1 {
margin: 0px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 44px;
color: #FFFFFF;
border: 0px solid #FF0000;
width:50%;
float:left;
}
.g2 {
margin: 0px auto;
border: 0px solid #0000FF;
float:left;
}
I am trying to avoid using a table to display this. But I want the centered class to be in the middle and center and within that g1 in the middle, text1 in the middle, and g2 in the middle.
Right now all are floating to left. But when I take it out, they are are aligned one on top of the other but in the middle. I think I am missing something basic.
If I understand your question correctly and you want both images and the text centred one on top of another then this is (I think) all you need:
#mainContent{
background-color:#10AEEF;
height:380px;
text-align:center;
}
Note that you specify things like border:0px solid #000000;. Essentially what you are doing is already specifying what is default, you don't need them.
EDIT
This is the code needed to center everything both vertically and horizontally:
<div id="mainContent">
<div class="centered">
<img class="g1" src="http://www.google.com/favicon.ico" height="64" width="64"/>
<div class="text1"><p>Some text here...</p></div>
<img class="g2" src="http://www.google.com/favicon.ico" height="164" width="164"/>
</div>
</div>
And the css
#mainContent{
background-color: #10AEEF;
width:100%;
height:380px;
text-align:center;
position:absolute;
}
.centered{
position:relative;
top:50%;
transform: translateY(-50%);
}
Note: If you want to keep the wrapper div make sure you change the css from .centered to .wrapper
I am wondering if a border like this would be possible in pure css? There will be no content within this box, only an image within the future.
I would like to achieve this in pure CSS, with no jQuery. I have looked around and it seems it isn't really possible, however with CSS constantly evolving I was wondering if it was possible apart from using nested divs etc.
Cheers!
You can fake it. Like this jsFiddle example.
HTML
<div id="wrapper">
<div id="top"></div>
<div id="bottom"></div>
<img src="http://www.placekitten.com/200/100" />
</div>
CSS
#top, #bottom {
width: 200px;
height:50px;
position:absolute;
left:-1px;
}
#bottom {
border-left: 1px solid #f00;
border-right: 1px solid #f00;
border-bottom: 1px solid #f00;
bottom:0;
}
#top {
border-left: 1px solid #f00;
top:0;
}
#wrapper {
position:relative;
width: 200px;
height:100px;
background: #faa;
}
You can do it with only one div if you use pseudo elements. jsFiddle here
HTML:
<div id="wrapper">
<img src="http://www.placekitten.com/200/100" />
</div>
CSS:
#wrapper {
position:relative;
width: 200px;
height:100px;
background: #faa;
border-left: 1px solid #f00;
border-bottom: 1px solid #f00;
}
#wrapper::before {
content: " ";
position: absolute;
width: 100%;
height: 50%;
bottom: -1px;
right: -1px;
border-right: 1px solid #f00;
border-bottom: 1px solid #f00;
}
Just for the 'think' of it, you could also just stick a small graphic at the bottom right of a div (as a background image) and use a border on the left and bottom. Still just manipulating it via css with one small graphic but at least the height and width would be dynamic and not stuck as if using a full image.
Would also avoid A LOT of extra mark-up and css. 1 div, 1 css declaration and 1 small image.
I'm working on a map project and for some reason my tooltip's text width will continue to expand as wide as I want until I add a space to my text. If I add a space, it breaks to the next line; what is going on and how do I fix this? I'd like the text on one line without specifying a width so it can automatically set the width, how can I fix this?
In the example below, look at text "Baseball Fields" in the paragraph tag. If it reads "BaseballFields" it will stay on one line. But as soon as I add the space, it will line break.
<div style="width: 750px; height: 1221px; border: 0; padding: 0; margin-top: 10px; display: block; position:relative; background: url('http://www.thefirstacademy.org/filerequest/9701.jpg') no-repeat left top;">
<style type="text/css">
.triangle {
position:absolute;
bottom:-5px;
left:40%;
height:0;
width:0;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid white;
}
.tooltip {
color:#ef4c4c;
background:#ffffff;
padding:17 10;
display:block;
position:absolute;
border-radius:5px;
font:.8em 'MuseoSans-500','Museo Sans';
top:-40px;
box-shadow:0px 3px 3px #000;
border:1px solid #000;
}
</style>
<div class="marker" style="position:absolute;cursor:pointer;left:450px;top:75px;" id="baseball">
<img src="http://www.thefirstacademy.org/filerequest/9702.png" alt="Location Marker" />
<div class="tooltip" >
<div class="triangle"></div>
<p style="padding:0;margin:0;line-height:0;display:block;">Baseball Fields</p>
</div>
</div>
</div>
Just a heads up: in addition to white-space: nowrap; it can be helpful to include display: inline-block; for browser compatibility purposes
So I have a website which has a header, a footer and two main content columns inbetween.
The left column is for navigation. The right one is a map. I want both to fill the width of the browser. I seem to be facing problems with different resolutions and different browsers. The map always displaces to below the footer or it leaves a white space on the right.
My link: http://www.trashvigil.com/nsdf/www/index1.php
This is my code:
#map{
float:left;
height:572px;
width:79.88%;
border-right: 2px solid #000;
border-bottom: 3px solid #000;
}
#leftnav
{
float:left;
width:250px;
height: 572px;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
}
#map is the map container. #Leftnav is navigation.
Thank you,
Kaushik
You need something like this:
#map {
margin-left:250px;
height:572px;
}
#leftnav {
float:left;
width:250px;
height: 572px;
}
The idea is to float the leftnav and then set a left margin for the map that is equal to the width of the leftnav.
You can see it live here: http://dabblet.com/gist/2767788
#nav {
position:absolute;
left:0px; width:250px;
height:375px; top:50px; /* height of your top bar*/
}
#map{
margin-left:250px;
height:572px;
}
Something like this should be what you need.
<style>
#main
{
width: 900px;
overflow: hidden;
}
#leftnav
{
float: left;
}
#map
{
float: right;
}
</style>
<div id="header">
</div>
<div id="main">
<div id="leftnav">
</div>
<div id="map">
</div>
</div>
<div id="footer">
</div>
Write like this:
#map{
overflow:hidden;
height:572px;
border-right: 2px solid #000;
border-bottom: 3px solid #000;
}
#leftnav{
float:left;
width:250px;
height: 572px;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
}
I've got a page with a thumbnail on it (more to come, so the float:left property is necessary). The thumbnail is a Div, with an anchor in it, in that anchor is an image and some text. The text is below the image. The ancho rinks to a pdf file. Simple.
http://www.bridgecitymedical.com/forms
The problem is that the text gets underlined on hover when you hover over it, and the thumb image gets a border and the text gets underlined when you hover over the thumb image. What I need is for then you hover over either the text or the image, that they BOTH get applied their respective hover states, e.g. image gets a border, text gets underlined. At the moment they function by themselves, but they need to be one, or it just looks odd.
Here's the markup:
<div class="form">
<a href="/wp-content/uploads/forms/Adolescent New Patient Paperwork.pdf" target="_blank">
<div class="form-wrapper">
<div class="form-thumb">
<img src="/forms/thumbs/1.jpg" alt="" />
</div>
Caption
</div>
</a>
</div>
and the css...
.form {
margin: 30px;
font-size:.8em;
width: 137px;
text-align: center;
}
.form-thumb{
width: 125px;
height: 150px;
padding:5px;
border: 1px solid rgba(0,0,0,.2);
float:left
}
.form-thumb:hover{
border: 1px solid #000;
}
The text underline comes from another part of the tylesheet by default.
Can I do this without javascript!?
Solved by Chris (selected answer). Here's his solution, with my thumb in a fiddle...
http://jsfiddle.net/7MLjZ/1/
Use the :hover state on .form-wrapper instead.
<div class='wrap'>
<div class='thumb'></div>
Text!
</div>
.wrap{width:60px; height:80px;}
.thumb{width:60px; height:60px; background-color:blue;}
.wrap:hover{text-decoration:underline;}
.wrap:hover .thumb{border:5px solid black;}
http://jsfiddle.net/7MLjZ/
This should work to make both the image's div border and the caption's text black when hovered:
.form {
margin: 30px;
font-size:.8em;
width: 137px;
text-align: center;
}
.form-thumb{
width: 125px;
height: 150px;
padding:5px;
border: 1px solid rgba(0,0,0,.2);
float:left
}
.form:hover .form-wrapper .form-thumb {
border: 1px solid #000;
}
a:hover {
color:#000;
}