Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Link: http://path.com.my/v2/gallery/
Try when you hover/mouseover one of the links in the tab, especially near EXTERIOR, ILLUMINATED, INTERIOR, PYLON , the items on the second row keep moves around.
I tried changing a few of the CSS on hover but it doesn't seems to work.
Anyone can help?
Remove float from .sortLink and use inline-block instead.
Use following css:
.sortLink {
display: inline-block;
vertical-align: top;
color: #999;
font-size: 14px;
padding: 5px 8px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
margin: 0 5px 5px 0;
transition-duration: 0.5s;
}
Solved:
margin: 0 6px 0 0 !important;
Remove the float:left; from a tag and display:inline-block;
.sortLink {
/* float:left; */
display: inline-block;
}
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am trying to hide my .dwBtn class button on hover, using the code below, but it's not working.
.dwBtn {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: rgb(0, 180, 0);
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.dwBtn:hover {
display: none;
}
<button class="dwBtn">Test</button>
I've searched on Google and on StackOverflow but cannot find a solution. I have tried changing the opacity, like so:
opacity: 0;
But it still isn't doing anything as far as I can see. It looks as if there was a typo somewhere, but I can't find it.
When the element isn't displayed, you can't hover it, so the rule stops applying, so it springs back immediately.
Using opacity as you suggested will work, it just didn't seem to because of typo you have since fixed.
.dwBtn {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: rgb(0, 180, 0);
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.dwBtn:hover {
opacity: 0;
}
<button class="dwBtn">Test</button>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I want to draw a line before and after the text. And I want to do these features twice. Like in the image below : How can I achieve this? I tried before and after but could not solve it. I am beginner in CSS. THanks for your time.
Something like this, with ::before and ::after pseudo-elements.
.team {
text-align: center;
position: relative;
color: darkslategray;
font-size: 2em;
}
.team-span {
display: block;
text-transform: uppercase;
font-size: 0.5em;
margin-bottom: 0.5em;
}
.team-span::before,
.team-span::after {
display: inline-block;
content: "";
width: 1.5em;
height: 0.2em;
margin: 0 0.5em;
/* the lines */
border-top: 2px solid;
border-bottom: 2px solid;
}
<h2 class="team">
<span class="team-span">Our Best Team</span> Our Team
</h2>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm looking to this website. And I have no idea why it has this huge scroll. I'm try understand why or where this scroll is created.
The problem is in this div .nav-path-wrap it has diplay:initial and on hover you make its position absolute , it always will have its space on your page even it not visible.
so you just need to make its display:none and on hover display:block
css must be like this :
.left_menu .nav-path-wrap {
background: url(../images/icons/icon_left_menu_arrow_l.png) no-repeat left 1em;
padding-left: .7em;
display: none; // edit this from initial to none
}
.left_menu li:hover .nav-path-wrap {
position: absolute;
left: 12em;
top: -.5em;
height: 100px;
display: block; // add this line
}
note that if you edited the .left_menu { overflow: hidden; }. the sub menu .nav-path-wrap will not be visible on hover
.left_menu li:hover ul {
top: -.8em;
left: .7em;
display: inline-block;//add
}
.left_menu li ul {
background: #109CD8;
z-index: 100;
display: none;//change
height: auto;
padding: .3em 1em 1em 1.4em;
left: -999em;
position: absolute;
-webkit-box-shadow: 3px 3px 5px 0px #053047;
box-shadow: 3px 3px 5px 0px #053047;
width: 14.6em;
}
So I've gone through the inspector deleting elements until I came across the culprit.
The ul.left_menu.clearfix is what's causing the layout problem. If you remove the .left_menu class, the list spills out into a huge vertical list, and the white space disappears.
This isn't the "best" solution, but you can remove that class, add a fixed height, and then set the overflow-y to scroll.
You may find a more elegant option though.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Hello I am new to CSS and I am using quotes in a website I am building. However I do not really want to use an image to achieve the style when I might be able to use CSS. My problem is I have no idea where to start! THIS IS THE IMAGE I WILL USE IF THE SAME EFFECT IS NOT POSSIBLE IN CSS Can somebody please show me how to achieve this
Simplest way is to create a <blockquote> element and using pseudo elements to control the quotation marks. Note: some styles are added, mainly margins and paddings, to overwrite browser styles.
body {
font-family: sans-serif;
}
blockquote {
color: #aaa;
position: relative;
display: inline-block;
padding: 0 5px;
}
blockquote p {
margin-bottom: 5px;
}
blockquote:before,
blockquote:after {
content: "“";
font-size: 70px;
font-family: "Georgia", Serif;
color: #666;
position: absolute;
left: -30px;
top: 5px;
}
cite {
float: right;
color: black;
font-size: 12px;
margin: 0;
padding: 0;
}
blockquote:after {
content: "”";
right: -30px;
left: auto;
}
<blockquote><p>a man may die, nations may rise and fall, but an idea lives on</p><cite>- John F Kennedy</cite></blockquote>
Article mentioned by #thomas should have all the relevant information you need here
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
A client wants a navigation layout as shown below:
As you can see, it is made up of "main links" and "sub links". There can be any number of each, and the text content may change. The width of the menu container will change depending on the page size.
God bless the designers, who decided to align the left and right edges of these links, and keep a consistent amount of space between each one. The client is adamant that this is how the navigation is made.
So, the question is: how can this be done? I've tried it with tables (CSS and HTML), but while they align over the total length, the text in the cells doesn't align on the right hand side.
The current solution is to put a custom amount of padding on the elements until they line up, but obviously this is a rubbish solution. I don't want to end up having to measure things with Javascript to lay them out, so if anyone knows of a smart way to get this done, I'd certainly appreciate it.
I do think CSS tables will get you most of the way.
You merely have to align the text of the first and last elements of each
JSfiddle Demo
CSS
* {
margin: 0;
padding: 0;
}
.menu ul {
padding: 0 3px;
display: table;
width:100%;
}
.menu-list li {
height: 45px;
list-style: none;
background-color: #f69b58;
display:table-cell;
/* add this */
text-align: center;
font-family: arial;
font-size: 14px;
margin-right: 2px;
}
.menu-list li:first-child {
text-align:left;
}
.menu-list li:last-child {
text-align:right;
}
.menu-list li a {
display: block;
padding: 13px;
color: #ffffff;
text-decoration: none;
}
.menu-list li:active {
color:black;
background-color: #3EAEE9;
}
.menu-list li:hover {
background:#3eaee9;
}
.menu-list li.current {
background-image: -webkit-linear-gradient(top, rgb(7, 80, 158), rgb(6, 101, 243));
background-color: #3EAEE9;
}
NOTE: This will NOT make the distance between each link the same, for that you will (almost certainly) require JS.
It sounds like something which concerns the right amount of divs to align the text in the center. I've made a solution in fiddle as you can see here: http://jsfiddle.net/denWG/32/
HTML:
<body>
<div class="container">
<div class="in_container">
Example Exampleson
</div>
<div class="in_container">
Producer
</div>
</div>
</body>
CSS:
.container{
width: 200px;
height: 200px;
}
.in_container{
text-align: center;
}
}
.name {
font-weight: bold;
margin: 0 auto;
}
.title {
margin: 0 auto;
font-size: 11px;
line-height: normal;
}