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!
Related
I have been on this single page for more than 3 days now. Can't seem to move the paragraph div on a new line that is supposed to be under the image.
The div should take full width and start on a new line. But position is changed.
Weirdly enough the footer text is way up in the main body.
I tried a lot of solutions from stackoverflow. But I am starting to freak out.
Did I break something.
Please help.
The text that should be going on a new line, but keeps on staying here.
The text is not even positioned correctly when executed. The bottom text which is marked, is supposed to be in the footer. (see the image linked above also refer my code)
Note: The error is displayed on desktop computer. Mobile view is okay.
h1 {
text-align: center;
}
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {
img {
width: 100%;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {
img {
width: 100%;
}
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
img {
width: 60%;
}
.mtxt {
width: 40%;
margin-top: 15%;
}
.lefty {
float: left;
}
.righty {
float: right;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Be You :)</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Being Different is NOT a Sin</h1>
<img src="images/undraw_both_sides_hbv3.svg">
<div>
<p>You might think what might people say.</p>
<p>And somehow you became extremely self-conscious.</p>
</div>
<img src="images/undraw_friends_online_klj6.svg" class="righty">
<div class="mtxt lefty">
<p>Was it your Friends, Family or the Society... Whatever it was, it changed you.</p>
</div>
<div>
<!--this should be on a seperate new line also it shoould be centered-->
<div>
<p>Do you have any regrets?</p>
<p>Yes?</p>
<p>And are you feeling helpless?</p>
</div>
<!--this is the end of the new line -->
<div>
<img src="images/undraw_feeling_of_joy_ioj2.svg" class="lefty">
<div class="mtxt righty">
<p>Well, whatever your concern is, remember you can overcome anything.</p>
</div>
</div>
<div>
<img src="images/undraw_things_to_say_ewwb.svg" class="righty">
<div class="mtxt lefty">
<p>And if you say you are not sure.</p>
<p>Just think about the worst possible case that could happen.</p>
<p>Don't just keep that in your mind as a secret.</p>
</div>
</div>
<div>
<img src="images/undraw_phone_call_grmk.svg" class="lefty">
<div class="mtxt righty">
<p>We could help. More than that, you know...</p>
<p>I could help you.</p>
</div>
</div>
<div>
<img src="images/undraw_navigator_a479.svg" class="righty">
<div class="mtxt lefty">
<p>So, communicate your fears. It's how we deal with those fears/concerns.</p>
<p>Again remember there is nothing in this world that doesn't have a solution.</p>
</div>
</div>
<div>
<img src="images/undraw_to_the_moon_v1mv.svg" class="lefty">
<div class="mtxt righty">
<p>To achieve it might take time. But yes. We can overcome it.</p>
<p>Just Believe!</p>
<p>So let me take you on a journey.</p>
<p>A journey that will lift you up, to be your higher self.</p>
</div>
</div>
</div>
<div>
<div>
<center>
<!--this is also on a new line and centered at the bottom -->
<p>And always remember to look on the bright side of everything.
<3</p>
<!--new line ends-->
</center>
<img src="images/undraw_true_love_cy8x.svg">
</div>
</div>
</body>
</html>
the <3 might be getting the browser not knowing how to render the page as < is the start of an html tag.
You can replace it by its html entity <:
<p style="text-align: center">And always remember to look on the bright side of everything.<3</p>
Besides that, the center tag was deprecated long time ago. Use css as above with the text-align: center.
Also, to get the footer be after the floated elements apply clear: both to the div that contains all the footer as the other content is floated and you want this element to be below the other elements that are floating.
<div style="clear: both">
<div>
<p style="text-align: center">And always remember to look on the bright side of everything.<3</p>
<img src="images/undraw_true_love_cy8x.svg">
</div>
</div>
I've used inline styles to make it easier but you can do as with the other css code to leave it more clear. And you could use the footer tag to wrap all the footer.
I've been trying all sorts of solutions offered here and other places, and none of them seem to work. I'd like to have an image take up the full width of the browser window, no matter the size (height scaled proportionally). But I need to place this image within a smaller container <div>, as it's part of dynamic content (the body of a blog post). I'm using bootstrap, but I don't think this problem is unique to the framework. Code:
<div class="container">
<div id="content" class="col-md-8">
{dynamic content in here}
<!-- still part of blog post -->
<div class="large"><img src...></div>
{more content}
</div>
</div>
CSS:
div.content { width: 70%; }
div.large img { width: 100%; }
If I put <img src="..." class="large"> inside the container div, it will, of course, be the size of that <div>. If I manually set the width of the image to, say, 1900px, it extends far out to the right of the main content, and I have to experiment to find an appropriate negative margin-left to center the image (margin: 0 auto doesn't center it). And of course that only works on a pixel-specific size. As soon as the window size changes, that code breaks.
If I set position: absolute;, the image appears on top of any following content, which isn't the behavior I want. I also tried this javascript using jQuery:
<script>
$("div.large img").css("width", $(window).width);
</script>
As well as a version without jQuery that iterates over the results of document.getElementsByClassName().
None of these approaches seem to give the results I want. Opening and closing the container would be a Bad Idea(tm), as this would break the isolation between the static layout and dynamic content, and so break the whole site if the static part of the layout changes and the blog posts aren't all manually updated.
It works for me with position absolute
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0;
}
div#small{
width: 200px;
background-color: green;
}
div#fullscreen{
position: absolute;
width: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="small">
i am a small div inside your browser window
<div id="fullscreen">
i got the same width as your browser window
</div>
</div>
<div id="small">
i am a small div inside your browser window
</div>
</body>
</html>
I think you'll need to do something like this...
<div class="container">
<div id="content">
<div class="col-md-8 etc..."></div>
{ content in here}
</div>
<!-- still part of blog post -->
<div class="large"><img src...></div>
<div class="col-md-8 etc..."></div>
{more content in here}
</div>
</div>
</div>
Set the .container to 100%, the content to 70% and the .large to 100% too
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!
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?
I'm having issues in making a piece of text on my website, which will be part of the navigation system, become responsive. Currently, the text is just sitting there and will not move when I readjust my browser.
Here is my HTML:
<div id="apDiv1">
<div class="wrapper1">
<h2>Home</h2>
</div></div>
Here is my CSS:
.wrapper1{
width:100%;
max-width:960px;
margin:0 auto;
}
You expect your text to move when you change the size of your browser window.
However, if the text is left adjusted (as you your case), it will always be on the left, regardless of the window size. So you should not expect it to "move".
Are you trying to center the div on-screen? I'm not sure what you mean by move the text.
If you want to center the div ".wrapper1", add position: relative to it.
If you want to center the text, make it text-align: center;
Did you include the css file correctly in your html?
The following works as expected. You can base your debugging on that:
<html>
<head>
<style type="text/css"> .wrapper1 {color:red; text-align:center; width:100%;} </style>
</head>
<body>
<div id="haha">
<div class="wrapper1">
<h2>Hello World.</h2>
</div>
</div>
</body>
</html>