Below is my code for a simple page. I'm trying to have (A) a banner on the top which consists of a logo, a header to its right and then a "sign in/register" link, (B) below all this then I will have the main text of the site.
I would like a large gap between the main text and banner at the top. So I divide the page up with divs. But when I apply a "margin-top" to #main to keep the banner at a certain distance, EVERYTHING, that is, the main text and everything in my banner all move down the page. Same thing happens if I apply a "margin-bottom" to the header element.
I'm kind of new to CSS and HTML but I though I had the hang of it until this. I've scratched my head for ages about this but I can't seem to understand positioning here at all!
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta charset="utf-8"/>
<title>My Page</title>
</head>
<body>
<header id="masthead" role="banner">
<img src="jep.jpeg" alt="My Page">
<h2>Welcome!</h2>
<p>Sign in Register</p>
</header>
<div id="main" role="main">
<!--main text here -->
</div>
</body>
</html>
Here is the CSS code:
#masthead {
position: relative;
}
#masthead img {
position: absolute;
}
#masthead h2 {
position: absolute;
left: 150px;
}
#masthead p {
position: absolute;
right: 10px;
}
#main {
margin-top: 40px;
}
The problem is that all of the absolute positioning removes the elements from the document flow. That means your header has a height of 0px, but everything is still positioned relative to it.
Just give your masthead a height.
JSFiddle
You just need to wrap your elements in their own containers so you can position them a little bit better. You will probably want to define some heights in this also. Including a height on #masthead
Assuming you need a responsive design:
<header id="masthead" role="banner">
<section class="logo">
<img src="jep.jpeg" alt="My Page">
</section>
<section class="title">
<h2>Journal of Electronic Publishing</h2>
</section>
<section class="sign-in">
Sign in Register
</section>
</header>
.logo {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}
.title {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}
.sign-in {
width: 30%;
float: left;
margin-right: 0;
box-sizing: border-box;
}
Note that the total 100% is assuming you include the margins in that calculation. So, 30+30 = 60 + 5 + 5 = 70 + 30 = 100%
Edit: Now that I can see your CSS, your specific issue is the use of position:absolute;. Removing these should get you along the correct path.
I suggest using a table layout. Using 1-row tables for styling is a bit frowned upon by some, but this seems to work:
HTML:
<body>
<header id="masthead" role="banner">
<table>
<tr>
<td><img src="jep.jpeg" alt="My Page"></td>
<td><h2>Welcome!</h2></td>
<td><p>Sign in Register</p></td>
</tr>
</table>
</header>
<div id="main" role="main">
<p>Testing</p>
</div>
</body>
</html>
and CSS:
#masthead {
width: 100%;
}
#masthead table {
width: 100%;
}
#main {
margin-top: 40px;
}
EDIT: Using divs.
This is a bit messy, but it works. It's been a while since I've used div for positioning like this.
HTML:
<body>
<header>
<div class="col">
<div class="content">
<img src="jep.jpeg" alt="My Page">
</div>
<div class="content">
<h2>Welcome!</h2>
</div>
<div class="content">
<p>Sign in Register</p>
</div>
</div>
</header>
<div id="main" role="main">
Testing
</div>
</body>
</html>
CSS:
header {
width: 100%;
}
.col {
height: 100px;
position: relative;
}
.content {
float: left;
width: 33.3%;
}
#main {
margin-top: 50px;
}
Related
I have been searching for a solution to this problem for almost two weeks now and I am still completely lost. I'm making a simple landing page and I don't want any scrolling. I need a header followed by a bootstrap row containing a paragraph and an image. Here is my ms paint example:
Simple enough right? Well I can not for the life of me figure out how to get that image to shrink to fit into that row. Here is what is happening to me now. Note: When you run the snippet on stackoverflow the window is to small. It is easier to see whats going on with the JSFiddle
body, html {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
}
.content {
}
img {
height: 100%;
}
h1 {
background-color: white;
}
.banner {
height: 90%;
background-color: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="banner">
<h1>
Header
</h1>
<div class="row content">
<p> Hello World </p>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png">
</div>
</div>
Result
The part that throws me off is that the .row extends beyond it's parent container .banner. How do we force this to stay inside that red area?
I've messed with object-fit, flex-grow, flex-shrink, a flex-basis and none of these seem to create the desired behavior. I'm going insane trying to figure this problem out. Maybe flexbox is the wrong tool to use here? But I'm trying to take advantage of the bootstrap grid system's media queries. Thanks in advance for any help!
Note: The reason I have everything nested in the <div class=".banner"> is because I want the header to have a shadow onto the red background.
Edit
The root of my question is how do I get an image to fit inside of a row that only covers the red area?
You can update your code like below:
img {
/* this will make the image stretch and no overflow*/
height:0;
min-height:100%;
/**/
}
h1 {
background-color: white;
}
.banner {
height: 90vh;
background-color: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >
<div class="banner d-flex flex-column"> <!-- flex container here -->
<h1>
Header
</h1>
<div class="d-flex content flex-grow-1 p-2"> <!-- flex-grow here to fill remaining space -->
<p> Hello World </p>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="ml-auto">
</div>
</div>
Try this:
<div class="banner">
<h1>Header</h1>
<div class="row content">
<div class="col-6">
<p> Hello World</p>
</div>
<div class="col-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png">
</div>
</div>
</div>
Working example: Codepen.
PS.: In my example I tried to follow your ms paint example.
Use display:block to the img & this also helps in responsiveness you can check the fiddle if you want to explore.
OR
You can also look into vh for height and vw for width that will take care of all screen resolutions.
fiddle to playaround.
body,
html {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
}
.content {
height: 80%;
background-color: red;
display: flex;
justify-content: space-around;
}
img {
max-width: 100%;
max-height: 100%;
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="header">
<h1>Header</h1>
</div>
<div class="row content">
<p> Hello World </p>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png">
</div>
EDIT: I was able to fix this problem by switching to a float based layout. Not sure if there is a solution to the problem using an inline-block based grid. (I suppose I could use the position:relative or absolute, but that seems to be a bad idea.) Here's my Codepen: https://codepen.io/mattgwater/pen/yXBqoe (It works if full-screen) Ehsan's answer demonstrates how to basically do this layout too and probably is a better example of good code.
I am trying to build a website based on the template in the picture here. https://assets.themuse.com/uploaded/attachments/14846.png?v=None
However, if I have an image in the left column it causes all the text in the right column to go below the image. How can I fix this problem?
Here is my Codepen: https://codepen.io/mattgwater/pen/yXBqoe?editors=1100#0
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="/Fonts/myFontsWebfontsKit/MyFontsWebfontsKit.css">
<link rel="stylesheet" href="/main.css">
</head>
<body>
<nav>
<div class="col left">
<div>
<h1 class="title">MATT GOLDWATER</h1>
</div>
</div><!--
--><div class="col right">
</div>
</nav>
<div class="nav-content-separator"></div>
<section>
<div class="col left">
<img class="profilepic" src="https://res.cloudinary.com/dyr8j9g6m/image/upload/v1496375439/my-headshot_bxpjqk.png" alt="Matt Goldwater">
<!--<p>yo</p>-->
</div><!--
--><div class="col right">
<p class="about">I want this sentence to be aligned with the top of the image.</p>
</div>
</section>
</body>
</html>
My CSS (I also have normalize CSS)
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.title {
color: #6fc3c3;
/*font-family: FuturaDCD-Lig;*/
font-weight: bold;
font-size: 32px;
text-align: center;
letter-spacing: .05em;
}
.col {
width: 50%;
display: inline-block;
/*white-space: nowrap;*/
}
.left {
padding-left: 10%;
}
.profilepic {
padding-top: 7%;
height: 450px;
margin: 0 auto;
display: block;
}
.nav-content-separator {
border: 1px solid #e8e8e8;
}
.about {
font-family: Avenir;
}
I changed your code,use wrapper and float and other Properties.
#wrapper {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.title {
color: #6fc3c3;
float: left;
}
.right {
float: right;
}
.left {
float: left;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
margin-right: 1%;
}
li a {
color: #ccc;
text-decoration: none;
}
.col {
width: 50%;
box-sizing: border-box;
}
nav {
border-bottom: #ccc solid 1px;
overflow: auto;
}
.profilepic {
max-width: 410px;
width: 100%;
}
<div id="wrapper">
<nav>
<div class="col title"><h2>KRISTA GRAY</h2></div>
<div class="col right">
<ul>
<li>About</li>
<li>Services</li>
<li>Journal</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="container">
<div class="col left">
<img class="profilepic" src="https://cdn.shopify.com/s/files/1/1424/5850/products/Circular_Stickers_CG_1024x1024.jpg?v=1486690726" alt="Me">
</div>
<div class="right col">
<h4>Lorem Ipsum: common examples</h4>
<p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found in the original.
</p>
</div>
</div>
</div>
Few modifications in your code:
Give image max-width:100% so that image stay within the parent. Remove display:block from image style.
Add white-space:nowrap in the section style so that the whitespace is ignored. We need to ignore whitespace because .left and .right are set to width:50% and hence even a pixel of whitespace will break the layout.
Demo: http://jsfiddle.net/GCu2D/1952/
.profilepic {
padding-top: 7%;
max-width: 100%;
margin: 0 auto;
display: inline;
}
section {
white-space: nowrap;
}
See your col class have width of 50% and then you are also adding padding-left of 10%. So it is going more than 100%. Play with the col width, make it 40% and it should work.
I am trying to design a simple ecommerce website, in that my footer tag text is displayed right beside the section tag. I have no idea where I am doing wrong.
HTML
<aside id="categories">
<header id="headings" class="background_div">Categories</header>
<nav>
<ul>
<li>Staples</li>
<li>Oils</li>
<li>Vegetables</li>
<li>Fruits</li>
</ul>
</nav>
</aside>
<div id="bestsellers">
<header id="headings" class="background_div">Bestsellers</header>
<article class="productarticle">
<figure>
<img src="faded-short-sleeve-tshirts.jpg" alt="cabbage"/>
</figure>
<div class="align_text">
<header id="headings">
<span class="productarticlename">Cabbage 1</span>
</header>
<p class="productprice">$10</p>
<div class="addtocart">
Add to Cart
</div>
</div>
</article>
<!-- 4 More Article Tags will be included here -->
</div>
</section>
<footer>
<div clas="heading">This is footer text</div>
</footer>
CSS
#content{
width: 100% px;
display: block;
}
.carousel_img{
width: 1000px;
}
#headings{
font-weight: bold;
}
#categories{
float: left;
}
#bestsellers{
float: left;
margin-left: 25px;
margin-right: 0 px;
width: 80%;
height: 100%;
margin-bottom: 20 px;
}
.background_div{
background: lightgreen;
}
.productarticle{
float: left;
}
.align_text{
text-align: center;
}
Please help me. I want the content in section tag and the text in footer tag to be displayed in seperate lines.
JS-FIDDLE DEMO
See this fiddle
Since your #content contains of floated elements, you also need to float the #content div. Thus add a float:left; to #content.
Now to clear this float effect from the footer, you need to add clear:both; to your footer CSS. Thus the changed CSS would be like
#content{
width: 100% px;
display: block;
float:left;
}
footer{
clear:both;
}
I'm trying to center vertically a div inside an inline-block,
I used this inline-block to get automatically size of child in order to center my div.
The problem is my children div are floating... in order to constrain it to the left/right position.
Here is how the HTML look like :
<span class="block_container">
<div class="block_text"> <!-- float:right -->
<h1>TITLE</h1>
<p>lorem ipsum</p>
</div>
<div class="block_image"> <!-- float:left -->
<img src="test.png"></img>
</div>
</span>
However, I can't figure out this problem : http://jsfiddle.net/kl94/nH2sd/
Edit:
Here is what I want :
Here is what I tried :
http://jsfiddle.net/kl94/nH2sd/
To get the actual vertical alignment working the way you want it to work as per your attached screenshot, you have to change a few things.
1. Adding a display:table-row; to the parent block.
2. Removing all floats and replacing it with display:table-cell;
This will enforce the exact characteristic of vertical-alignment to co-exist and work the way you want it to work as per the attached screenshot.
Here is the WORKING DEMO
The HTML:
<span class="block_container">
<div class="block_image">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"></img>
</div>
<div class="block_text">
<div class="bgColor">
<h1>TITLE</h1>
<p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
<div>
</div>
</span>
The CSS:
.block_text {
/*background: red;*/
/*float: right;*/
width: 60%;
display:table-cell;
vertical-align:middle;
}
.block_image {
background: yellow;
/*float: left;*/
width: 40%;
display:table-cell;
}
.block_image img {
width: 100%;
max-width: 300px;
height:auto;
}
.block_container {
background:teal;
/*display:inline-block;*/
display:table-row;
}
.bgColor{background:red;}
Hope this helps.
You could try something like this: http://codepen.io/pageaffairs/pen/LlEvs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.block_text {
background: red;
display:inline-block;
vertical-align: middle;
}
img {
width: 40%;
max-width: 300px;
vertical-align:middle;
background: yellow;
}
.block_container {
background:teal;
display: inline-block;
}
</style>
</head>
<body>
<div class="block_container">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"><div class="block_text">
<h1>TITLE</h1>
<p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
</div>
</div>
</body>
</html>
You can try to add this:
margin-top: 13%; at your .block_text selector in CSS.
I'm having difficulty in placing a div containing contact info in my header. I've been reading up on this issue for a few hours & haven't quite found a solution yet. I'm trying to stack my contact info on the top right of my layout.
--
Image of what I'd like to achieve:
http://i45.tinypic.com/2zrgu8o.jpg
Image of what my code is currently producing:
http://i48.tinypic.com/mbhlcz.jpg
--
My HTML:
<html>
<head>
<link rel="stylesheet" href="/css/header.css" />
</head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" /></head>
<body style="margin:0; padding:0;">
<div id="logo">
<img src="/images/logo-top.png">
</div>
<div class="contact">
Email: sadlkj#yahoo.com | Phone: 1 (732) 235-7239
</div>
<div id="header-bg">
</div>
</body>
</html>
My CSS:
#logo {
postion: fixed;
width: 300px;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
#header-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 50px;
background-image: url("/images/header-bg.png");
background-repeat: repeat-x;
z-index: -1;
}
.contact {
float:right;
margin-left:10px;
margin-bottom:10px;}
}
Your help is much appreciated.
I would suggest using a <span> instead of a div, either that or using <div style="display: inline;">
The problem can be solved by putting the contact div BEFORE the logo div in your HTML.
floats only float to the right or the left, not up. The contact div is below the bottom of the logo div and so floats right at that level. By putting it before the logo it floats right before the logo pushes it down.
use this html structure and change your css
<div id="header-bg">
<div class='center_wrap'>
<div id="logo">
<img src="/images/logo-top.png">
</div>
<div class="contact">
Email: sadlkj#yahoo.com | Phone: 1 (732) 235-7239
</div>
</div>
</div>
can't do more luck of time
You've got it all right, you just have a typeo in your class definition. You have to say 0px rather than just 0 for your positioning
top:0px;
left:0px;
Here... take a look: http://jsfiddle.net/t5LZL/2/