I am having an issue where I am trying to underline my h1 with a border-bottom, but it extends behind my picture (to the left). I would like the underline to extend to the very end of the page. Here is my code:
HTML:
<div id="content">
<img src="http://imageshack.us..."/>
<h1>About me</h1
<p>Info about me....</p>
<h2>Contact info</h2>
<p>Phone:my number</p>
<p>Email: my email</p>
</div>
CSS:
#content {
padding: 5px 10px 5px 0px;
margin: 10px 10px 10px 0px;
}
#content img {
float: left;
margin: 0px 10px 10px 0px;
}
#content h1 {
font-size: 26px;
margin: 15px 0px 5px 0px;
border-bottom: 5px solid black;
}
Note: I am a novice coder - so if this is not possible or there are any other ways to do this let me know!
Do this:
#content h1 {
font-size: 26px;
margin: 15px 0px 5px 0px;
border-bottom: 5px solid black;
display: inline-block;
}
This will only underline the contents. Not the whole line.
The reason that this is happening is because you haven't set a width on the h1. So it is naturally going to extend the entire page width. To solve this, add a width property, and you should be good to go. This is what the code looks like now
#content h1 {
font-size: 26px;
margin: 15px 0px 5px 0px;
border-bottom: 5px solid black;
width:200px; /*Change this to whatever value that you want*/
}
Fiddle
As others have stated, you can also use inline-block on the h1. This would normally put everything on the same line as the h1, but since it is a p below it, this is not the case, because p elements natrually have a CSS of display:block;.
Fiddle
you can use
display: inline-block;
http://jsfiddle.net/nrfB7/1/
Related
I am trying to center an h1 tag, but it doesn't work when I set it's width. When I don't set a specific width it works, but I would like to keep the width at 400. My code is below.
body {
margin: 0;
font-family: Arial;
font-size: 1em;
}
.navbar-ul {
margin: 0;
color: white;
background-color: black;
overflow: hidden;
-webkit-box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
box-shadow: -1px 10px 20px 0px rgba(0,0,0,0.75);
}
a {
color: white;
}
li, a {
text-decoration: none;
display: inline-block;
padding: 10px;
background-color: black;
transition: 1s;
border: solid 1px transparent;
}
li:hover, li:hover a {
background-color: #3f3f3f;
}
.header-text {
border: solid 5px black;
width: 400px;
text-align: center;
padding: 25px;
}
li {
list-style-type: none;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dark Website Template by Jordan Baron</title>
<link rel="stylesheet" href="styles-main.css">
</head>
<body>
<div class="navbar">
<ul class="navbar-ul">
<strong><li>HOME</li>
<li>CONTACT</li>
<li>ABOUT</li></strong>
</ul>
</div>
<strong><h1 class="header-text">DARK</h1></strong>
</body>
</html>
I don't think the other elements are the problem, but hey, it's a possibility.
The h1-element is a block-element. This means that the width is 100% by default. By using text-align: center you only center the text inside the element, not the h1 itself.
When you set the width to 400px the text is still centered inside the block, but the element itself no longer has a full-width.
The solution would be to center the element as a whole. This can be done by setting the horizontal margin to auto.
This should work for you:
.header-text {
border: solid 5px black;
width: 400px;
text-align: center;
padding: 25px;
margin: 0 auto;
}
<h1 class="header-text">DARK</h1>
For more information about centering with CSS, check out this guide: https://css-tricks.com/centering-css-complete-guide/
If you're trying to center the entire element, you can use the auto value for the left and right margin on the header:
.header-text {
margin: 0 auto;
}
I've recently got my website up and running. I'm in a bit of a rush at the moment, could anyone tell me of a way of styling the divs so they are all displayed horizontally. I'v got them all in a div.
#questionTitleDiv { width: 280px; height: 70px; margin: 10px 0px 10px 0px; padding: 10px 0px 10px 10px; border: 1px solid #FFFFFF; background-color: #F3F781; border-radius: 10px;}
#questionTitleDiv h2 { font-size: 18px;}
#shareButtonDiv { display: inline;}
#facebookSharer { display: inline;}
#twittertweet { display: inline;}
#google+Share { display: inline;}
#questionAnswerDiv { width: 250px; margin: 0px 0px 10px 0px; padding: 10px 20px 10px 20px; border: 1px solid #FFFFFF; background-color: #F3F781; border-radius: 10px;}
<div id="questionTitleDiv">
<h2>Question?</h2>
<div id="shareButtonsDiv">
<div id="facebooksharer" class="fb-share-button" data-href="http://www.example.com/examplehtml" data-layout="button_count"></div>
<div id="twittertweet"><a class="twitter-share-button" href="http://www.example.com/example.html" data-related="carpetinfo_com" data-size="medium" data-count="horizontal" data-counturl="http://www.example.com/example.html">Tweet</a></div>
<div id="google+Share" class="g-plus" data-action="share" data-annotation="bubble"></div>
</div>
</div>
<div id="questionAnswerDiv">
<p>answer!!</p>
</div>
when they display, the facebook div is a little lower than the others. I've tried positioning them absolutely, with the containing div positioned relative so it stays in the flow of the page. But they all jumble up. Vertical align doesn't work on them. and margin-top or padding-top doesn't work either, i', kind of stuck and in a rush.
Could a simple float work for you ?
#shareButtonsDiv div{
float:left;
}
http://jsfiddle.net/su3wt0hy/
Ok I am having trouble with a school project where we must create a website with 5 pages, and publish it one of the requirements is a sidebar on every page, but the problem is we are not allowed to use absolute positioning only float and tables can be used to do this.
Here is my External CSS
/* CSS Document */
body{
background-color: #181818;
color: #E60000;
}
#header{
text-align: center;
background-color: #000080;
padding: 20px 0px 0px 0px;
}
#body{
/*this is here for only a certain part of the body*/
background-color: #000080;
border: 5px inset #C0C0C0;
margin-left: 0.7%;
margin-right: 39%;
padding: 10px 5px 10px 0px;
}
#sidebar{
background-color: #000080;
border: 5px inset #C0C0C0;
margin-right: 0.7%;
margin-left: 65%;
padding: 10px 5px 10px 0px;
text-align: center;
height: 100%;
float: right;
}
p{
line-height: 160%;
font-family: Verdana, Arial, Helvetica, sans-serif;
Padding: 5px 10px 5px 10px;
}
/*Navigation bar*/
ul{
background-color: #000080;
margin: 10px 10px 0px 10px;
list-style-type: none;
padding: 5px 0px 5px 0px;
text-align: center;
border: 5px inset #C0C0C0;
}
ul li{
display: inline;
padding: 5px 20px 5px 20px;
text-align: center;
}
ul li a:link, ul li a:visited{
color: darkred;
border-bottom: none;
font-weight: bold;
}
ul li.selected{
background-color: #181818;
}
and here is my HTML
<div id="body">
<h1 id="header">About me</h1>
<p>some stuff
<br>
<br>other stuff</p>
<h2 style="text-align: center;">Me</h2>
<ol>
<li></li>
<li></li>
</ol>
<p style = "text-align: center;">
stuff<br>
br>Much more stuff</p>
</div>
<div id="sidebar"><h1>Name here</h1>
<p>Even more stuff</p>
</div>
Alright that is all the code I used for this I hope this helps
(sry this isn't codded correctly based on the websites standards but I couldn't get it to work sry)
alright Now Either I can get both #sidebar and #body's divs to appear in the same location; however one of there text will be below the other div container or one div will appear below the other on one side of the page, and I know this isn't very good CSS it's just a rough outline, but this is the biggest problem that stands out to me that will be hard to fix, so if anyone can help I would appreciate it.
I believe this is what you are looking for.
You can set the main content section - i believe you use #body - to have a width of e.g 70% and then the sidebar to have a width of 30%. Then use float: left; on both the elements.
Keep in mind that the 70/30 does not factor in padding or margins, which you will need to account for.
the code could look like this
> #body{ width: 60%; background-color: blue; float: left; height: 200px; }
> #sidebar{ width: 20%; background-color: red; float: left; height: 200px; }
>
>
>
> <div id="body"></div> <div id="sidebar"></div>
So i tried to reproduce your issue in a Fiddle here: DEMO
You have quite a few CSS issues:
if you want to use float for your layout, both can be float left with widths set
you are mixing percentages in your margin (which i converted to width
values) and pixel values in your padding
you can use the universal selector to set the box-sizing to
'border-box' which does not add the padding values to the width
values (* { box-sizing: border-box; }) -- if you don't use this CSS
you need to be careful that your padding doesn't cause your elements
to become wider than 100% of the page (their parent element
Here is your CSS after my modifications.
* {
box-sizing: border-box;
}
#header{
text-align: center;
background-color: #000080;
padding: 20px 0px 0px 0px;
}
#body{
/*this is here for only a certain part of the body*/
background-color: #000080;
border: 5px inset #C0C0C0;
width: 65%;
padding: 10px 5px 10px 0px;
float: left;
}
#sidebar{
background-color: #000080;
border: 5px inset #C0C0C0;
width: 35%;
padding: 10px 5px 10px 0px;
text-align: center;
height: 100%;
float: left;
}
JS Fiddle demo
CSS
body{
background-color: #181818;
color: #E60000;
}
#header{
text-align: center;
background-color: #000080;
padding: 20px 0px 0px 0px;
}
#body{
/*this is here for only a certain part of the body*/
background-color: #000080;
border: 5px inset #C0C0C0;
margin-left: 10px;
margin-right: 20px;
float:left;
width:70%;
padding: 10px 5px 10px 0px;
}
#sidebar{
background-color: #000080;
border: 5px inset #C0C0C0;
padding: 10px 5px 10px 0px;
text-align: center;
width:20%;
height: 100%;
float: right;
}
p{
line-height: 160%;
font-family: Verdana, Arial, Helvetica, sans-serif;
Padding: 5px 10px 5px 10px;
}
I'm assuming body is where you're putting your content (not the html body tag with an id of body)
Anyways when you have two side by side containers you will want both with the same float.
Example
#body, #sidebar {
Float: right;
Padding: 2%;
}
#body {
Width: 70%;
}
#sidebar {
Width: 15%;
}
example values just make sure the width + margins + padding don't don't exceed 100% or the parent container max pixel width.
Box-sizing: Border-box;
can help with containers growing with padding or borders.
I have been searching since yesterday for a solution but couldn't find one, or couldn't find the right keywords to search with.
So I have a header on my website like this is a header and I centered that nicely and extended the background color of it.
Now I found out how to make a nice interactive/glossy nav bar as a footer but im using it at the top and the thing is I also want to extend it's size, however it just centers itself and doesn't extend. I'll show this in a screenshot and will post my code.
Also: I want my box to be centered, which is contained in a div called #main_inner_area.
Note: Navbar is still called #footer in CSS/HTML code.. I want to extend the sides of my navbar, like the background color of my header is extended to the full width.
my screenshot: i41 DOT tinypic DOT com SLASH 2qk6mmt.png (sorry but its hard to explain without screenie)
HTML:
<div id="main_area">
<header>
<h1>This is a header</h1>
</header>
<div id="footer">long code for layout navbar</div>
<div id="main_inner_area">
<article>d fsdf sdf sdf dsf dsf dsf</article>
</div>
</div>
CSS:
*{
padding: 0px;
margin: 0px;
}
#main_area{
background:#4863A0;
display: block;
text-align: left;
}
header {
height:100px;
background: #4863A0;
color:white;
border:none;
width:700px;
margin: 0 auto;
}
#footer{
width:700px;
top:100px;
margin:0 auto;
padding:0;
left:0;
right:0;
margin: 0 auto;
height: 40px;
border-radius:7px 7px 7px 7px;
font-family:Arial;
text-shadow: 1px 1px 1px black; /*h,v,blur,color */
/* glass effect */
border-bottom: 1px solid rgba(0,0,0,0.3);
background: rgba(0,0,0,0.5);
/*inset = inner shadow ----------- this just creates multiple shadows*/
/*top border, top white section, overlay top white, bottom*/
box-shadow: inset 0px -2px rgba(255,255,255,0.3),
inset 0px -15px 20px rgba(0,0,0,0.2),
inset 0 -10px 20px rgba(255,255,255,0.25),
inset 0 15px 30px rgba(255,255,255,0.3);
}
#main_inner_area{
float: left;
width:735px;
margin:25px 0px 10px 0px;
}
article{
background: rgba(255,255,255, 0.5);
border: 1px solid #4863A0;
margin:0px;
margin-bottom: 10px;
padding: 15px;
font-family: Tahoma;
font-size: 14px;
text-align:left;
display:block;
width:700px;
height:auto;
border-radius: 7px 7px 7px 7px;
}
P.S. I'd REALLY appreciate it. Im an 18 year old student trying to learn some extra things next to my study.
To make your header dynamic just remove the width attribute from it (and from #footer aswell). If you set it to a fixed value of course it cannot scale.
To center your article use margin-left: auto; margin-right: auto;
Update: (stretch Nav Bar)
CSS Changes
#footer {
width: auto;
}
#footer .links {
width: 700px;
margin: 0 auto;
}
HTML Changes:
<div id="footer">
<div class="links">long code for layout navbar</div>
</div>
See http://jsfiddle.net/UKYDb/1/
I'm not sure what you mean by "extend" but you're setting a fixed width and height to everything:
#footer {
width: 700px;
height: 40px;
...
}
Try using percents instead of fixed widths for everything in your CSS code.
width: 100%;
I have created a div with two child elements.
a paragraph
a input with type text.
I have provided same height to both of them but on browser I am not getting same height for them.
my html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="./StyleSheet.css">
</head>
<body>
<div class="textWbutton">
<p>Enter Name</p>
<input type="text" placeholder="I am placeholder" />
</div>
</body>
</html>
MY CSS
html,body
{
font-size: 0px;
}
.textWbutton
{
}
.textWbutton input[type='text']
{
margin: 0px;
padding-left: 10px;
padding-right: 10px;
height: 30px;
display: inline;
border-radius: 0px 5px 5px 0px;
border: 1px solid Black;
}
.textWbutton p
{
font-size: 15px;
margin: 0px;
padding-left: 10px;
padding-right: 10px;
height: 100%;
display: inline;
border-radius: 5px 0px 0px 5px;
border: 1px solid Black;
}
Here if the fiddle for the same. http://jsfiddle.net/apoorvasahay01/mByYC/1/
Please let me know what could have gone wrong here.
That is because you have not made a reset of their custom attributes. Like <p> and <input> by default have some padding and margin and when you add a height, it populates accordingly.
Use display: inline-block instead of inline.
demo
Or use display: table-cell and add display: table-row to .textWbutton
demo
Use padding to fit it same as input.
.textWbutton p {
font-size: 15px;
margin: 0px;
height: 30px;
display: inline;
border-radius: 5px 0px 0px 5px;
border: 1px solid black;
padding: 8px;
}
When you display a block element like p as inline it gets the height from the line-height attribute which you haven't set. To get what you intent you should rather display it as inline-block or set the line-height.
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/ has a nice explanation.