I have to create a format for my web application which is the given in the image below.Using CSS only, I styled my-ad div as shown in the picture.
There is a 10px padding from the border for the word "Hello Coder" and the font of which has to be in "Tahoma"
Here is my code which I tried but was getting an error with the font family tahoma and the border width.
#my-div{
margin-top: 20px;
margin-left: 10px;
margin-bottom: 5px;
padding-left: 10px;
border-style:solid;
border-width: 20px;
font-family:tahoma;
font-weight:bold;
}
<html>
<head>
</head>
<body>
<div id="my-div"> Hello Coders
</div>
</body>
</html>
Related
I want to line it up clearly but I just can't. What should I do for it?
<html>
<head>
<style type="text/css">
.article-topic-list a {
color: black;
text-decoration: none;
margin-left: 15px;
margin-top: 20px;
}`enter code here`
</style>
</head>
<body>
<div class="article-topic-list"> Sale of Kodi TV boxes faces <br> legal test </div>
<div class="article-topic-list"> Piracy fighters battle Kodi 'epidemic'</div>
</body>
</html>
To get the results you're asking for, designwise, you'll have to move the margin-styles to the div, and keep the color and text-decoration on your a-tag. If you simply remove the 'a' from the style tag, you won't get any color or text-decoration changes, since the style from the browser (directly on a), would take precedence.
.article-topic-list {
margin-left: 15px;
margin-top: 20px;
}
.article-topic-list a {
color: black;
text-decoration: none;
}
<body>
<div class="article-topic-list">
Sale of Kodi TV boxes faces <br> legal test
</div>
<div class="article-topic-list">
Piracy fighters battle Kodi 'epidemic'
</div>
</body>
See this example.
Instead of applying the css rule to the tag, if you apply the rule to the entire div, i believe it should line up correctly. Your style script would be like this:
<style type="text/css">
.article-topic-list {
color: black;
text-decoration: none;
margin-left: 15px;
margin-top: 20px;
}
</style>
And the output would be something like this.
I have a div with a custom font and I'm trying to make it so the text has the same height as the div it's inside of.
I've been trying to find a way to override the vertical alignment of text without a div with no success.
I was hoping there was something like the text-indent method for this purpose.
Here's a simple JsFiddle with my example.
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
<style>
.texto {
background-color: #000;
height: 24px;
font-family: 'Lekton', sans-serif;
color:white;
font-size: 24px;
}
</style>
</head>
<body>
<div class="texto">Test</div>
</body>
</html>
Use a line-height CSS property :
line-height : 24px;
Add a line-height with a property value that measures the height of the containing DIV
<style>
.texto {
background-color: #000;
height: 24px;
font-family: 'Lekton', sans-serif;
color: white;
font-size: 24px;
line-height: 24px; /* This line solves your problem */
}
</style>
</head>
<body>
<div class="texto">Test</div>
</body>
Here's the image:
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FLoung</title>
<meta charset="utf-8">
<style>
body {
background-color: #cfcfcf;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
text-decoration: none;
}
#wrapper {
width: 700px;
margin: auto;
padding: 5px;
margin-top: 75px;
}
</style>
</head>
<body>
<div id="wrapper">
Test
</div>
</body>
</html>
how would I go about doing the second dark layered background? the top part is light grey, how would I go about doing the bottom part dark?
Would I just create a new div, with a z-index?
You could just split the wrapper div into two divs with different background colours
Example here
I am trying to implement a rounded corner to a box in my html code.
When I run the file on Chrome, I have the box and all the attribute but the corners won't round.
I am using Komodo Edit on MAC OSX Lion.
What's the solution?
Thanks
<!doctype html>
<html lang="en">
<head>
<meta charset=="utf-8" />
<link rel="stylesheet" href="new.css" />
</head>
<body>
<div id="box">
<p id="text"> Hello </p>
</div>
</body>
</html>
CSS3:
body {
text-align:center;
}
#box {
display: block;
width: 500px;
margin:50px auto ;
padding:15px ;
text-align:center;
border: 1px solid blue;
background: red;
-webkit-border-radius: 25p;
}
#text {
font:bold 100px Century Gothic;
}
The problem is probably that it should be 25px instead of 25p.
But depending on you Chrome version, you should drop the -webkit- and just use border-radius;
You don't need -webkit- on there. Just use border-radius.
The main problem is that you missed the x on 25px.
Looks like a typo
-webkit-border-radius: 25p;
Should be
-webkit-border-radius: 25px;
You missed an x on the end. For cross browser compliancey, you should really use several prefixes.
-moz-border-radius: 25px; /*Firefox*/
-webkit-border-radius: 25px; /*Safari/Chrome/Konqueror*/
-khtml-border-radius: 25px; /*Konqueror*/
border-radius: 25px; /*Chrome*/
I have this html and css code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div.container{
border: 1px solid #F00;
}
a.padded
{
font-size: 14px;
font-weight: bold;
text-decoration: none;
background-color: #F0F0F0;
border: 1px solid #666666;
padding: 15px;
margin: 10px;
border-radius: 5px;
box-shadow: #CCC 2px 2px 2px;
color: #333333;
}
</style>
</head>
<body>
<div class="container">
my padded link
</div>
<div>Some other content</div>
</body>
</html>
I was expecting the padded link to be contained in it's parent DIV block where the DIV would expand to whatever height of the padded link. However it seems the link padding is ignored by the DIV and everything else on the page.
Why does this happen and how do I properly pad a link?
What you need to do is, give your anchor tag an display:block property.
a.padded {
display: block;
/* display:inline-block; should
work too but is not supported in some version of IE */
}
Anchor tags are inline objects.
Add display: inline-block; to .padded. and it should work.
http://jsfiddle.net/6h7MY/
Because I've asked myself this question recently, this article is a big help as to why this is happening. The relevant bit is:
The W3C’s CSS2 spec states that for Inline, non-replaced elements,
the ‘height’ property doesn’t apply, but the height of the box is given
by the ‘line-height’ property.