I have a column layout design where I will have some fields on the left, and--when hovering one such field--info about them on the right. However, I can't seem to get it working. Please let me know what you think.
EDIT I am totally flexible to changing the HTML, CSS, or both. Also, I would prefer not to use javascript, if possible.
HTML:
<div id="content">
<div class="content-left">
<p class="one">This is page1 left content</p>
</div>
<div class="content-right">
<p class="one_info">This is page1 right content</p>
</div>
</div>
CSS:
.content-left{
background-color: #bcc5d8;
display: inline-block;
float: left;
width: 75%;
margin-left:15px;
margin-right:5px;
}
.content-right{
background-color: lightsteelblue;
display: inline-block;
margin-right:15px;
//margin-bottom:16px;
}
.one_info{
opacity:0;
}
.one:hover .one_info{
opacity:1;
}
Code in motion:
https://jsfiddle.net/828qthhq/3/
Your CSS is written in a way such that .one_info will only get an opacity of 1 if it is a child of .one.
In other words, you would get the desired effect using the following HTML.
<div class="one">
Always visible
<div class="one_info">Show on hover</div>
</div>
In order to use your current HTML and still get the desired effect, you would need to use javascript.
As others have stated, the way you're doing it is a tad off! Here is a solution using javascript! I added onmouseover and onmouseout events to the first div which call a JS function to toggle the opacity.
<script>
function toggleInfo(on){
var styleToSet;
if(on){
styleToSet = "opacity:1";
} else{
styleToSet = "opacity:0";
}
document.getElementById("test").style=styleToSet;
}
</script>
<div id="content">
<div class="content-left" onmouseover="toggleInfo(1)" onmouseout="toggleInfo(0)">
<p class="one">This is page1 left content</p>
</div>
<div class="content-right">
<p id="test" class="one_info">This is page1 right content</p>
</div>
</div>
Related
I would like to have something along the lines of (the bordered thing is a a picture and text has inverse coloring so that it is easy to read)
Mind you the image is a simple div tag that is going to live in
<div class = "row">
<div class = "col-md-6">
<h3>Title</h3>
<p>
Short and nice paragraph
</p>
</div>
</div>
However I do not know a first thing of where to start from. I tried reading bootstrap tutorials and they didn't provide much. I understand that I haven't provided any piece of code to show my work, but I honestly do not even know where to start, or what to search for or what to do. So I am not really asking for a full solution or anything, but if you could point me in right direction I will be ever so grateful
here you go
.col-md-6{
width:50%;
}
.image{
position:relative;
}
.image img{
width: 300px;
}
.text{
position:absolute;
top: 50%;
left: 0;
padding: 0 25px;
background: rgba(255,255,255,.6);
}
.text h3, .text p{
color:#f63;
}
<div class="row">
<div class="col-md-6">
<div class="image">
<div class="text"><h3>Title</h3>
<p>
Short and nice paragraph
</p>
</div>
<img src="https://i.pinimg.com/736x/51/d6/e3/51d6e3dcccd3bdac300202a5a3e99de0--pretty-cats-beautiful-cats.jpg">
</div>
</div>
</div>
Quillion, I don't understand what your question is. The code above should render almost what you want. Nevertheless maybe this helps you:
I wrapped your code in a main container .container-fluid and in a .card element, both can be found in the bootstrap documentation.
I just added one additional style for a wider border. You can play with it a little and should be quickly get the style you need. Here is a link to the pen: https://codepen.io/scheinercc/pen/pdwdvx
Hope that helps.
<style>
.custom-border-width-3 {
border-width: 3px;
}
<style>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="card mt-2 custom-border-width-3">
<div class="card-body">
<h1>Title</h1>
<p>
Short and nice paragraph
</p>
</div>
</div>
</div>
</div>
</div>
I'd like to have all surnames on the second line AND maintain the exact same width for test div. What is the best way of achieving this with CSS?
HTML:
<div class="test">
<h1>Mike S</h1>
</div>
<div class="test">
<h1>Mike Smith</h1>
</div>
<div class="test">
<h1>Mike Smiths</h1>
</div>
CSS:
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
http://jsfiddle.net/zcg9k5xh/
Update your code with this:
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
h1 span{display: block;}
<div class="test">
<h1>Mike <span>S</span></h1>
</div>
<div class="test">
<h1>Mike <span>Smith</span></h1>
</div>
<div class="test">
<h1>Mike <span>Smiths</span></h1>
</div>
You can also do this by using css, update above css
h1 span{display: list-item;list-style:none;}
jsfiddle with this
http://jsfiddle.net/zcg9k5xh/2/
Given that it seems you are willing to change your HTML, I would recommend you simply add <br> after the first name, instead of wrapping the last name in any other tags. This would be deemed best practice.
The HTML <br> Element (or HTML Line Break Element) produces a line
break in text
This will give more semantic HTML- without the need to adjust native element styling, or clutter your DOM with uneccessary nodes.
.test {
width: 25%;
float: left;
background: red;
margin-right: 20px
}
h1 {
text-align: center
}
<div class="test">
<h1>Mike<br>S</h1>
</div>
<div class="test">
<h1>Mike<br>Smith</h1>
</div>
<div class="test">
<h1>Mike<br>Smiths</h1>
</div>
Use the word-spacing attribute to the child tag:
.test {
width: 25%;
float: left;
background: red;
margin-right: 20px
}
h1 {
background-color: blue;
word-spacing: 100px;
}
<div class="test">
<h1>Mike S</h1>
</div>
<div class="test">
<h1>Mike Smith</h1>
</div>
<div class="test">
<h1>Mike Smiths</h1>
</div>
I don't see what you are asking, it seems like the jsfiddle is what you are asking here.
But you can always set width to 100% so it cover for the text, if you want all that text in the same div then put it all under one Div tag.
Is this what you want?
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
<div class="test">
<h1>Mike</h1>
<h1>S</h1>
</div>
<div class="test">
<h1>Mike</h1>
<h1>Smith</h1>
</div>
<div class="test">
<h1>Mike</h1>
<h1>Smiths</h1>
</div>
I am currently making a website for a college task and I am really confused on why the div I am trying to create is not appearing.
It doesn't seem to work since I added the code for the three boxes, they are meant to be the same width as the three boxes.
JsFiddle
<div id="wrapper">
<div id="top">
<div class="logo"> </div>
</div>
<div id="menu">
<div class="button"> Home </div>
<div class="button"> Destinations </div>
<div class="button"> Make A Booking </div>
<div class="button"> Things To Do </div>
<div class="button"> Contact Us </div>
</div>
<div id="box">
content here
</div>
<div id="threeBoxContainer">
<div id="deal_one"></div>
<div id="deal_two"></div>
<div id="deal_three"></div>
</div>
</div>
You just need to add box-sizing property
#deal_one {
/*Other Style */
box-sizing:border-box;
}
#deal_one {
/*Other Style */
box-sizing:border-box;
}
#deal_three {
/*Other Style */
box-sizing:border-box;
}
Reference
Fiddle Demo
You Border-Width in each Box counts to the width.
Look at the Box-Model: http://www.w3schools.com/css/css_boxmodel.asp
Given what you said in the comments, a possible answer:
HTML at the bottom:
<div id="threeBoxContainer">
<div id="deal_one"></div>
<div id="deal_two"></div>
<div id="deal_three"></div>
</div>
<div id="bigbox"></div>
CSS:
#bigbox {
width: 98%;
height: 300px;
background-color:rgba(0, 95, 160, 1);
border: solid 2px black;
margin-top: 5%;
}
It seems to work for me. I can only get a solid line like you referred to if i leave the height out.
Its because css width only represents the content width. Total width is the combination of padding, margin and border.
Total Width=ContentWidth+Padding+Border+Margin
So giving width to 33% and some margin,padding and border is making it actually greater than 33%. Reduce the width size to achieve the desire results. Around 30 or 31% will be good.
I have the following webpage which works in IE7 but not in IE8;
The HTML:
<div class="content">
<div class="inner_content">
<div class="column">
<div class="widget">
1
</div>
</div>
<div class="column">
<div class="widget">
4
</div>
</div>
<div class="column">
<div class="widget">
7
</div>
</div>
</div>
</div>
<div class="footer">
<div class="inner_footer">
footer
</div>
</div>
The CSS:
.inner_content, .inner_footer
{
width:983px;
margin:auto;
padding:10px;
}
.content
{
background:#FFFFFF;
}
.footer
{
background:#BBBBBB;
}
The problem:
For some reason the footer div goes underneath the content div in IE8 but not in IE7. How do I get it to look the same in IE8 as it looks in IE7? The IE7 look is how I want it to look.
jsFiddle:
http://jsfiddle.net/GgpaP/
You need to contain the floated .columns inside .inner_content.
One way to do this is to add overflow: hidden: http://jsfiddle.net/thirtydot/GgpaP/3/
This will also make it work in modern browsers.
Add clear:both to footer...
DEMO
Also slight modification has been done for container.
Add display:inline-block to your content-class (in css).
I'm abysmal at HTML so looking for some help in recreating the following. I could do it with a table, but understand that that is a no-no nowadays. So advice is needed.
alt text http://img130.imageshack.us/img130/8623/4panel.jpg
What I am wanting to achieve is four fixed size boxes then spread across the page on a single row. These boxes will have some information in them, possibly text, possibly images and possibly both.
The boxes will be static size, ie I don't want them resizing to fit the width of the browser window. I'm guessing it probably going to be done with the div tag but I don't have the first clue where to start.
You want something like this (not tested)
<div id="wrapper">
<div id="box1" class="box">
<!-- your content here -->
</div>
<div id="box2" class="box">
<!-- your content here -->
</div>
<div id="box3" class="box">
<!-- your content here -->
</div>
<div id="box4" class="box">
<!-- your content here -->
</div>
</div>
with the CSS
.box{
width: 200px;
margin-left: 20px;
float: left;
}
#box1{
margin-left: 0;
}
#wrapper{
margin: 0 auto; // Center on the page
width: 860px;
}
You can use four fixed-width/height divs which are all set on float:left;.
<div class="box">Some content</div>
<div class="box">More content</div>
<div class="box">Maybe an image</div>
<div class="box">Some content and an image</div>
with this css:
.box {
width: 200px;
float: left;
}
Well, it's not so tricky:
<div class="panelwrapper">
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
That's really all the HTML you should need.