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
My client wants to put a black background under the top navigation bar. it can be at
http://seasonlawn.com/CellularSolutionsHTML/catalog.html
can someone please help me how to code this in css
open the default.css file in a text editor and change the following code:
#headertop {
width: 100%;
min-width: 1130px;
padding-bottom: 7px;
background: url("../images/topnav-rep.png") repeat-x left top transparent;
height: 32px;
position: fixed;
z-index: 99999;
top: 0;
left: 0;
border-top: 1px solid grey;
margin-top: -1px;
}
to the
#headertop {
width: 100%;
min-width: 1130px;
padding-bottom: 7px;
background: #000000;
height: 32px;
position: fixed;
z-index: 99999;
top: 0;
left: 0;
border-top: 1px solid grey;
margin-top: -1px;
}
Currently the problem is ../images/topnav-rep.png image is not accesible. In the above line we are removing the image and making the background color for #headertop element black (hex -> #000000).
the problem is that image you included(in .categorymenus ul) is failed to include/load
you can sue firebug to check
what you need to do is include proper path everything else is ok
there also many image failed to load also
Add Background color to this class
#main-nav .categorymenus{background-color:#000;}
.categorymenus ul{here background image failed to load check this once}
<div class="categorymenus" style="display: block;background: url("http://www.lacovachamiami.com/images/layout/lightBackgound.png") repeat ;">
Related
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 yesterday.
Improve this question
I have tried multiple ways, but I’ve been running into issues attempting to make a container with diamond shaped edges on either side with the corner rounded, as well as another one with the diamond shape inverted. Similar to my sketch:
Optimally, the solution would only need HTML & CSS, with a different color border and fill. I would definitely be open to alternative solutions if that would include SVG, for example.
Thanks!
I have tried to create a mask with SVGs, but I could not find a way to add a border and a separate fill, as well as containing text inside it, and there were scale issues too (I’d like it only to scale horizontally, not vertically when width changes.)
You can achieve this using the ::before and ::after psuedo-elements in CSS relatively easily. The second one (with non-inverted triangles) is slightly less verbose than the first example, but both are achievable using a single HTML element and some creative CSS.
Please note that you might need to modify some of the pixel dimensions to suit your needs, but the following should achieve what you need:
.label {
background: red;
border: 2px solid #000;
color: #fff;
display: inline-block;
font-family: sans-serif;
margin: 0 30px;
padding: 10px 50px;
position: relative;
text-transform: uppercase;
}
.label::before,
.label::after {
aspect-ratio: 1/1;
background-color: #fff;
border: 2px solid #000;
content: '';
display: block;
height: 28px;
position: absolute;
overflow: hidden;
transform: rotate(45deg);
top: 4px;
}
.label::before {
border-bottom: none;
border-left: none;
left: -16px;
}
.label::after {
border-top: none;
border-right: none;
right: -16px;
}
.label--inverse::before,
.label--inverse::after {
background: inherit;
border: inherit;
}
.label--inverse::before {
border-top: none;
border-right: none;
left: -17px;
}
.label--inverse::after {
border-left: none;
border-bottom: none;
right: -17px;
}
<span class="label">Text</span>
<span class="label label--inverse">Text</span>
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 2 years ago.
Improve this question
I am new in CSS and HTML but I creating website where I need to cover text or picture with another one. I made example in Photoshop what exactly I need:
A solution based on css shadow:
h1 {
font-family: cursive;
text-shadow: -10px -10px 0px rgba(150, 150, 150, 1);
}
<h1>Lorem Ipsum<h1>
Online tools like : https://css3gen.com/text-shadow/ could help you to construct right text-shadow property
The code is self explanatory, Nevertheless if any question leave a comment.
Text
Using text-shadow less flexible for instance the duplicated the text will always be behind the actual text, If we want to reverse this we will have to align the shadow as the actual text and the actual text as the shadow which is a lot janky and not dynamic.
p {
margin: 2rem;
border:1px solid red;
padding:10px;
display:inline-block;
}
p:hover {
text-shadow: -5px -5px red;
}
<p>Lorem</p>
Using pseudo-element highly flexible, Can place the text anywhere, Drawback is must provide the text as an attribute or a CSS variable
p {
margin: 2rem;
padding: 10px;
display: inline-block;
position: relative;
font-size:1.3em;
}
p:before {
color: red;
position: absolute;
top: 40%;
left: 40%;
width:100%;
}
p:nth-child(1):hover:before {
content: attr(data-text);
}
p:nth-child(2):hover:before {
content: var(--data-text);
}
<p data-text="attribute">attribute</p>
<p style="--data-text:'CSS variables';">CSS variables</p>
Image:
[box] {
width: 300px;
height: 300px;
background: url(https://picsum.photos/300);
position: relative;
}
[box]:hover:before {
content: '';
background: inherit;
width: 100%;
height: 100%;
top: 25%;
left: 25%;
position: absolute;
}
<div box></div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
Hi I have following code:
.fotoRating {
color: #c5c5c5;
font-size: 50px;
position: relative;
text-shadow: 0px 1px 0 #a2a2a2;
}
.fotoRating .selectedStars {
color: #e7711b;
position: absolute;
top: 0;
overflow: hidden;
}
<div class="fotoRating">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
<div class="selectedStars" style="width:150px;">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>
When I put span on a new line, the stars will break: http://jsfiddle.net/mozkomor05/6hkpj0L4/1/
I think there is a small mistake, but I can't find it.
The set width on your selected stars container is causing the characters to break into another line to fit. If you want to prevent line-breaks, add this rule to .selectedStars
white-space: nowrap;
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
If you simply want to have different colors on the stars, you don't need two rows of them. You can just add a class to each star as needed:
.fotoRating {
color: #c5c5c5;
font-size: 50px;
text-shadow: 0px 1px 0 #a2a2a2;
}
.is-selected {
color: #e7711b;
}
<div class="fotoRating">
<span class="is-selected">★</span>
<span class="is-selected">★</span>
<span class="is-selected">★</span>
<span>★</span>
<span>★</span>
</div>
While #webdevdani approach works, it doesn't give the same result. Which is why I suggest this:
.fotoRating span {
display: table-cell;
}
This way the browser thinks they're cells and ignore the white space between the elements, while preserving the functionality
Here you go: http://jsfiddle.net/6hkpj0L4/4/
You need a fixed height on .selectedStarts. When you decrease the width to show a fewer number of stars, the stars are wrapping and your container is defaulting to height: auto; therefore showing all it's content.
Using a fixed width (here I used 70px) in combination with the overflow: hidden; which you already had in place does the job.
.fotoRating {
color: #c5c5c5;
font-size: 50px;
position: relative;
text-shadow: 0px 1px 0 #a2a2a2;
}
.fotoRating .selectedStars {
color: #e7711b;
position: absolute;
top: 0;
overflow: hidden;
height; 70px;
}
<div class="fotoRating">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
<div class="selectedStars" style="width:150px;">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
</div>
</div>
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
I am writing a web page but
I have a problem to position :after of .posts to bottom-right in all boxes.
Example in jsfiddle:
.posts::after {
content: " ";
width: 0;
height: 0;
border-top: 15px solid #DDD;
border-right: 13px solid transparent;
position: relative;
bottom: -41px;
right: -2px;
z-index: 999;
}
How can I achieve this?
http://jsfiddle.net/mu222/2/
Give .posts a position (relative), then set the after to position: absolute; bottom: 0; right: 0