I am trying to design a front-end with HTML and CSS, I am unable to use the div and style them with CSS to have a look like below format.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.students-page-container{
display: flex;
align-items:center;
justify-content:space-between;
}
.label-style{
font-weight:600;
font-family:'sans-serif';
font-size:24px;
align-items: center;
color: black;
margin-left:2rem;
line-height:28.8px;
display:flex;
}
.button-style{
border:none;
background:none;
padding:none;
font-weight:400;
size:12px;
line-height:14.4px;
}
.box-design{
width: 100 %;
background-color: gray;
}
.child-one{
width: 50%
min-height"400px;
background-color:white;
float:left;
}
.child-two{
width: 25%
min-height"200px;
background-color:white;
float:right;
}
.child-three{
width: 25%
min-height"200px;
background-color:white;
float:right;
}
</style>
</head>
<body>
<!-- Top Row Container-->
<div class="students-page-container">
<div class="label-style">
<span> student number: 92837293</span>
</div>
<div>
<button class="button-style">
<u> all students</u>
</button>
</div>
</div>
<!-- for the boxes -->
<div class="box-design">
<div class="child-one">
<p> Studnt Name: mike jordan</p>
....
...
...
..
<hr>
<p></p>
</div>
<div class="child-two">
<p> Alerts</p>
</div>
<div class="child-three">
<p> Contact Details</p>
</div>
</div>
</body>
</html>
I am able to display first row student number with a link to all students in the correct format. But as soon as i am trying to write other div elements for boxes and setting min-height. the box is overriding the exiting top and header of the page.
I am quite new to front-end and learning .any help would be greatly appreciated
Expecting how to achieve the Layout which is high-lighted with red box
Related
I'm a high school senior working on app development for an engineering senior project and I've run into a little block with the HTML/CSS. I created an initial prototype for the app using Adobe XD, and it looks a little like this:
https://i.stack.imgur.com/K4V3G.png
The initial dimensions for the header and footer elements in the prototype are 70px high, however, when I put this in my CSS and run a mobile emulator, it turns out looking more like this:
https://i.stack.imgur.com/1YcFe.png
I also tried converting to em/rem, but that didn't help. I know mobile screens have a higher pixel density than laptops/desktops but I don't know how much higher. Does anyone have any suggestions for getting the header and footer elements to be the proper height on the screen?
EDIT: Including HTML/CSS in question for reference
CSS:
body{
font-family: 'Roboto', sans-serif;
height:100vh;
width:100vw;
padding:0;
}
wrapper{
margin: 0 auto;
padding: 0;
clear:both;
}
#head{
width:100%;
height:4.313rem;
font-size:40pt;
background-color:#fafafa;
text-align:center;
color:#707070;
}
#divider{
width:100%;
height:0.063rem;
background-color:#e0e0e0;
}
#midcontainer{
width:100%;
height:calc(100% - 8.75rem);
background-color:#fafafa;
overflow:hidden;
margin:0;
padding:0;
}
#midscroll{
width:calc(100% + 20px);
height:calc(100% - 8.75rem);
overflow:auto;
margin:0;
padding:0;
}
#midbody{
width:100%;
min-height:calc(100% - 8.75rem);
font-size:12pt;
text-align:justify;
}
#foot{
width:100%;
height:4.375rem;
background-color:#e0e0e0;
}
HTML:
<template name="Home">
<div align="center" style="height:100vh;width:100vw;position:absolute;top:0;left:0;border:1px solid transparent;">
<div id="head">
<p style="position:relative;top:50%;transform:translateY(-50%);">Upcoming Tasks</p>
</div> <!--end head-->
<div id="divider">
</div> <!--end divider-->
<div id="midcontainer">
<div id="midscroll">
<div id="midbody">
<p style="padding-left:0.313rem;padding-right:0.313rem;">
*Body elements here*
</p>
</div> <!--end midbody-->
</div> <!--end midscroll-->
</div> <!--end midcontiner END OF MIDDLE CONTENT-->
<div id="foot">
<img id="Home" style="height:4.375rem;width:4.375rem;padding-right:1.125rem;" src="https://imgur.com/C5zD29C.png">
<img id="Create" style="height:4.375rem;width:4.375rem;padding-right:1.188rem;" src="https://imgur.com/5UhZ0e9.png">
<img id ="Calendar" style="height:4.375rem;width:4.375rem;padding-right:1.125rem;" src="https://imgur.com/nUTj5zs.png">
<img id="Achievements" style="height:4.375rem;width:4.375rem;" src="https://imgur.com/4WrWF7T.png">
</div> <!--end foot-->
</div>
</template>
Try adding this into the <head> of your HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I am trying to create a base div where I can copy it as many times as I need for when I want to add new content to my website. So the Html looks like this:
<div class="post">
<p class="date">17/03/1014</p>
<h1>Hello World!</h1>
<p class="postText">djdfkjdfssdfldfskjldfskjldfskjldsfkjldsfjkldsjkldjkl
</p>
</div>
<div class="postImage"><img src="images/car.jpg" width="300" alt="car></div>
Then my css looks like this:
.post{
width:960px;
margin:0 auto;
color:#000;
background-color:#CCC;
font-family:Verdana, Geneva, sans-serif;
/*CSS3*/
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-outline: 1px dashed #000000;
-moz-outline: 1px dashed #000000;
outline: 1px dashed #000000;
-webkit-outline-offset: -5px;
-moz-outline-offset: -5px;
outline-offset: -5px;
behavior:url(PIE.htc);
}
.post p.postText {
width:500px;
padding-left:10px;
padding-bottom:10px;
}
.post p.date{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
padding-top:10px;
padding-left:10px;
}
.postImage {
display:block;
float:left;
}
If you test it, the image doesn't float on the right of the text, but instead is below it. Any ideas on what is happening?
Try to start simple - get your positioning correct first, then add in the padding, borders, /CSS3/ stuff. http://jsfiddle.net/bEECn/
There are many ways to accomplish this, but I think wrapping your textual content in a container and floating that may be the most straight forward for you.
<div class="post">
<div class="content-wrap">
<p class="date">17/03/1014</p>
<h1>Hello World!</h1>
<p class="postText">djdfkjdfssdfldfskjldfskjldfskjldsfkjldsfjkldsjkldjkl</p>
</div>
<div class="postImage">
<img src="http://lorempixel.com/300/300" width="300" alt="car" />
</div>
</div>
Then, this simple CSS:
.content-wrap, .postImage {
float: left;
}
From there, you can add your additional styles.
If that is your exact HTML, you have several errors. Not sure if that will completely fix your problem, but you need to fix your HTML either way.
<div class="post">
<p class="date">17/03/1014</p> <!-- Was </div> -->
<h1>Hello World!</h1> <!-- Was </div> -->
<p class="postText">djdfkjdfssdfldfskjldfskjldfskjldsfkjldsfjkldsjkldjkl</p>
</div> <!-- Was missing -->
<div class="postImage">
<img src="images/car.jpg" width="300" alt="car>
</div>
I made a JSFiddle for you.
http://jsfiddle.net/FRDKL/
I found allot of HTML errors for example:
<img src="images/car.jpg" width="300" alt="car>
U forgot an " at the end of your ALT. I hope this helps:
http://jsfiddle.net/FRDKL/
Im attempting to overlay a semi-transparent box over an image. Inside that box i would like the bottom 1/4 to be red (indicating an item purchased on sale). So far i have the image, and a semi-transparent white box over the image.
2 things currently: 1. How can i make the bottom ~1/4 of the box red 2. How can i separate/style the text i have so the Price appears at the bottom of the box in the red area (if sale), and the description appears above like in the reference image below.
Do I need to create a frame or padding around the image to ensure the boxes float in the same place?
Jfiddle: http://jsfiddle.net/3S9Dg/
What i designed that i'm trying to work towards trying to emulate for reference: http://imgur.com/zKzjIyF
The red box inside the box is on the first item on the left, the girl in the vest.
<DIV style="position: absolute; top:265px; left:125px; width:200px; height:25px"><p>Sex Dress <span id="u186-2">IN </span></p>
<p><span id="u186-4">Purple rain</span> <div class="Cash-Money" id="u187-4">
<p>Price : $455</p></DIV></p>
</div>
<div style="position: absolute; top:165px; left:40px">
<style>
div.transbox
{
width:150px;
height:65px;
margin:30px 50px;
background-color:#ffffff;
border:0px solid black;
opacity:0.81;
filter:alpha(opacity=81);
}
div.transbox p
{
margin:30px 40px;
font-weight:italics;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p><font size="1">Magic Sex Shirt In Shizam
Price: $265</font>
</p>
</div>
</body>
Sorry to say, you'll have to start over from the beginning before anyone can help you and keep their sanity! This is not how HTML code is supposed to look.
Here is a basic structure:
<html>
<head>
<title>Page title</title>
</head>
<style>
#example {
color:red;
}
</style>
<body>
<div id="example"><p>Example Div Content</p></div>
</body>
</html>
A suggested structure
JSFiddle Demo
HTML
<div class="product">
<img src="http://lorempixel.com/output/fashion-h-c-250-480-10.jpg" alt=""/>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<span class="price sale">Sale Price $500</span></p>
</div>
</div>
CSS
.product {
display:inline-block;
position:relative;
width:250px;
margin-right:10px;
}
.product img {
display:block;
}
.description {
position:absolute;
background:rgba(255,255,255,0.75);
top:60%;;
text-align:center;
padding:5px;
}
.description span {
display:block;
margin-top:10px;
padding:5px;
}
.sale {
background:red;
}
Feel free to adjust as required.
I've a html page with some div tags in it, I want to put my container div in center of computer screen whether I zoom-in or zoom-out.
I want to modify my html page in such a manner as www.bing.com. The homepage centers on the screen when you zoom-out, whereas, my web page continuously expands while zooming.
My HTML pagecode:
<html>
<head>
<title>
HTML test page
</title>
<style>
.horizontal{
width:100%;
height:100px;
background-color: #bbb;
}
.vertical{
width:100px;
height:70%;
background-color: #bbb;
}
#container{
margin:auto;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<h1 style="font-size:3em; color:Green; text-align:center;">
HTML Test page
</h1>
</div>
</body>
</html>
How to adjust my CSS code so that I can implement centralized page style same of (www.bing.com)? I want to centralize my container div on pressing Ctrl+-
I just check bing.com. It seems they change position and size of their centered div using JS. It centered while page load and the same when page is re-sized. And do not forget absolute position for #container.
<script>
$(window).resize(function() {
doResize();
}
$(document).ready(function(){
doResize();
}
function doResize() {
var windowHeight = $(window).height();
$('#container').css('top',(windowHeight - $('#container').height())/2);
}
</script>
it has something to do with you using percentages rather than say Pixels or EMs
I got it so that it is staying centered but i still have it sticking to the top of the browser.
<html>
<head>
<title>
HTML test page
</title>
<style>
.horizontal{
width:100%;
height:100px;
background-color: #bbb;
}
.vertical{
width:100px;
height:250px;
background-color: #bbb;
}
#container{
margin:auto auto;
width:750px;
height:400px;
}
</style>
</head>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<h1 style="font-size:3em; color:Green; text-align:center;">
HTML Test page
</h1>
</div>
</body>
</html>
Edit possibility
you could use a MediaQuery and set the top:###px so that the rest of your page sets up with the center. but you would probably have to create several CSS Files or write a lot of CSS code to make it work
Answer to css get height of screen resolution
this answer has a link in it to media queries that takes you to w3.org Media Queries site
After looking that bing page you just referred us, I believe this is what you probably want this
<html>
<head>
<title>
HTML test page
</title>
<style>
body {
width: 100%;
height: 100%;
margin:auto;
}
#container {
vertical-align: middle;
margin:auto;
height:100%;
width:100%;
display: table;
}
span {
display: table-cell;
vertical-align: middle;
text-align:center;
font-size:5em;
color:#fff;
}
#inner {
margin:auto;
width:50%;
height:auto;
border:100px solid #bbb;
color:Green;}
</style>
</head>
<body>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<span><div id="inner">HTML Test page</div>
</span>
</div>
</body>
</body>
</html>
This creates a 100px sized border to your div, which is aligned in center as you want
Im working on a website, and Im trying to put a navigation bar in the navigation divider I made, however when I put the image in, it doesnt go into the divider, even though its between the tags.
Heres what it looks like:
Heres My code:
CSS:
body{background-color:#030303}
#wrapper {width:800px;
margin:0 auto;
}
#header {background-color:yellow;
text-align:center;
height:50px;
}
#footer{clear:both;
background-color:yellow ;
text-allign:center;
}
#logo {float:left;
width: 139px;
background-color: black;
text-align: left;
height:70px;}
#navigation {width: 800px;
background-color:#EDEDED;
height:50px;
}
#sidebar {float:left;padding:20px; background-color:green;text-align:right;width:100px;height:460px;}
#content {float:right;width: 620px;
padding:20px; background-color:gray;
text-align:left; height:500px;
border-color:#0017FF;
}
HTML:
<! DOCTYPE html>
<html>
<head> <title>Website</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
This is my header.
</div>
<div id="logo">
<br/>
<img src="images/SubZer0-logo-and-name.png" width="140" height="50" align="left"></div>
<div id="navigation">
<img src="images/subzero-banner-new.png" width="750" height="45" align="top">
</div>
<div id="content">
This is my content box.
</div>
<div id="sidebar">
This is my sidebar.
</div>
<div id="footer">
This is my footer.
</div>
</body>
</html>
How Do I fix this?
Thank you!
Never Mind, I fixed it... Turns out the image was too big for the container.. I dont understand why though, Since the Containter was 800x50 and the image was 750x45, but it works now and thats what matters.