I have something like this
<h3 style="border-bottom:1px solid black;">
<strong>Some text</strong><img src="someimg.png">
</h3>
And it's look like this:
And I want to get this:
Anyone know how? Thanks in advance for your answers.
This is my html
<h3 style="border-bottom:1px solid black;">
<strong><span style="font-size:20px;">Spam</span></strong> <img style="width: 50px; height: 50px; float: right;" src="spam.fw.png" alt="">
</h3>
that's about it for css and html
It's a bit of a hack, but you could try adding a background-color to the image (that orange color), which should cover up the underlying border.
EDIT: It's hard to know for certain what will work without seeing the CSS you have already...
check the following JS fiddle
http://jsfiddle.net/hCQuH/
img
{
margin-right:-15%;
}
h3
{
width:85%
}
Add this to your img class
position: absolute;
right: -10px;top:30px;
jsfiddle http://jsfiddle.net/YAfKS/4/
This should solve it.
CSS
img
{
float:right;
padding:0px 2px;
background:white;
}
Then add relative positioning to get the desired result.
Have a look at this http://jsfiddle.net/Es2Ay/
Related
i have made 5 hyperlinks in html file but i want to give space between them
how should i do it a little help!
thank you!
<body>
<div class="back">
<div class="image">
<img src="comp.jpg" alt="background image" style="width:100%; height:100%">
</div>
<h3 class="name" style="color: #d9d9d9">
ASHUTOSH KUMAR SINGH
</h3>
<div class="link" align="middle">
About
Contact
Skills
My Work
Blog
</div>
<div class="myimg" align="middle">
<div class="circle" align="middle">
</div>
<img src="ashu.jpg" class="myimage" style="height: 300px; width:300px";>
</div>
</div>
this is my css file: in the code below i have made a class of link in which i
cascaded it. i want to give some equal space between them so that it look neat.
html,body{
margin:0;
}
div.link{
font-size: 25px;
position: fixed;
/*text-space: 100;*/
margin-top:500px;
margin-left: 250px;
}
.back{
height: 100%;
width: 100%;
margin: 0;
}
.image{
position: fixed;
}
.myimg{
position: absolute;
margin-top:100px;
margin-left: 500px;
}
.myimage{
border: 2px solid rgba(114, 114, 114, 0.55);
border-radius: 100%;
}
.circle{
border: 2px ;
border-radius: 100%;
background-color: black;
}
.name{
position: fixed;
margin-top:420px;
margin-left: 530px;
}
I think the most easiest way you're looking for is:
.link a {margin-right:10px;}
the only problem with this is that all link elements get now a margin-right, from the first to the last one.
if you want to exclude the last element to have no margin right, add an additonal:
.link a:last-child{margin-right:0px;}
remember that in css you can perfectly nest css selectors
html body .back .link a{some-css-rule}
by the way, the more specific a selector is, the more important it will be when the browser analyses them)
<div class="some_class" id="some_id" style="color:grey;">sometext</div>
#some_id{color:black;}
.some_class{color:blue;}
div {color:green;}
the color will be grey, because inline selectors have more weight than selectors with ID, which have more weight than selectors with classes, which have more weight than selectors with html containers.
This is called CSS specifity
CSS-specifity calculator by keegan.st
CSS specifity explained by css-tricks
Try to avoid custom CSS-Styles in your HTML-File and include them in your CSS-File. You can use padding or margin in your CSS-File, see this link for the difference.
YourHTMLfile.html
<head>
<link rel="stylesheet" href="YourStyleFile.css">
</head>
<body>
...
<div class="link" align="middle">
About
Contact
Skills
My Work
Blog
</div>
</body>
YourStyleFile.css
.link a {
padding: 16px;
color: white;
}
EDIT: make sure to create a CSS-File and add it to your <head> section of your HTML-File. They both have to be in the same directory. Another reason why my code may not work for you is that maybe you have another CSS-File which overrides the .link class.
Wrap them in a div and style the div with word-spacing: 10px; :)
Hey guys I am trying to make a page which is having six buttons. I want the caption under the image will slide in on mouse over event.I am using animate.css for this.
My problem is when I use <hr> tag my hover effect is not working. If I removed this Its working properly but I want to use both together.
I also tried <div> tag and border-top property of css but any element whichever I used in-between the caption and image will cause stop working hover effect.
I tried to change the size of image and increasing the padding but it is not working. Is there any idea that how to do it?
This is my html code:
<div class="btn-row">
<a href="domainSearch.html">
<div class="box-btn">
<img src="style/img/university.jpg" class="img"><hr class="caption-border">
<div class="caption animated slideInUp"> Institution</div>
</div>
</a>
</div>
This is my css:
.caption{
display: none;
text-align: center;
font-size: 1.5em;
color: $txt-lightgrey;
position: absolute;
margin: -10px 0px 0px -75px;
}
.img:hover + .caption{
display: inline;
}
Here is the example
Can anybody help me out?
Thanks in Advance!!
There is no .caption directly after .img.
Use ~ instead of +.
.img:hover ~ .caption {
display: inline;
}
https://jsfiddle.net/hwunxuy5/1/
I have been looking for a way to center an anchor tag vertically according to a span tag, which are both encased within div tag.
My HTML
<div id="project_list">
<div class="title">
Example Project
<span class="show_details">Show Details</span>
<div style="clear: both"></div>
</div>
</div>
My CSS
div#project_list {
border: 2px solid #000000;
}
div#project_list div.title {
background: grey;
padding : 10px;
}
div#project_list div.title a {
font-size: 1.231rem;
}
div#project_list span.show_details {
background: orange;
float : right;
padding : 13px 5px;
}
I have also create a JSFiddle here, so you may see what I am speaking about.
Thank you to everyone in advance as I have been racking my brain on how to do this for a couple days now.
You could set the line height to match the button height:
a { line-height:46px; }
Note: I just used a but you will probably want to add a class so the style doesn't get applied to all anchor tags.
http://jsfiddle.net/GxqTh/2/
#OpenNoxdiv- try adding padding to your a tag; 20px seemed to center nicely for me. - see below
#project_list div.title a {
padding-top:20px;
}
I'm trying to change style of WORK div when hovering at one of the hexagons. I've put them all into a table as a container, but it doesn;t seem to work.
Maybe you can give me a hint, thank you.
Example
I just answered another question like this (but was specific to a task). I shall use the same example so you can have a look at how it works.
You can do this just using CSS:
HTML:
<img name="image1" src="./goal/images/normalButton.png" style="vertical-align: middle; width : 183px;" />
<h2 class="mnrImageH2"><span class = "mnrImageSpan">Haberler</span></h2>
CSS:
.mnrImageH2 {
position: absolute;
top:1px;
left: 0;
width: 100%;
}
.mnrImageSpan {
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
padding: 10px;
}
h2 {
color: white;
}
img:hover + h2 {
color: #000;
}
So using the + selector we can select the h2 when we hover over an img. Take this and do what you need to do with it.
DEMO HERE
If I correctly understand your point the answer is "You cannot with current schema."
You shall use + or ~ selector. They works if elements have the same parent so you can apply CSS rule if any of hexagon is hovered but you cannot determine particular one.
Add the rule to your example to see what i'm saying:
*:hover + * > * > .work-box{
border: solid red;
}
If your elements have the same parent solution is quite simple - Example
There is good site for Russian speakers about ~ selector
This can help you in your problem and if you are not satisfy by this then comment on this post i will try to solve that also.
<div>
<div class="e" >Company</div>
<div class="e">Target</div>
<div class="e" style="border-right:0px;">Person</div>
</div>
<div class="f">
<div class="e">Company</div>
<div class="e">Target</div>
<div class="e" style="border-right:0px;">Person</div>
</div>
And use hover like this,
.e
{
width:90px;
border-right:1px solid #222;
text-align:center;
float:left;
padding-left:2px;
cursor:pointer;
}
.f .e
{
background-color:#F9EDBE;
}
.e:hover{
background-color:#FF0000;
}
I'm having a problem with a CSS. I have a little image with the problem:
The first part show what happend when in the block "Contenido" it's empty, and the second part when it has something. The problem? The second botton use a break and appear under of the other bootom. I have tried a pair of styls, but i can't get with one that work. What i have in CSS and html?
<div class="nav-pad">
<button id="previous_left" class="button_previous">
<img src="/images/left-arrow.png"/>
</button>
<div id=info_left>
Here we could put some info but it give a problem
</div>
<button id="next_left" class="button_next">
<img src="/images/right-arrow.png"/>
</button>
</div>
And in the CSS i have this one:
.nav-pad{
padding: 0.2em;
postion: relative;
}
.button_next{
float:right;
right:0
}
.button_previous{
left:0;
}
Any clue what i'm doing bad?
Thanks a lot!
Roberto
I edited your HTML and CSS a little bit but I made it work,
I am still not sure what you are trying to get here.
The code may need to change in order to get better results
click on the link bellow to see an example of the answer
http://jsfiddle.net/TkNDS/2/
Did u gave any width for the nav-pad div, if yes then remove it.
Else try adding overflow:auto to the nav-pad class..
Can you please give us a sample page with this style and content, so that we can figure out the exact error..
.nav-pad {}
.button-next { display:inline-block }
.button-previous { display:inline-block }
#info-left { display:inline-block }
To accomplish the same layout, What I will do is:
.nav-pad{
padding: 0.2em;
clear:both;
overflow: hidden;
}
.button_next{
float:right;
}
.button_previous{
float: left;
}
#info_left{
float: left;
}
Well i have solved. The help that you give me, give me a clues to solve it:
With this html:
<div class="nav-pad">
<button id="previous_left" class="button_previous">
<img src="http://www.baltimark.com/_/rsrc/1234983635623/public/tech/stackoverflow-logo-250.png"/>
</button>
<div id="info_left">
Here we cdfgdfould put some info but it give a problem
</div>
<button id="next_left" class="button_next">
<img src="http://www.baltimark.com/_/rsrc/1234983635623/public/tech/stackoverflow-logo-250.png"/>
</button>
</div>
and this css:
.nav-pad{
padding: 0.2em;
border: solid 1px green;
overflow: auto;
}
.button_previous{
float: left;
width : 15%;
}
.button_next{
float:right;
width : 15%;
}
#info_left {
float: left;
width : 70%;
}
Thanks a lot!