I am trying to make a page with css with the little bit of skill I have been learning. I have the title at the top of the page and it looks good but when you resize the window the title over laps the image border I have. I just found out, that it doesn't display well in firefox. How could I fix this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTM HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>This is my website</title>
</head>
<style type="text/css">
body{
background-image:url('bg-body.jpg');
background-repeat: repeat;
width:967px;
}
h1 {
font-size: 40px;
position:absolute;
top: 47px;
left: 27%;
color:red;
}
.venus {
position:absolute;
top: 160px;
left: 44%;
}
#menu {
position:absolute;
top: 400px;
left: 130px;
color:blue;
height:500px;
width:290px;
background-color:#DCE1CA;
border-top: 12px outset silver;
border-left: 12px outset silver;
border-right: 5px outset silver;
border-bottom: 5px outset silver;
}
li {
line-height:200%;
font-size: large;
list-style-type:none;
list-style-image:none;
}
#textarea {
position:absolute;
top: 400px;
left: 425px;
color:blue;
text-align:left;
height:500px;
width:1149px;
background-color:#DCE1CA;
border-top: 12px outset silver;
border-left: 12px outset silver;
border-right: 5px outset silver;
border-bottom: 5px outset silver;
}
</style>
<body>
<img src="sidebar.png" width="100%" height="2000px" class="sidebar" />
<h1>Welcome to my HTML/CSS/JavaScript Page</h1>
<img src="venus.jpg" width="200px" height="200px" class="venus" />
<div id="menu">
<ul>
<li>Mix of CSS & JS</li>
<li>Your Full Name</li>
<li>How Many Apples</li>
<li>Many Questions</li>
<li>Background Color</li>
<li>My Family Event</li>
<li>Images, Images</li>
</ul>
</div>
<div id="textarea">
Here is my story: I have been learning JavaScript and on the side I have been learning some CSS/HTML.
</div>
</body>
</html>
I would advice you to set your 'sidebar.png' as a background image, rather then an actual <img> in the html. <img>in the html should only be used if it's actual content, like your venus.jpg. The background is considered styling and not content.
That beeing said i would try to do something like this:
Fiddle
I've put most of the explanation in the css code trying to make things clear. Perhaps it's a bit avanced, but since you say you are learning css... ;-)
The advantage of working with this kind of 'liquid' design is that the corner images will not be distorted, as they are currently. Also will your problem of the title running over the image never occurs again, wich was the goal ulmtimatly.
Try setting the width to 100% instead of a fixed width, then set the background-position to fixed. See if that helps.
If your worried about what your page will look like when you re-size it you should be setting your heights, widths, and positions by percentage, not pixels. Setting those attributes by percentage scales them when the page re-sizes.
Ex: background-size: 100%;
Related
I am trying to make the in my website always fit in the browser size. Right now, if I go to my website with a smaller screen, everything is messing together. Here is one and css example in my codes
html
<div class="contactus">
<h2>Contact Us</h2>
<h3>PhoneNumber</h3>
<h3>812-123-4567</h3>
<h3>Email</h3>
<h3>qwerty#asd.com</h3>
</div>
CSS
div.contactus {
position:absolute;
right:20px;
top:150px;
border: 2px solid;
border-color:#333;
width:100px;
font:20px;
In order to make it responsive you need to keep the code of the CSS in relative units because whey you make it with fixed units the code will not adapt to the screen so you will have to make your code something like this:
div.contactus {
position:absolute;
right:5%;
top:25%;
border: 2px solid;
border-color:#333;
width:100%;
font:20px;}
If the percentages are not ok just keep playing with them until you like it.
Responsive media queries would be extremely helpful, but the biggest problem I'm seeing is that your container (.contactus) is not wide enough to accommodate the text you're trying to place. Try changing the contactus width to 400px. However, on a smaller screen, you should have a media query that updates font size and container size based on the viewport width.
First of all welcome to our community, first read this topic to help you answers better questions and get more precise response: https://stackoverflow.com/help/how-to-ask
About your question, you have to explain better what you mean with "messing together".
I made a simple fiddle to help you with your responsive issues : https://jsfiddle.net/nLxa1745/
HTML
<div class="main">
<img class="user-pic" src="http://placehold.it/250x150">
<div class="contact-box">
<h4 class="user-name">Contact Us</h4>
<ul class="info-contact">
<li>
phonenumber
</li>
<li>
812-123-4567
</li>
<li>
email
</li>
<li>
qwerty#blabla.com
</li>
</ul>
</div>
</div>
CSS
body {
font-family: sans-serif;
color: #3f3f3f;
}
li{
margin: 5px 0px 0px 20px;
}
.main {
border: 2px solid gray;
width: 250px;
margin: auto;
box-shadow: 2px 2px 5px 1px gray;
}
.user-pic {
border-bottom: 2px solid gray;
}
.user-name {
margin-left: 15px;
margin-bottom: 0;
color: #B77425;
}
.info-contact {
list-style-type: none;
padding: 0;
}
#media only screen
and (min-width : 600px) {
.main {
width: 100%;
height: 150px;
}
.user-pic {
border-right: 2px solid gray;
float: left;
}
.contact-box {
float: left;
}
}
P.S. I'd recommend a reading about headings also https://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824
I want to display a chat bubble behind some text. Essentially the questions boils down to properly scaling background images.
I am mostly an Android developer and this is easy to do with a .9 image. I want to be able to do the same for an HTML page.
What i want is create a image that i can specify which sections strech and which dont. This would allow me to best scale the image as a background.
Currently my attempt looks like this.
Here is my code for this.
<div style="background-image: url(../home_images/chat_right.png);background-size: 100% 100%; background-repeat:no-repeat;"><em>“What RiteCare has done for my child is an amazing gift. Watching him grow in front of my eyes has been so incredible.” </em> ~Margaret</div>
You can just use plain old CSS. There's no reason to have to stretch and skew an image.
<div class="chatBubble">
<div class="message">
And then, this one time, at band camp....
</div>
</div>
<div class="triangle-down">
</div>
Applicable CSS:
.message {
color: #000;
font-size:14pt;
font-weight:bold;
text-align:left;
}
.chatBubble {
border: 5px solid purple;
border-radius:10px;
background-color:white;
padding:15px;
}
.triangle-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 20px solid purple;
position:relative;
float:right;
right:10%;
}
Example here:
https://jsfiddle.net/fh5gg77r/
I'm currently following a UDemy course where the instructor is teaching us Full Stack Development from scratch. Problem is, he made a lot of mistakes that I needed to improvise on like adding <span> next to sign in, instead of his idea of a <p> and my screenshots of the BBC Logo and Sign In button needed it's height modified in order for them to fit properly in that small nav bar.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Wadson's BBC</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
font-family: Helvetica, Arial, sans-serif;
}
#topbar {
background-color: #7A0000;
width: 100%;
height: 45px;
color: #fff;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
}
#logodiv {
padding-top: 15px;
float: left;
border-right: 1px solid #990000;
padding-right: 10px;
}
#signindiv {
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
position: relative;
width: 200px;
height: 45px;
float: left;
}
#signindiv img {
position: relative;
top: 15px;
left: 15px;
}
#signintext {
position: relative;
top: 10px;
left: 25px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
margin: 0px;
padding: 0px;
}
#topmenudiv li {
list-style: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
padding: 15px 20px 0px 20px
}
</style>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/logo.png" height="25px" />
</div>
<div id="signindiv">
<img class="signinhead" src="images/signin.png" height="20px"/><span id="signintext">Sign In</span>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- /#container -->
</body>
</html>
Any suggestions for an aspiring programmer? How can I think much differently so that I can spot errors while his is talking instead of copying his stuff verbatim? I understand HTML very well, I'm getting stuck on position, margin and padding.
There is a few things wrong with the code here, I'm not going to go too deep into structure or how using a CSS framework is a great option for beginners(I highly recommend bootstrap and following a tutorial to understand how they use each component as well following a up to date CSS tutorial).
A few quick pointers to fix the problems your border was going past the #topbar because the list items were being stacked vertically instead of horizontally. This was fixed by adding float: right; to the #topmenudiv li. You need to offset the padding you have on your list item elements by setting a height - the padding in this case 30px.
Check the updated version below and always try to include a codepen or jsfiddle with your answer whenever possible.
http://codepen.io/anon/pen/VLEENL
As I understand your question:
Any suggestions for an aspiring programmer? How can I think much differently so that I can spot errors while his is talking instead of copying his stuff verbatim? I understand HTML very well, I'm getting stuck on position, margin and padding.
Use the CSS property outline When you apply it to a class, tag, or id of an element(s), it looks like the CSS property border. The difference between border and outline is that outline will not affect the area surrounding the element(s) which mikes it perfect for seeing your divs and their actual position.
Place this css under your body rule (ie body {...}) in the <style> block:
CSS
/* body * { outline: 1px solid blue; } */ /* Uncomment to see all elements */
.green { outline: 2px dashed green } /* Highlight in green */
.black { outline: 3px dotted #000; } /* Highlight in black */
.yellow { outline: 4px double #fc0; } /* Highlight in yellow */
In order to handle padding and margins easier put the following at the top of your CSS:
CSS
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
This will unify all of the elements under one box-sizing rule. An element's dimensions, padding, and border are included to the element's content. Normally by default (content-box), only width and height are considered. See this for more on box-sizing
I'm having a problem on img:hover
Here's my jsbin: http://jsbin.com/bereputu/1/edit
My problem is when I put my mouse over the "home" or "contact", the image that I want to replace the original appears a little under than I expected.
Here's my code:
<html>
<head>
<title>UltraLotus</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="container">
<div class="header">
<img src="images/header.png">
</div>
<center>
<div class="nav">
<img src="images/home.jpg">
<img src="images/contact2.jpg">
</div>
</center>
<div class="page">
<p></p>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
CSS
body {
background-image: url("images/bg.jpg");
background-repeat: repeat-y;
background-size: 100% 100%;
margin:0;
padding:0;
height:100%;
}
.container {
min-height: 100%;
}
.header {
background-color:#1a1a1a;
width:100%;
height:100px;
}
.header img {
position: relative;
margin-top:-30px;
}
.nav {
position:relative;
width:100%;
height:40px;
top: -15px;
background-image: url("images/nav.jpg");
}
.nav img {
position:relative;
margin-top:13px;
}
.nav a:first-child:hover {
position:relative;
background-image: url('images/home.jpg');
}
.nav a:nth-child(2):hover {
position:relative;
background-image: url('images/contact.jpg');
}
.page {
padding-top:5px;
top:150px;
padding-bottom:70px;
}
.footer {
position:absolute;
bottom: 0;
width:100%;
height:70px;
background-image: url("images/footer.jpg");
}
I'm not quite sure what you're looking to accomplish with the :hover styling, but it's replacing a totally different image than the one you're using in your original nav element.
For easier debugging, if you open up the chrome developer tools, you can force a hover state so you can look at all the applied css rules:
You'll notice that you're giving your a element a background-image on hover, but it's contents still contains an img element. Thus the double styling.
Note 1: Since they're both the same, you really don't even need the hover styling at all.
Note 2: This does not seem worth pulling in an image to me. You should be able to accomplish this exact style with native html an css. They render far quicker, they're much easier to download, they're much better for screen readers, they have much cleaner and clearer content, and they extend and adapt much easier. I'd skip the images altogether and go html/css for this.
Here's a little CSS to get your started:
.nav a {
color: grey;
font-size: 1.2em;
text-decoration: none;
border: 1px solid grey;
padding: 5px;
padding-bottom: 0px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
/* I even added in a little hover effect */
.nav a:hover {
background-color: #2C2C2C;
}
Here's your full site design without any images (except your logo):
http://jsbin.com/bereputu/2/
You can get much more sophisticated but I would avoid imaging out your design as much as possible. If you're doing web dev, learn CSS
I'm trying to embed an iframe into the page called 'test' of my test blog - damianp1.blogspot.co.uk
I've removed a lot of the unwanted items from the page to make as much room as possible, but can't find the id's to remove the blue box which appears behind the iframe, and also can't get the iframe to fit into the white box with the grey border at the bottom.
Here is the code I've used up to now:
<style type="text/css">
.blog-pager, .footer, .post-footer, .feed-links, #Attribution1, .comments, .post-title, .sidebar
{ display:none !important;}
.main-inner .columns {position: relative; left: -205px; top 50px; width: 1305;padding-left:0 !
important;padding-right:0 !important;}
</style>
</b:if>
<style>]
</style>
<div class="post-outer" style="width:1100px;">
<div id="outerdiv" style="width: 1200px; overflow: hidden">
<iframe width="1300" style="position: relative; left: -190px; top: -34px" height="600"
src="http://wildlife-ramblings.blogspot.co.uk/" scrolling="yes" frameborder="0"></iframe>
</div>
</div>
Can someone please tell me how to get everything fitting together properly so that the iframe fills the page neatly?
Many thanks, Damian.
The blue box behind the iframe is located here:
.post-outer {
background-color: #eef8f8;
border: solid 1px #e8e8e8;
To remove the blue box, you can hide ".post-outer" or:
background-color: transparent;
border: none;
Add "!important" where needed.
The white box behind the iframe is located here:
.main-outer {
To remove the border, remove:
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
EDIT: (based on different format idea)
If you're wanting to expand the blue and white portions, you have to expand the width of the blog to the same width or greater than that of the iframe.
Click on "Template" > orange button that says "Customize".
On the page that loads click "Adjust Widths".
If you don't want to increase the whole blog width, you can use conditional tags to only effect that page. To only affect that specific page, find "/b:skin" and paste the follow code BELOW it:
<b:if cond='data:blog.url == "http://damianp1.blogspot.co.uk/p/test_6572.html"'>
<style>
#Blog1 {
width: 1200px !important;
}
</style>
</b:if>
To expand the height of the white part, you will have to add a "height: 800px" or however high the iframe is (or 20px-40px more to extend it past the iframe).
Make sure you remove the 110% width on the .post-outer and whatever else edits you have done previously before the first answer.
EDIT: Asked about better way of doing this:
Inside the post page where you want the ifrmae, use this code:
<style>
html, body {
overflow-y: hidden;
}
#iframe-wrapper {
height: 100%;
width:1100px;
position: fixed;
scroll: no;
margin: 0 auto;
left:0px;
right: 0px;
z-index:9999;
margin-top: -52px;
top: 0px
bottom: 0px;
}
#title-wrapper {
height:70%;
margin:0 auto;
width: fixed;
background-color: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
border-bottom:20px white solid;
border-right:20px white solid;
border-left:20px white solid;
text-align:center;
border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
}
.blog-pager, .footer, .post-footer, .feed-links, #Attribution1, .comments, .post-title, .sidebar
{ display:none !important;}
</style>
<div id="iframe-wrapper"><div id="iframe-inner">
</div><div id="title-wrapper"><h3><span style="color: black; font-size: 30px">Wildlife Ramblings</span></h3>
<div style="border: solid #e8e8e8 1px; padding: 20px; background: #eef8f8; border-radius:20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; height: 83%"><embed src="http://wildlife-ramblings.blogspot.co.uk/" width="100%" height="100%"></embed></div>
</div></div>
This will put the iframe over the blog itself (but with the same blog style containing the blue and white backgrounds with round corners), only on the page you paste the code in. Perhaps this will be easier for you.
You may need to adjust the positioning of the iframe by changing part of the code shown above. Find this part of the code:
#iframe-wrapper {
margin-top: -52px;
}
To move the whole iframe up (closer to the top of the page), increase the -52px to -62px (or whatever). To move the whole iframe down (closer to the bottom of the page) decrease the -52px to -42px or whatever.
That should be the only part of the code that needs adjusting.
This a snapshot of what the above code should look like when you copy and paste it within the your blogger page:
Using your help from the above posts, I've just tried this within the html of the page itself and it seems to work...
<style type="text/css">
.blog-pager, .footer, .footer-outer, .post-footer, #sidebar-wrapper, #midsidebar-
wrapper, .gapad2, .post-header-line-1, .navbar, .feed-links, #Attribution1, .comments,
.post-title, .sidebar { display:none !important;}
#Blog1 { width: 1100px; !important; } .main-outer { width: 1170px !important; }
</style>
</b:if>
<style>]
</style>
<iframe src="http://wildlife-ramblings.blogspot.co.uk/" style= border:3px #eef8f8
solid;" name="Wildlife Ramblings" scrolling="yes" frameborder="1" marginheight="5px"
marginwidth="5px" height="800px" width="100%"></iframe>
Here is the result... http://damianp1.blogspot.co.uk/p/test_5.html
I'm not sure how good a solution that is, but it's the best I've found so far. I wish I understood this instead of just faffing around with different code! Are there any better ways of doing this?
Thanks again, Damian.