I created my index.html page as well as my styles.css page. When I run it from Notepadd++, it looks good on Chrome, but not on the other browsers IE and Firefox. But when I upload it to my hosting site, it looks all spaced out on Chrome and still messing on the other two browsers. The link to my site is http://79.170.40.54/romeyb.com/ and I've included my code. How can I resolve the cross-browser compliant issue?
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<link rel="stylesheet" href="stylesheets/style.css" type="text/css">
<!--<link rel="stylesheet" href="stylesheets/style-ff.css" type="text/css">-->
</head>
<body>
<br>
<script src="script.js"></script>
<div id="header">
<div id="logo">
<h1><img style="width: 200px; height: 100px;" alt="romeyb" src="images/logo.png"></h1>
<div id="navbar">
<ul>
<li class="home">home</li>
<li class="about">about</li>
<li class="blog">blog</li>
<li class="resume">resume</li>
<li class="contact">contact</li>
</ul>
</div><!--navbar closing div-->
</div><!--logo closing div-->
</div><!--header closing div-->
<div class="gap"></div>
<div id="content">
<h1>Welcome to RomeyB.com <br></h1>
<p>Welcome to the website, romeyb.com, created by Romey B. This website is to showcase my skills in HTML and CSS, and content will be added as I go.</p>
<p>I will eventually add Javascript and jQuery to this site and will also design as I go.</p>
<p>I'm also learning Wordpress to become familiar with building websites using the Content Management System (CMS) technology, and to begin blogging in which I will discuss my personal battles with social anxiety, growing up without a father, and growing up as a non-stereotypical Black American.</p>
<p>I hope you enjoy the content that I will be posting here and I thank you for sharing this journey with me.</p>
<br>
</div><!--content closing div-->
<div id="right">
<p>This portion will consists of ads and possibly some updates to the website. Haven't decided yet.</p>
</div><!--right closing div-->
<div id="footer">© 2015 romeyb.com</div><!--footer closing div-->
</body>
</html>
For cross browser sites, that's always a problem. As you get into Web Development you'll learn to tackle those issues. And also IE will always give you a headache!
Now remember this is one solution for getting it nice and next to each other without crazy gaps and gives you control of the gap. There are multiple ways to solve HTML and CSS problems. This is just the way I usually do it.
For your content and right problem. You have one floating to the right and the other to the left. usually when you want them near each other or stacked against each other you float them both left. And then for a gap have a "filler" div in between them.
This is similar to your code I just scaled it down so I could see it myself:
#content {
background-color: #E6E6FA;
float: left;
height: 400px;
width:1000px;
marign: 0 0 20 20;
}
#filler{
float: left;
height: 400px;
width:50px;
marign: 0 0 20 20;
}
#right {
background-color: #E6E6FA;
float: left;
height: 400px;
width:100px;
marign:5 5 20 20;
}
html:
<div id="content">
//your content
</div><!--content closing div-->
<div id="filler">
</div>
<div id="right">
//your ads
</div><!--right closing div-->
It worked in my chrome and firefox . It looked nice.
Here is something that helped me with floating divs and understanding it:
http://css-tricks.com/all-about-floats/
And this is old but still relevant I think:
http://www.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/
And please if I missed something let me know or edit this post!
Related
New here, I am making a web page for a school project and am having trouble getting the layout the way I want. was wondering if someone could point me in the right direction.
I am creating a layout. The top of the page is the navigation, then I have one main large image with some content over lay, and under that I have an image with content overlayed on the left and the right, then at the bottom the footer. * or thats what I would like anyway.
I have tried putting the images each in a but I can only get them to either be in a column or stacked. As I would like the first image under the header with navigation to be a wider picture , then two smaller ones each half the width of the main wider image if that makes sense..
I have searched online and the only things that looks similar to what I'm trying to accomplish are pay for templates.
<section>
<div class="container">
<img src="thebean.jpg" />
</div>
</section>
<section>
<div class="container">
<img src="rooftops.jpg" />
<div id="topleft"></div>
</div>
</section>
<section>
<div class="container">
<img src="thebean.jpg" />
<div id="topright"></div>
</div>
</section>
I'm not really sure if i got your question right without a figure that help me figure out the layout you are looking for.
Give a look at this picture and tell me if i got it right or not!
Layout testing
Here is the simple code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title>Testing</title>
</head>
<body>
<div id="largerPanel">
<img src="https://i.pinimg.com/originals/aa/49/54/aa4954451f16847cb657e68e5f46538a.jpg">
</div>
<div id="floatPanel" class="halfPanel">
<img src="https://i.ytimg.com/vi/fB8MYCGFqC0/maxresdefault.jpg">
</div>
<div class="halfPanel">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8nIMQ30DM-OKazFBcLM4m9kq3_fzph-eBoiax6M88O5nncGyB">
</div>
</body>
</html>
Test.css
body{
width: 100%;
height : 100%;
}
.halfPanel{
width:50%;
height: 20%;
}
.halfPanel img{
width:100%;
height:100%;
}
#floatPanel{
float:right;
}
#largerPanel{
width: 100%;
height: 20%;
}
#largerPanel img{
width: 100%;
height: 100%;
}
If i got it wrong please post a simple paint image with some boxes that show the layout you want, i will be happy to help you through this!
Wordpress has this html structure in the backend...
<!DOCTYPE html>
<html ...>
<head>
...
</head>
<body class="wp-admin ...">
...
<div id="wpwrap">
<div id="adminmenumain" role="navigation" aria-label="Main menu">
...
<div id="adminmenuback"></div>
<div id="adminmenuwrap">
...
</div>
</div>
<div id="wpcontent">
...
<div id="wpbody" role="main">
<div id="wpbody-content">
<div id="screen-meta" class="metabox-prefs">
...
</div>
<div class="myplugin">
...
</div>
</div>
</div>
</div>
<div id="wpfooter" role="contentinfo">
<p id="footer-left" class="alignleft">
...
<div class="clear"></div>
</div>
</div>
</body>
</html>
By the default #wpwrap has 100% of height and my problem is that I need #wpcontent, #wpbody and #wpbody-content with 100% height, because my plugin (.myplugin) has inside a sidebar and an area for content that I need both with 100% of height too...
I've tried several things... with table-cell #adminmenumain breaks and I don't want to touch things outside of #wpcontent... with position absolute... #wpfooter breaks if I have scroll in myplugin
Probably with a few lines of jquery I could resolve the problem, but I really want to do it only with CSS
Maybe someone with a wordpress installed, inspecting a little bit the code could give me some suggestion ... thank you very much!
Use min-height: 100vh;,
all modern browsers support them, except Opera Mini browser.
https://caniuse.com/#search=vh
However you may always provide a fallback for browsers that do not support viewport-relative lengths using the old “height: 100%” option.
But to get it working. Add this little bit:
html, body{
height:100%;
}
So you can see what I currently have here: https://steelcowboy.me
Basically what I want is a white content area, grey on the sides and my blue navbar. I don't want any grey atop or below the white part (i.e. I want grey on the sides only, white in the middle). However, I'm not sure what I need to do -- I tried different display options for the container element, but the one that worked (flex) then messes up all the content inside. I feel like this is a really simply fix, but can't quite seem to get it. Anyone have an answer? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Steelsite</title>
<meta charset="utf-8">
<link href="/css/materialize.min.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/materialize.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#3f51b5">
<style>html,body { height:100%; margin:0; } a {font-weight: bold;} body {background-color:#e0e0e0;} img {max-width:100%; height:auto;} </style>
</head>
<body>
[navbar in here]
<main>
<div class="container white">
<h3 class="center-align">Welcome to the site of James Heald</h3>
<div class="row">
<div class="col s12 m6">
<div class="flow-text" style="font-size: 125%;">
<p>I'm a teen who loves bike riding, photography, travel, outdoor activities and computers! In September I will be attending Cal Poly SLO, majoring in Aerospace Engineering.</p>
<p>This site, currently under construction using the Materialize framework, is proudly hosted on the Raspberry Pi 2, pictured below.</p> </div>
</div>
<div class="col s12 m6">
<div class="center-align">
<img style="padding-top:1%; padding-bottom:1%;" class="responsive-img materialboxed" src="pictures/pi2.jpg" alt="The new home of steelcowboy.me!"></div>
</div>
</div>
<div class="divider"></div>
<h5>From running "fortune":</h5><p class="flow-text" style="font-size: 115%;">Real Users find the one combination of bizarre input values that shuts
down the system for days.
</p>
<div class="container center-align">
<img src="http://imgs.xkcd.com/comics/tags.png" class="responsive-img">
</div>
</div>
</main>
<script src="scripts/google.js"></script>
</body>
</html>
The problem is this selector:
h3 {
margin: 1.46rem 0 1.168rem 0;
}
It is setting a top margin which is pushing down the rest of the container.
If you set margin-top: 0 to that specific element, it should remedy the issue.
The space is contributed by your heading, remove the top margin on it and you're good. The solutions below illustrates how to fix them using inline styles but you should really consider using css classes :)
Solution 1: remove top margin on the h3, either inline or via a css class.
<h3 class="center-align" style="margin-top: 0px;">Welcome to the site of James Heald</h3>
Solution 2: Add a top padding to the container, either inline or via a css class. This might be a better approach as it does not interfere with your h3 classes, since you might want the top margin elsewhere on your site.
<div class="container white" style="padding-top: 10px;">
To make the container span the whole height, make sure all parent elements has height: 100%. e.g.:
<main style="height: 100%">
<div class="container white" style="padding-top: 10px; height: 100%">
...
Solved by adding overflow:auto to container
In my app I'm trying displaying a pdf in an iFrame (got that covered).
My problem is that the iFrame doesn't take up the full space of the page between my header and footer divs. I'm using Jquery Mobile 1.1.0 for my themes.
I don't think it's something as minor as margins & padding. It's on a much larger scale of open space.
Here is my html:
<!-- Start of pdfReader page: #pdfReader -->
<div data-role="page" id="pdfReader" data-theme="b">
<div data-role="header">
<h3 id="keyHeader2">Key Description</h3>
</div> <!-- /header -->
<div data-role="content">
<iframe id="pdfFrame" width="100%" height="auto" src=""></iframe>
</div>
<div data-role="footer" class="footer">
<p class="margin">
Back
</p>
</div>
</div> <!-- /#pdfReader -->
Relevant CSS:
.footer{
position:fixed;
height:50px;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
}
JQM links:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
As I've said. My problem is that the div containing the iFrame won't take up the full height of the page (leaving an unappealing empty space). Sorry if this is a basic fix but my CSS is rather rusty, especially when it has to conflict with the JQM CSS. Help is greatly appreciated>
Thank you in advance.
There is a very little CSS issue here. The wrapping div around the iframe has a padding that needs to be canceled.
div.ui-content {
padding: 0;
}
and then to make your iframe full-height (excluding the navbar and the footer) simply add this to your iframe
iframe#pdfFrame {
min-height: calc(100% - 100px)
}
Here is a demo JSFIDDLE: http://jsfiddle.net/ymKL9/2/
I have been messing around with trying to get a sidebar to stay fixed to a center div, and I have it mostly working in Firefox and IE, but for some reason it is not working in Chrome. My issue is that when I resize the window the left sidebar no longer extends to the bottom of the page in chrome. All the code is included below, so you can see what I am seeing in your own browsers.
My question is: why is Chrome acting this way and is there a way for me to fix this? My Chrome version is 28.0.1500.95.
Thanks.
HTML:
<html>
<header>
<link rel="stylesheet" href="test.css"/>
</header>
<body style="margin:0">
<div>
<div class="width main table">
<div class="relative-float-left" style=" width:0px; height: inherit; ">
<div class="relative-float-left sidebar table">
--Some lorem ipsum here--
<br style="clear: both; " />
</div>
</div>
<div class="relative-float-left content">
--Some lorem ipsum here--
</div>
<br style="clear: both; " />
</div>
</div>
</body>
CSS:
.relative-float-left {position:relative; float:left;}
.width {width:33%;}
.table {display:table;height:100%;}
.sidebar {width:30px;right:45px;background-color:yellow;}
.content {margin-left: 10px; width: 95%; background-color: orange;}
.main {background-color:blue; width:50%; margin:auto;}
Edit: I want the center div to dynamically size with the sidebar to be fixed. Content inside the sidebar can't be clipped and I want any content that can't fit onto the page to be pushed down and make the page bigger (thus I do not want to use inner scrolling for the content (orange) div. Sorry for the messy code, it was just easier to test out a proof of concept.
I have also rewritten the code to give it a stylesheet for easier readability. I would really like this answered as I have no idea why this is happening. It may have something to do with this answer.
You have <header> in your source instead of <head>. This causes the document to be invalid, not because you can't have a header in that position - the browser automatically inserts a <body> start tag there and then puts the header inside it - but because there is a <link> in it which should be in the head, not in the body. And then there is a <body> start tag while the body is already open, which is disallowed too.
Edit: I see you edited your comment now, so does that mean you no longer believe this is the cause of the problems?