I am creating a website that currently uses css and html and I am running into the problem where my grid in css is created inside the .middle element, but it is also moving elements inside the neighbouring .header element. To see this, change the first margin value inside of the css to see what happens.
h1 {
position: fixed;
top: 0px;
left: 0%;
padding: 10px;
width: 100%;
background-color: lightgray;
z-index: -1;
}
li{
display: inline;
margin-right: 10px;
}
.nav{
position: fixed;
z-index: 10;
padding:10px;
width: 15px;
left: 48%;
}
.friends{
}
.user-post{
padding-top: 20px;
}
.posts{
background-color: lightgrey;
}
.post:nth-child(odd){
background-color: grey;
}
.bottom{
position: fixed;
bottom: 0%;
}
.headings{
position: fixed;
z-index: 100;
right: 0%;
}
.middle{
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: minmax(150px, auto);
padding: 15px;
margin: 10% auto;
width: 100%;
grid-gap: 20px;
}
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="Main_Page.css">
</head>
<body>
<div class="header">
<h1 id="top">Search Media</h1>
<div class="nav">
<input type="text" placeholder="Search...">
</div>
<div class="headings">
<ul>
<li>Messages</li>
<li>Friends</li>
</ul>
</div>
</div>
<div class="middle">
<div class="user-post">
<br />
Create post:<br>
<textarea id= "create_post"rows="10" cols = "50" name = "post"></textarea><br>
<input type="submit" value="Post">
</div>
<div class="friends">
<h2 id="friend">Friends</h2>
<h5>Friend1</h5>
<p>status: active</p>
</div>
<div class="posts">
<div class="post">
<h3 id="existing_posts">Posts</h3>
<p><img src="Example.jpg" alt="manchester" width="50" height="50">This is an example of a post. It will need to be boxed and made so that the name of the user goes above
the name of the likes and dislikes of the posts are to the left of the post and that the reply and report
functionalities are at the bottom right of the posts. It will also need a box around it to show where the post starts and ends.</p>
</div>
<div class="post">
<h3 id="existing_posts">Posts</h3>
<p>This is a rancdom bit of text for tesxting purposes.</p>
</div>
<div class="post">
<h3 id="existing_posts">Posts</h3>
<p>This is a rancdom bit of text for tesxting purposes.</p>
</div>
</div>
</div>
<div class="bottom">
<p>Return to top</p>
</div>
</body>
Related
I have a section part on the website where I want four products being displayed in the middle, right and left arrows on both sides of the screen and a title in the middle above the displayed products, I think I have all of the HTML and CSS good but the position isn't working properly, can someone have a look and help me feature it out?img of the sections I am talking about
ps: the background color doesn't feel the space that the items and buttons are in, why does it happens too?
edit: this is a pic of how i wish it would look
HTML:
<section class="one">
<div><span class="title">New products</span></div>
<br>
<button class="left">
<span class="Lmain"></span>
<span class="Lside"></span>
</button>
<div class="items">
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image1.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image2.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image3.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
<div class="item">
<a href="">
<img class="itemImg" src="../Images/Image4.png" alt="Picture of the product">
</a>
<div><span class="desc">Description about that specific item that is being showen to you above this text
right here</span></div>
</div>
</div>
<button class="right">
<span class="Rmain"></span>
<span class="Rside"></span>
</button>
</section>
CSS:
.title {
text-align: center;
position: absolute;
margin: auto;
border: 1px solid goldenrod;
font-size: 40px;
}
.one {
background-color: hotpink;
position: relative;
}
.two {
background-color: rgb(255, 0, 128);
}
/*items appearance*/
.items {
position: relative;
margin: auto;
}
.item {
border: 1px solid rgb(255, 170, 0);
float: left;
position: absolute;
top: 0px;
margin: 0px 8px;
left: 12%;
width: 350px;
height: auto;
}
.itemImg {
width: 100%;
height: auto;
}
/*end of item appearance*/
.right {
right: 0px;
top: 0px;
position: absolute;
}
.left {
left: 0px;
top: 0px;
position: absolute;
}
Utilize flexbox to make this layout easy:
body {
margin: 0;
background: #1a1a1a;
color: #fff;
font-family: sans-serif;
}
h1#title {
padding: 1rem;
text-align: center;
}
main {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
#products {
display: flex;
justify-content: center;
align-items: flex-start;
margin: 0;
}
.product {
padding: 2rem 1rem;
background: #fff;
color: black;
margin: .5rem;
}
<body>
<h1 id="title">Items</h1>
<main>
<div class="arrow" id="arrow-left">←</div>
<div id="products">
<div class="product">
Product
</div>
<div class="product">
Product
</div>
<div class="product">
Product
</div>
<div class="product">
Product
</div>
</div>
<div class="arrow" id="arrow-right">→</div>
</main>
</body>
Here a list of problem I see:
the .title element is position:absolute, so it doesn't fill any space and other elements will position weirdly. Solution: remove position: absolute
the .title is a <span> element witch is an inline-element who doesn't behave like a block element (<div>, <p>, <h1>, etc.), so the text-align: center doesn't take effect. Solution: remove the span and give the .title class to the parent <div>
the left and right buttons should be wrapped in a <div> with position:relative
Here is a jsfiddle with the fixed code.
I didn't fix the image positioning because i think those will be positioned by js, anyhow it dipends by the images dimensions and is a very weak method. So I strongly suggest using flexbox that is widely supported by browsers.
You can follow the #yerme example or this guide on flexbox.
I am trying to make my own web page.
so what i want is text on left and image on right.
problem 1: image will not change the size to 300px
problem 2: i am trying to have the image on the right side, I tried using float and it did not work.
p,
h1 {
margin: 0px;
padding: 0px;
}
.top {
margin-left: 20%;
}
.top img {
float: right;
margin-right: 35%;
width: 300px;
height: 300px;
}
<div class="top">
<div class="image">
<img src="myimage.jpg">
</div>
<div class="words">
<h1>Welcome</h1>
<p>My name is Jamie Smith<br>I am a student at CSUN<br><br>Welcome, and thank you for visiting my page.
</p>
<br>
<h1>Contact Info</h1>
<p>jamie.smith#csun.edu<br></p>
</div>
<div class="list">
Pages:
</div>
</div>
Try this:
p,h1{
margin: 0px;
padding: 0px;
}
.top{
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
}
.words, .list{
width: 100%;
}
<div class="top">
<div class="image">
<img src="myimage.jpg">
</div>
<div class="words">
<h1>Welcome</h1>
<p>My name is Jamie Smith<br>I am a student at CSUN<br><br>Welcome, and thank you for visiting
my
page.</p><br>
<h1>Contact Info</h1>
<p>jamie.smith#csun.edu<br></p>
</div>
<div class="list">
Pages:
</div>
</div>
try this code:
p,h1{
margin: 0px;
padding: 0px;
}
.top{
height: auto;
background-color: aqua;
padding: 20px;
display: inline-block;
width: 100%;
}
.top img{
float:right;
width:300px;
height:300px;
}
<body>
<div class="top">
<div class="image">
<img src="myimage.jpg">
</div>
<div class="words">
<h1>Welcome</h1>
<p>My name is Jamie Smith<br>I am a student at CSUN<br><br>Welcome, and thank you for visiting
my
page.</p><br>
<h1>Contact Info</h1>
<p>jamie.smith#csun.edu<br></p>
</div>
<div class="list">
Pages:
</div>
</ul>
</div>
</body>
The image gets 300px width, but for making it better add a .image class in your css. Use flex display instead of using float. to set your image on right you can simply add rtl direction to div with top class or put it after div with word class.
p,h1{
margin: 0px;
padding: 0px;
}
p,h1{
margin: 0px;
padding: 0px;
}
.top{
display: flex;
justify-content: center;
align-items: center;
}
.top .image img{
width:300px;
height:300px;
}
<div class="top">
<div class="words">
<h1>Welcome</h1>
<p>My name is Jamie Smith<br>I am a student at CSUN<br><br>Welcome, and thank you for visiting
my
page.</p><br>
<h1>Contact Info</h1>
<p>jamie.smith#csun.edu<br></p>
</div>
<div class="list">
Pages:
</div>
<div class="image">
<img src="http://simpleicon.com/wp-content/uploads/user1-256x256.png" />
</div>
</div>
I want to create a #necker div with the same height, and width, and to center him the same way as my #header div that fixed to top of screen.
I tried to copy the data from the #header div to #necker div and margin in down from top. Failed :(. Could you help me?
#header {
position: fixed;
display: inline-block;
margin: 0 10%;
top: 0px;
width: 80%;
height: 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
#necker {
position: relative;
display: inline-block;
margin: 0 10%;
margin-top: 142px;
width: 80%;
height: 150px;
background: rgb(245, 210, 83);
}
<html>
<head>
<title> Yakir Freed </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div class="Categories" id="Cate1">
<h2>Home Page</h2>
</div>
<div class="Categories" id="Cate2">
<h2>About us</h2>
</div>
<div class="Categories" id="Cate3">
<h2>Support</h2>
</div>
<div class="Categories" id="Cate4">
<h2>Sales!</h2>
</div>
<div class="Categories" id="Cate5">
<h2>Contact us</h2>
</div>
</div>
<div id="necker"></div>
</body>
</html>
The div can't center the same as the menu, because the position: fixed casues it to ignore the default margin from the browser stylesheet. If you add margin: 0 to body the two elements will be centered in the same spot.
#header {
position: fixed;
display: inline-block;
margin: 0 10%;
top: 0px;
width: 80%;
height: 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
#necker {
position: relative;
display: inline-block;
margin: 0 10%;
margin-top: 142px;
width: 80%;
height: 150px;
background: rgb(245, 210, 83);
}
body {
margin: 0;
}
<div id="header">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div class="Categories" id="Cate1">
<h2>Home Page</h2>
</div>
<div class="Categories" id="Cate2">
<h2>About us</h2>
</div>
<div class="Categories" id="Cate3">
<h2>Support</h2>
</div>
<div class="Categories" id="Cate4">
<h2>Sales!</h2>
</div>
<div class="Categories" id="Cate5">
<h2>Contact us</h2>
</div>
</div>
<div id="necker"></div>
<div class="makeitscroll"></div>
What's exactly what you are not expecting from your code? If the problem is that the two div hasn't got the same width, try removing the margin and padding from the body (so 80% results in both cases in the same number of pixels).
The fixed block use the complete viewport width to calculate the 80%, instead, the #necker use the body width (using the default margin or padding that the browser is applying)
body{
margin: 0px;
padding: 0px;
}
If that's not your problem, I can't see what you need to achieve, please, could you be more specific?
I believe below solution will help you. Thing you missed is default margin <body> has. Deleting it fixes the issue.
Key part
body {
margin: 0;
}
Snippet
body {
margin: 0;
}
#header {
position: fixed;
display: inline-block;
top: 0px;
margin: 0 10%;
width: 80%;
height: 150px;
background: rgb(217, 47, 54);
z-index: 1;
}
#necker {
position: relative;
display: inline-block;
margin: 0 10%;
margin-top: 142px;
width: 80%;
height: 150px;
background: rgb(245, 210, 83);
}
<html>
<head>
<title> Yakir Freed </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<img id="logo" src="images/logo.png" alt="Yakir Freed" />
<div class="Categories" id="Cate1">
<h2>Home Page</h2>
</div>
<div class="Categories" id="Cate2">
<h2>About us</h2>
</div>
<div class="Categories" id="Cate3">
<h2>Support</h2>
</div>
<div class="Categories" id="Cate4">
<h2>Sales!</h2>
</div>
<div class="Categories" id="Cate5">
<h2>Contact us</h2>
</div>
</div>
<div id="necker"></div>
</body>
</html>
I have html (bootstrap css) like this:
<div class="container">
<div class="row">
<div class="col-xs-6 col">
<div class="block">
<div class="title">
<strong>Dynamic title 1 line</strong>
</div>
<div>
<i>Prop 1</i>
</div>
<div>
Value 1
</div>
</div>
</div>
<div class="col-xs-6 col">
<div class="block">
<div class="title">
<strong>Dynamic title <br>more than 1 line</strong>
</div>
<div>
<i>Prop 1</i>
</div>
<div>
Value 1
</div>
</div>
</div>
</div>
</div>
And css like this
.block{
border: 1px solid black;
margin: 10px;
padding: 10px;
text-align: center;
}
.title{
margin-bottom: 10px;
min-height: 40px;
}
Title comes as dynamic text so it can be 1, 2, or 3 lines. Is there a way to make title height the same height as the height in the 'highest' title with css only. I want properties be aligned regardless of the title text coming in from api. I would like the above example to work without setting min-height: 40px; because I don't know what min-height should be.
http://jsfiddle.net/DTcHh/28125/
You can use the table.For solving this problem
.block{
margin: 10px;
padding: 10px;
text-align: center;
}
td.block-cell {
border: 1px solid #000;
}
.block-wrap {
background-color: transparent;
border-collapse: separate;
border-spacing: 10px;
}
.title{
margin-bottom: 10px;
min-height: 40px;
}
<!DOCTYPE html><head>
<title>Test</title><meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=0'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<table class="block-wrap">
<tr>
<td class="block-cell">
<div class="block">
<div class="title">
<strong>Dynamic title 1 line</strong>
</div>
<div>
<i>Prop 1</i>
</div>
<div>
Value 1
</div>
</div>
</td>
<td class="block-cell" >
<div class="block">
<div class="title">
<strong>Dynamic title <br>more than 1 line</strong>
</div>
<div>
<i>Prop 1</i>
</div>
<div>
Value 1
</div>
</div>
</td>
</tr>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
As far as I am aware this is impossible in css only since the two elements are not siblings of each other. If that was the case display: table-cell could have been an option.
However there is a solution for this when using jQuery you can look up the highest .title element and set all the other .title elements to this heights.
See the following snippet:
var largest = 0;
//loop through all title elements
$(document).find(".title").each(function(){
var findHeight = $(this).height();
if(findHeight > largest){
largest = findHeight;
}
});
$(document).find(".title").css({"height":largest+"px"});
See the fiddle for an example: http://jsfiddle.net/DTcHh/28131/
You can override the CSS bootstrap, and to make the columns were of the same height using flexbox.
body {
margin: 10px;
}
.same-height-wrapp {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.same-height-wrapp > [class*='col-'] {
display: flex;
flex-direction: column;
}
.block{
border: 1px solid black;
margin: 10px;
padding: 10px;
text-align: center;
height: 100%;
position: relative;
}
.title{
margin-bottom: 60px;
}
.desc-wrapp{
position: absolute;
height: auto;
width: 100%;
bottom: 15px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row same-height-wrapp">
<div class="col-xs-6 col same-height">
<div class="block">
<div class="title">
<strong>Dynamic title 1 line</strong>
</div>
<div class="desc-wrapp">
<div>
<i>Prop 1</i>
</div>
<div>
Value 1
</div>
</div>
</div>
</div>
<div class="col-xs-6 col same-height">
<div class="block">
<div class="title">
<strong>Dynamic title <br>more than 1 line<br> line 2</strong>
</div>
<div class="desc-wrapp">
<div>
<i>Prop 1</i>
</div>
<div>
Value 1
</div>
</div>
</div>
</div>
</div>
</div>
With current HTML you can't make height of both blocks same with css.
However you can create a fake effect of having same height with :before or :after pseudo elements.
The trick is to use position: relative on .container and remove it from child .col-xs-* classes. Then use :before or :after pseudo element with wisely calculated left and width values.
.same-height-container {
position: relative;
}
.same-height-container .col {
position: static;
}
.same-height-container .col:before {
width: calc(50% - 30px - 20px); /* .container left-right padding +
.block left-right margin */
border: 1px solid black;
background: green;
position: absolute;
content: '';
left: 25px; /* container left padding + block left margin */
bottom: 10px;
top: 10px;
z-index: -1;
}
.same-height-container .col + .col:before {
right: 25px;
left: auto;
}
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.block {
margin: 10px;
padding: 10px;
text-align: center;
}
.title{
margin-bottom: 10px;
min-height: 40px;
}
.same-height-container {
position: relative;
}
.same-height-container .col {
position: static;
}
.same-height-container .col:before {
width: calc(50% - 50px);
border: 1px solid black;
background: green;
position: absolute;
content: '';
left: 25px;
bottom: 10px;
top: 10px;
z-index: -1;
}
.same-height-container .col + .col:before {
right: 25px;
left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container same-height-container">
<div class="row">
<div class="col-xs-6 col">
<div class="block">
<div class="title">
<strong>Dynamic title 1 line</strong>
</div>
<div>
<i>Prop 1</i>
</div>
<div>
Value 1
</div>
</div>
</div>
<div class="col-xs-6 col">
<div class="block">
<div class="title">
<strong>Dynamic title <br>more than 1 line Dynamic title <br>more than 1 lineDynamic title <br>more than 1 lineDynamic title <br>more than 1 line</strong>
</div>
<div>
<i>Prop 1</i>
</div>
<div>
Value 1
</div>
</div>
</div>
</div>
</div>
I adjust the solution a little bit:
function sameheight(div){
/* Latest compiled and minified JavaScript included as External Resource */
var largest = 160;
var findHeight = 0;
//loop through all title elements
$(document).find(div).each(function(){
findHeight = $(this).height();
if(findHeight > largest){
largest = findHeight;
}
});
$(document).find(div).css({"height":findHeight+"px"});
};
Then you can use the function with
sameheight(".blogtitle");
Im trying to put together some images together with an text under the images which will work as an menu, which should be centered horizontal under an header. The website is supposed to work as an responsive website. The HTML and CSS code is currently looking like this:
Edited
I want 5 images, each one of them shall have a text under them. And I want the my images together with the text to be centered.
HTML
<nav>
<div id="content">
<img src="ikoner/icon_90_2.png"/>
<div class="text">Utvecklingen sedan 90-talet</div>
</div>
<div id="content">
<img src="ikoner/icon_html5.png"/>
<div class="text">HTML5</div>
</div>
<div id="content">
<img src="ikoner/icon_html5video.png"/>
<div class="text">HTML5 Video</div>
</div>
<div id="content">
>img src="ikoner/icon_responsive.png"/>
<div class="text">Responsive Webdesign</div>
</div>
<div id="content">
<img src="ikoner/icon_heart.png"/>
<div class="text">Emotional Design</div>
</div>
</nav>
CSS
#content {
position: relative;
width: 15%;
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#content img {
padding-top: 370px;
width: 100px;
}
.text {
font-size: 12px;
font-family: 'ciclethin';
text-decoration: none;
}
You're not aligning your "Nav" div anywhere.
So, I've changed the id="content" to classes, because IDs should be unique to the page.
Set nav element to text-align:center. Here's a fiddle, and the relevant code:
http://jsfiddle.net/cw16tkdn/2/
<nav>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Utvecklingen sedan 90-talet
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">HTML5
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">HTML5 Video
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Responsive Webdesign
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Emotional Design
</div>
</div>
</nav>
and CSS:
nav {
text-align:center;
}
.content {
display: inline-block;
text-align: center;
}
.content img {
width: 100px;
}
.text {
font-size: 12px;
font-family:'ciclethin';
text-decoration: none;
}
maybe you want this: (i have changed id=content with class=content in html code!)
.content {
position: relative;
width: 100px;
display: inline-block;
height: 520px;
text-align: center;
vertical-align:bottom;
}
.content img {
padding-top: 370px;
width: 100px;
display:block;
margin: auto;
}
.text a {
font-size: 12px;
font-family: 'ciclethin';
text-decoration: none;
}
.text {
height: 3em;
}