Hi there a rather silly question I would like to angle my div 45 degr without the content rotating as can be seen the blue is an image which has the correct angle. but the div does not and because of this the on over color change looks wrong as it is not angled. i have tried a few example but content always gets angled as well.
how could i achieve this? thanks in advance for any suggestions.
HTML:
<div class="topnav" id="myTopnav">
Home
News
Contact
About
☰
</div>
CSS:
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transform: skewY(-45deg);
}
Here you go. The size of the triangle is determined by the border settings. Just insert this element after the a.about in your code.
#triangle {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
<div id="triangle"></div>
here's the settings for each direction:
top-left: border-top and border-right
top-right: border-top and border-left
bottom-left: border-bottom and border-right
bottom-right: border-bottom and border-left
Related
TLDR: click the bottom image and my noob problem becomes immediately evident.
Hi, all
I have two <div> elements that I want to separate with a <hr class="separator"> element.
The CSS code for the <hr class="separator"> element is as follows:
hr.separator {
border-top: 1px solid black;
margin-top: 70px;
margin-bottom: 0;
padding: 0;
}
The CSS code for the bottom <div class="brown"> element is as follows:
div.brown{
margin-top: 0;
padding-top: 70px;
background-color: #ce9771;
}
In the HTML code, these elements are set like this:
<div> upper div \<div>
<hr>
<div> bottom div \<div>
Still, I have a vertical whitspace (about 3px) between them. I've already tried to set all margins and padding to "0", and even played around with making the <hr>a child of each <div>and playing around with the position attribute (which invariably made the <hr>disappear).... Can anyone help a newbie here?
With:
hr.separator {
border-top: 1px solid black;
margin-top: 70px;
margin-bottom: 0;
padding: 0;
}
you only set/change the top border but the hr could also have other borders.
So first remove all borders with border: none; and then set the top border:
hr.separator {
border: none;
border-top: 1px solid black;
margin-top: 70px;
margin-bottom: 0;
padding: 0;
}
div.brown{
margin-top: 0;
padding-top: 70px;
background-color: #ce9771;
}
<hr class="separator">
<div class="brown">
</div>
Whenever you have you don't know why something looks wrong you should check the computed properties of the style that is applied for that element in the developer tools of your browser.
I wanted to make a text on a transparent strip with a colored strip on the left side. As in the picture below (the gray stripe should be transparent). The gray stripe would have to expand with the length of the text. If the text did not fit the width of the container, a new line would be created, and the orange bar and the gray bar would expand with the text (new line).
I was just starting to learn CSS and I wanted to achieve that, but I don't know how.
I made this small fiddle.
I've given background color to elements so that you can see how it acts based on amount of text. Change background-color to transparent on your h2 tag to get what you want.
HTML:
<div class="container">
<div class="label">
<h2 class="label-text">
Sample text
</h2>
</div>
</div>
and CSS:
.container {
width: 200px;
border: 1px solid Black;
background-color: gray;
}
.label {
background-color: white;
display: inline-block;
border-left: 10px solid red;
word-wrap: normal;
}
.label-text
{
display: inline-block;
padding-left: 10px;
}
Check this snippet:
#strip{
border: none;
}
#ribbon{
background-color: orange;
width: 15px;
height: 50px;
}
#strip-text{
padding-left: 20px;
background-color: #cccccc;
opacity: 0.6;
width: 185px;
height: 50px;
}
<table id="strip" cellspacing="0" cellpadding="0">
<tr>
<td id="ribbon">
</td>
<td id="strip-text">
EXAMPLE TEXT
</td>
</tr>
</table>
We have used CSS property opacity to add transparency to our strip.
Not sure what you've checked already (please share some code), but I think you want to use border CSS property, e.g.
border-left: 5px solid #ffdd00
EDIT:
Ok, since somebody downvoted this answer without clarification, I've realized by myself that probably OP is looking for total solution for his/her problem (so not only ribbon) - please check solution below then:
.ribbon {
color: #fff;
display: inline-block;
padding: 5px 10px;
border-left: 5px solid orange;
background: rgba(0, 0, 0, 0.25);
}
<div class="ribbon">Some text here</div>
You can achieve transparency by using rgba instead of opacity - it's supported by all modern browsers already.
This solution contains no hacks (or oldschool <TABLE> nodes!), requires only 1 element and is being widely supported by the browsers.
So I want to try to do this in html and css but I can't seem to find anything. I only way I can think is by importing the text as an image but that will look bad. P.S Light blue line is for centering as I am designing the site in Photoshop first
<p class="test">
Conact Me
</p>
.test {
border-top-style: solid;
border-bottom-style: solid;
border-bottom-width: 1px;
}
A simple solution is using text-decoration: underline overline;.
p {
text-decoration: overline underline;
}
<p>
CONTACT ME
</p>
You can use border-top in css to create a line above text.
.mytextbox {
border-top: 1px solid #ff0000;
}
border-top property
Example of use
Try using borders to achieve the look you are wanting:
a.my-class {
display: inline-block;
padding: 5px 15px;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
line-height: 1em;
text-decoration: none;
}
Well, you'd want to have the text element within a div, set the bg color property of the div to the color you're going for, and then set margins for the text element to push off the text by ~10px or so (looks like that's about where it's at in your mock up). From there you can set a border to only top, and bottom and style accordingly.
You can put the text inside a block level element and apply a top and bottom border. Advantage of this method against the text-decoration: underline overline; is, that you can simply define the space between text and lines with padding as you need it.
To make the width as long as the text is, just use display: inline-block;.
body {
background: #5cc8f6;
}
div {
display: inline-block;
padding: .5em;
border-top: 1px solid white;
border-bottom: 1px solid white;
color: white;
text-transform: uppercase;
font-family: Verdana;
font-size: 2em;
}
<div>Contact me</div>
I'm attempting to style my navigation menu design to reflect the one on timeanddate.com, as seen in this image:
To create the colors, they're using a simple bottom and left border in CSS.
I'm attempting to add a border to my <li> tags on my website sandbox, http://www.escapetech.com:8080.
I'm using the following CSS:
.anylinkcss li {
list-style-type: none;
}
.participate li {
list-style-type: square;
border-left-color: #fa514d;
}
#navigation_bar {
height: 31px;
list-style: none;
width: 1000px;
margin-top: 15px;
}
#navigation_bar li {
float: left;
padding-right: 35px;
padding-left: 10px;
margin: auto 0px;
vertical-align: middle;
}
#anylinkmenu3, #anylinkmenu4, #anylinkmenu5, #anylinkmenu6, #anylinkmenu7 {
position: absolute;
line-height: 18px;
z-index: 20;
background-color: #000;
text-align:left;
visibility: hidden;
left: 421px;
top:207px;
padding: 7px;
padding-left: 25px;
}
The #anylinkcss3 and further represent styles for the drop downs, while the #navigation_bar styles are for the whole bar. No matter where I add any border styles, none appear, even after I comment out all CSS code and just include a border on these IDs and classes.
My current menu is live at the link I posted above, I would greatly appreciate if someone could take a look and let me know why there may be any issues with borders appearing. This is my first Stack Exchange post so I hope that this was correctly formatted!
Although you set the width and color, you can not leave out the style parameter with borders.
To get the desired effect as you presented in the image - jsFiddle demo
dark background color for the <ul>
a wide border-left on the <li>
a margin-bottom: 2px as bottom border - shows ul background
and a few small tweaks like text-indent etc
Some information regarding borders
CSS borders consist of 3 parameters
border-width
border-style
border-color
You can set one value, which applies to all sides
border-width: 5px;
border-style: solid;
border-color: red;
Or with short hand border: 5px solid red; and also applies to all sides.
You can style each border side individually, as you are doing above.
border-side-width
border-side-style
border-side-color
Example:
border-left-width: 5px;
border-left-style: solid;
border-left-color: white;
Which can be accomplished also with shorthand: border-left: 5px solid white;
For more information and other border opportunities
https://developer.mozilla.org/en-US/docs/Web/CSS/border
https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
ahhh... Brian you beat me to it.
I inserted border-style, and then there is "BORDER"
border: 5px solid white;
Actually the trick in his case is that border is applied to the anchor tags not the lists! Cheers! :) And yes if you apply border-color as a property you should also apply border-style and border-width :)
I'm having trouble figuring out how to apply a split border on an element using CSS.
The effect I'm trying to achieve is this:
Where the red line and the grey line take up a % of the elements width. Preferably, I would like to apply this effect to an element using a single class.
Edit: for those asking for a code sample:
<!-- spans width 100% -->
<div id="wrapper">
<h1 class="title">DDOS Protection </h1>
</div>
Red text and a red underline? There's some simple CSS for this.
<span style='color:red; border-bottom: 1px solid red;'>DDOS</span>
<span style='color:#999; border-bottom: 1px solid #999;'>Protection</span>
Well, assuming that you want to use a single class, and without seeing your exact markup, this will work:
<div class="message">
<span>DDOS</span>
<span>Protection</span>
</div>
And then your CSS could look like this:
.message span {
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
color: #ccc;
}
.message span:first-child {
border-bottom-color: red;
color: red;
margin-right: 10px;
}
Here's a jsFiddle demo.
You can also try to play with :before and :after:
.line {
background-color: #DDD;
padding: 5px 10px;
position: relative;
}
.line:before, .line:after {
content: '';
width: 10%;
height: 2px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}
.line:after {
width: 90%;
background-color: green;
left: 10%;
}
http://jsfiddle.net/DHDuw/
Ok I've made a similar one but that was asked for vertical, but now am changing the gradient direction so that it will help you
Demo (Works On Chrome, If Anyone Knows Cross-Browser, Please Feel Free To Edit, Because Am Using Old Browsers So Won't Be Able To Test)
CSS
div {
font: 40px Arial;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0505), color-stop(50%,#ff0000), color-stop(50%,#000000), color-stop(100%,#000000));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}