How would I fit a small logo like - Image - in the top right of my border so it fits in and does not resize the border?
My code:
<html>
<head>
body {
text-align: center;
background-color: white;
margin: 0;
padding: 0;}
h1 {
font-family: 'Fjalla One', sans-serif;
color: #000;}
p {
font-family: 'Roboto', sans-serif;
font-size: 14px;}
<style>
#logo {
border-style: solid
border-color: #000;
border-width: 100%;}
</style>
</head>
<body>
<div id="logo">
<h1>example.com</h1>
<p>Examples examples examples.</p>
</div>
</body>
It's really hard to tell what you want to achieve because your code is buggy and you haven't showed how you want to put this image.
One possible solution is for example:
<html>
<head>
<style>
body {
text-align: center;
background-color: white;
margin: 0;
padding: 0;}
h1 {
font-family: 'Fjalla One', sans-serif;
color: #000;}
p {
font-family: 'Roboto', sans-serif;
font-size: 14px;}
#logo {
border-style: solid;
border-color: #000;
border-width: 100%;
background: url('WdP7OUV.jpg') top right no-repeat;
}
</style>
</head>
<body>
<div id="logo">
<h1>example.com</h1>
<p>Examples examples examples.</p>
</div>
</body>
If the image is too big I would strongly recommend you to resize it using any software. However you can also do it the other way adding after:
background: url('WdP7OUV.jpg') top right no-repeat;
line
background-size:80px 80px;
But in this case you unnecessary load too big image and it's a waste of transfer so better to scale it in graphic software.
Related
So I'm trying to get into html/css again, and having some issues with the border property.
If the border of the div ONE is 1, padding misbehaves in the div TWO. This can be "fixed" by using margins on TWO instead of padding.
If there is no border on ONE, the margins on TWO push ONE down with it. Using padding instead of margins fixes this, however, it does not make sense.
Anyone have any words of wisdom on the use of borders and divs? Pretty confused here.
The code below is for margins, and no border.
HTML Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/tyle.css" />
</head>
<body>
<div class="ONE">
<div class="TWO">This is some text as a test.</div>
</div>
</body>
</html>
CSS style:
body {
background: #e3f1e2;
margin: 0px;
padding: 0px;
font-family: arial;
font-size: 12px;
color: #000000;
}
a:link {text-decoration: none; color: #FFFFFF}
a.menu:link {text-decoration: none; color: #FFFFFF}
a:visited {text-decoration: none; color: #FFFFFF}
div.ONE {
/*border: 1px solid #CCCCCC;*/
background-image: url("../test.jpg");
background-repeat: no-repeat;
text-align: left;
width: 1024px;
height: 800px;
padding: 0px;
margin: 0px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
div.TWO {
margin-top: 80px;
margin-left: 120px;
}
borders are usually are on the outside. You can use box-sizing:border-box; in your css to behave. also see : Placing border inside of div and not on its edge
So, I'm trying to have two "halves" of the navigation thing under this title page thing, one floated left, the other right.
For some reason, They're not beside each other like they should be, unless I'm doing something wrong. Code is as follows:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Landing Mockup</title>
<link href="mockup.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="landing-container">
Hello. I'm Charles Baker.<br />
<span id="landing-codeblock">{ I design websites. }</span>
<div id="landing-links">
<div id="landing-links-left">
Small links here.
</div>
<div id="landing-links-right">
<ul>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ul>
</div>
</div>
<div id="clear"></div>
</div>
</body>
</html>
CSS:
body {
margin-top: 200px;
font-family: 'Roboto Slab', serif;
}
#landing-container {
width: 1000px;
margin: 0 auto;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
#landing-codeblock {
font-family: 'Droid Sans Mono', monospace;
font-size: large;
}
#landing-links {
width: 700px;
margin: 0 auto;
border: 1px solid blue;
}
#landing-links-left {
border: 1px solid orange;
float: left;
text-align: left;
font-size: x-small;
width: 200px;
}
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right;
}
#landing-links ul {
border: 1px solid green;
list-style-type: none;
}
#landing-links ul li {
border: 1px solid red;
display: inline;
}
#landing-links li a {
display: inline-block;
padding: 5px;
}
#clear {
clear: both;
}
I've got borders temporarily so I can see where things are, but...yeah. I need to float them next to each other, I think I'm doing something entirely wrong. Any thoughts?
Behold! http://jsfiddle.net/QHeDZ/
I added display:inline-block to your .landing-links-left and .landing-links-right css and removed your floats. I think this is what you were trying to do? If not, let me know! I can fix it up.
You're getting a wedge of top (and bottom) margin as a browser default. If you inspect your unordered list in Chrome you'll see from the user agent style sheet:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
You can set the margins on your list to 0 to remove this default. Also, I would recommend having a look at http://necolas.github.io/normalize.css/ which provides a nice set of default rules for common elements, taking the pain away from these kind of issues.
Just add <div id="clear"></div> before closing this div <div id="landing-links">
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right; //modify this to left(so it could be next to the other container)
}
Hope this helped you!Cheers!
Technically they are on the same line, but margin and line-height values aren't being clearly defined for better aligning. Including the following properties:
#landing-links-left { line-height: 20px; }
#landing-links ul {
margin: 0;
line-height: 20px;
}
In my CSS, I've created a menubar <div> and a header <div>. My intention is to have the menu line flush with the BOTTOM of the header's background image, so I've nested the menu inside the header. Alas, it's not working, and I can't figure out why.
I've created a fiddle, but I can't figure out how to upload the associated image file, so I've attached the header placeholder image. I've also uploaded a Wireframe demonstrating what I'm trying to make happen.
If you're not able to view the fiddle, here's my HTML and CSS:
HTML:
<!DOCTYPE html PUBLIC "-//W3c/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- ------------------------------------------------------------------------>
<head>
<title>Test</title>
<LINK rel="stylesheet" href="t2.css" type="text/css">
</head>
<!-- ------------------------------------------------------------------------>
<body>
<div id="header" >
<div id="menubar">
home | about | contact
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #FFFFFF;
color: #000064;
font-family: "Calibri", sans-serif;
font-size: 12px;
}
h1 {
background-color: #FFFFFF;
color: #000064;
font-family: "Calibri", sans-serif;
font-size: 2em;
}
h2 {
background-color: #FFFFFF;
color: #000064;
font-family: "Calibri", sans-serif;
font-size: 1.5em;
margin-left: 5%;
}
h3 {
background-color: #FFFFFF;
color: #000064;
font-family: "Calibri", sans-serif;
font-size: 1em;
margin-left: 20%;
}
p {
background-color: #FFFFFF;
color: #000064;
font-family: "Calibri", sans-serif
font-size: 12px;
padding: 0px 0px 0px 600px;
margin: 0px:
float: bottom;
}
a {
color: #000064;
text-decoration: none;
font-family: "Calibri", sans-serif;
font-size: 14px;
}
a.visited {
color: #640064;
weight: bold;
text-decoration: none;
}
#header {
height: 120px;
background-color: #ffffff;
background-image: url(headerblock.jpg);
background-repeat: no-repeat;
background-position: top left;
float: bottom;
}
#menubar {
border-width: 1px 0px 1px 0px;
border-color: #000064;
border-style: solid;
font-family: "Calibri", sans-serif;
font-size: 14px;
line-height: 16px;
float: bottom;
padding: 0px 0px 0px 600px;
margin: 0px 0px 0px 0px;
}
#menubar a {
text-decoration: none;
color: #000064;
float: bottom;
}
#menubar a.visited {
text-decoration: bold;
color: #000000;
float: bottom;
}
Anyone have any ideas?
Put the image in a separate div, all inside the header, like so:
<div id="header">
<div id="banner"></div><!--
--><div id="menubar"></div>
</div>
Then use display: inline-block; on #banner and #menubar.
Note the HTML comment after #banner and before #menubar. It's to remove the white space between those elements, you can remove it if you don't care about the blank space. Look at this for more info: Fighting the Space Between Inline Block Elements.
Check this fiddle.
By the way, you should use <ul> and <li> for your navigation.
And use borders on your separators, instead of |. That's for presentation, and presentation should be handled with css, not html.
Your #menubar has a padding 600px left that pushes the div out. Also Float can not be Bottom, It is either Left or Right.
To make it perfect place a position:relative to the header div and position:absolute; bottom:0px; left:0px; to the child div place it exactly
The float parameter accepts left or right. There is no such thing as float: bottom.
But if you add position: relative to the header div. You can position the menu with position: absolute; left: 0; bottom: 0;
Update
You might have to specify a width for the menu bar, te prevent the text from wrapping downwards.
I'm using this code to center/position a fixed width image as my background. I need to add color around the image that fills the margins in the browser window. I've tried background color, border color...
So, the width of the image is 1050px. If the browser window is 1500px I want to make the remaining area black (for instance). How can I do this?
#content {
text-align: left;
width: 1050px;
height: 825px;
margin: 0 auto;
padding: 0px;
background-image: url(file:///X|/CarFingers/tabback1_hor.png);
background-repeat: no-repeat;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333333;
text-align: center;
}
<div id="content">
<body>
</body>
</div>
First: put the div INSIDE your body. Then you can just edit your body background like this:
body{
background-color: black;
}
Your HTML is invalid, you should not have a div tag enclosing the body tag. If you put the div within the body you should be able to simply set the background color of the body.
If you are wanting to know how to color a border in CSS it would be
border: 10x solid #000;
or
border-width: 10px;
border-color: #000;
border-style: solid;
#content {
text-align: left;
width: 1050px;
height: 825px;
margin: 0 auto;
padding: 0px;
background-image: url('file:///X|/CarFingers/tabback1_hor.png');
background-repeat: no-repeat;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333333;
text-align: center;
background-color: #000; /* Add this to your code */
}
In your html you should do something like this:
<body>
<div id="content">
</div>
</body>
You should never enclose the BODY in DIV
My site has a wrapper with three background images. A static top and bottom image and a third image that repeats along the y axis. For some reason the top background image is getting cut off and I can't figure out way.
Here is a link to the live site: http://storrepictures.weebly.com/projects.html
I have offset the top and bottom images so you can see what they look like. You can see that the top one is cut off. I've tried messing around with some of the div padding settings but can't seem to get it to work.
One interesting note: The background images used to be JPEGs (I switched to PNG files because I needed transparency). When I was using JPEGs this was not a problem - the three images lined up perfectly.
Let me know if it would help to have the actual code posted. From what I've been reading on this forum, people seem to like looking at the live site and I didn't want to make the post too long.
Thanks a lot for all your help.
*Here's the CSS:
body {
background: #ffffff;
font-family: Tahoma, arial, sans-serif;
font-size:12px;
color:#666666;
margin: 0;
padding: 0;
}
#wrapper {
background: url(containerbg.png) center repeat-y;
}
#wrappertop{
background: url(containertop.png) no-repeat;
background-position: 0px -40px;
}
#wrappertbtm{
background: url(containerbtm.png) no-repeat;
background-position: 34px 480px;
padding-bottom: 65px;
}
.title{
width: 1022px;
min-height: 30px;
_height: 30px;
padding: 10px 0px 10px 0px;
font-size: 30px;
}
.title, .title a {
color: #fff;
}
#container {
width: 100%;
position: relative;
top: 125px;
bottom: 0px;
margin: 0px;
padding: -300px 0px 0px 0px;
}
#content{
width: 800px;
min-height: 500px;
_height: 500px;
margin: 0pt auto;
}
#content a{
color: #ff6633;
text-decoration: none;
}
.weebly_header{
background: url(%%HEADERIMG%%) no-repeat;
}
And here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<style>
#content
{
height:400px !important;
}
</style>
<![endif]-->
</head>
<body class="wsite-theme-light">
<div id="wrapper">
<div id="wrappertop">
<div id="wrappertbtm">
<div id="container">
<div id="header">
<div id="headerleft">{logo max-height="60"}</div>
<div id="navigation">{menu}</div>
</div>
<div id="content">{content}
<div id="footer">{footer}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
From what I can see, your body element has padding and margin values interfering:
body {
background: url(theme/backgroundtop.jpg?909894) left top repeat-x,
url(theme/backgroundbottom.jpg?909894) left bottom repeat-x,
url(theme/backgroundmid.jpg?909894) left repeat;
font-family: Tahoma, arial, sans-serif;
font-size: 12px;
color: #666666;
height: 100%;
margin: 100px 0 0 0;
padding: 100px 0 0 0;
}
You should get rid of these rules:
body {
/* ... */
margin: 0;
padding: 0;
}
and all should be fine.
Note: setting height: 100% to the body element is meaningless, you might wanna remove that, too.
Note #2: you have only 3 values for the multiple backgrounds of the body, which will be parsed as T/LR/B, while the order or those values indicates you should change their order, i.e. backgroundtop / backgroundmid / backgroundbottom instead of backgroundtop / backgroundbottom / backgroundmid