(ignore the fact that items in the header are in different language) Hyperlink of header's items doesn't work. I don't know how to fix it. When I put a cursor on a div my cursor doesn't change to a hand. It looks like website doesn't see my div? Or something like that? I've no idea. I send HTML/CSS code.
body {
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 20px;
background-color: #DEDEDE;
padding: 0;
margin: 0;
}
#container {
margin-left: auto;
margin-right: auto;
height: 1700px;
}
#header {
width: 800px;
padding-top: 20px;
margin-left: 550px;
margin-right: auto;
float: left;
}
#photo {
height: 980px;
width: 1864px;
background-color: white;
float: left;
background-image: url(domek.jpg);
background-size: cover;
box-shadow: 10px 5px 15px 0px grey;
}
#oferta {
font-size: 25px;
width: 150px;
float: left;
}
#rezerwacja {
font-size: 25px;
width: 150px;
float: left;
}
#atrakcje {
padding-left: 40px;
font-size: 25px;
width: 150px;
float: left;
}
#kontakt {
font-size: 25px;
width: 150px;
float: left;
}
#galeria {
font-size: 25px;
width: 150px;
float: left;
}
<div id="photo" style="position:relative;"></div>
<div id="header" style="position:absolute;">
<div style="clear: both;"></div>
<div id="oferta" style="color: white;">Oferta</div>
<div id="kontakt">Kontakt</div>
<div id="rezerwacja">Rezerwacja</div>
<div id="atrakcje">Atrakcje</div>
<div id="galeria">Galeria</div>
</div>
Related
Sorry bit of a newbie, but i'm having this annoying issue where I can't figure out why these two divs are overlapping... I have content behind the second pic that's being covered right now but I want that content to be shown and for the second pic to be displayed normally under it..
heres what I have html:
<main>
<div id="top_head">
<h2>
Gallery
</h2>
</div>
<br>
<div id="canvas">
<div class="gal_block">
<img src="../img/b_sign.jpg" alt="#">
<br>
<h2 class="gal_head">Chill Morning</h2>
<br>
<p class="gal_meta">May 12, 2018 / by nock / Outdoors<p>
<br>
<p class="gal_info"></p>
</div>
<div class="gal_block">
<img src="../img/b_sign.jpg" alt="#">
<br>
<h2 class="gal_head">Chill Morning</h2>
<br>
<p class="gal_meta">May 12, 2018 / by nock / Outdoors<p>
<br>
<p class="gal_info"></p>
</div>
</div>
</main>
And my css:
* {
margin:0;
padding: 0;
}
.clearfix {
clear: both;
}
#container {
margin: 0 auto;
width: 100%;
}
a {
text-decoration: none;
}
header {
width: 100%;
}
#left_header {
float: left;
margin: 5%;
padding:;
width: 20%
}
#left_header h1 {
font-family: 'Pacifico',cursive;
}
header nav {
float: right;
margin: 5%;
width: 35%;
}
header nav ul li {
float: left;
margin-left: 7%;
padding:0;
list-style: none;
font-size: 20px;
font-family: 'Raleway',cursive;
}
header nav ul li a {
color: black;
transition: color 1s;
}
header nav ul li a:hover {
color: gray;
}
main {
}
#top_head h2 {
font-family: 'Source Serif Pro';
font-size: 30px;
text-align: center;
}
/*affects all pages ^^^*/
/*home*/
#img_wall {
width: 82%;
height: 100%;
padding: 7%;
}
#l_big {
padding: 1%;
float: left;
width: 58%;
height: 67%;
}
#l_big img{
width: 100%;
height: 100%;
border-radius: 5px;
}
#r_top {
padding: 1%;
float: left;
width: 38%;
height: 32%;
}
#r_top img {
width: 100%;
height: 100%;
border-radius: 5px;
}
#r_bottom {
padding: 1%;
float: left;
width: 38%;
height: 32%;
}
#r_bottom img {
width: 100%;
height: 100%;
border-radius: 5px;
}
/*home end*/
/*about*/
/*about end*/
/*gallery*/
#canvas {
}
.gal_block {
display: block;
margin: 0 auto;
width: 80%;
height: 70%;
margin-top: 5%;
}
.gal_block img {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
border-radius: 5px;
}
.gal_head {
font-family: 'Source Serif Pro';
font-size: 25px;
text-align: center;
margin-top: 2%;
}
.gal_meta {
font-family: 'Raleway',cursive;
font-size: 12px;
color: gray;
text-align: center;
}
.gal_info {
font-size: 14px;
font-family: Arial;
width: 40%;
margin: 0 auto;
line-height: 1.5;
margin-bottom: 8%;
}
I also have a container over everything that with a width of 100% if that matters..(guessing it doesn't) but img of the issue below
if you look closely you can see the text thats supposed to be not cover..revealing itself when I mess with the zoom on the page...
When my website is on 100% zoom it looks alright but...
when I zoom in it all goes right
when I zoom out it all goes left
How do I make it so my website zooms in and out without effecting the layout of the website from the center?
e.g. Like this website http://www.johnlewis.com
I am a beginner at coding.
HTML and CSS is shown below.
HTML
<html>
<head>
<meta charset="utf-8"/>
<title> Josh Taylor</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"
type='text/css'>
<link rel="shortcut icon" href="Icon.png"/>
</head>
<body>
<div id="nav-div">
<ul>
<h1>JOSH TAYLOR</h1>
<li>Contact</li>
<li>CV</li>
<li>Portfolio</li>
<li>Home</li>
</ul>
</div>
<div id="main-left">
<h2> A BIT ABOUT ME </h2>
<p> this crap is only here to show what it would look like mate I don't
want it sounding boring like my CV and needs some life so give it some josh
</p>
<h3> INTERESTS</h3>
</div>
<div id="main-right">
<img src="CopenhagenJosh.png">
</div>
<div id="main-social">
</div>
<div id="interests">
<img src="CopenhagenJosh.png">
<img src="CopenhagenJosh.png">
<img src="CopenhagenJosh.png">
<img src="CopenhagenJosh.png">
<img src="CopenhagenJosh.png">
</div>
<div id="intereststitles">
<p> Hello</p>
<p> Hello</p>
<p> Hello</p>
<p> Hello</p>
<p> Hello</p>
</div>
<div id="portfolio-left">
<h2> PORTFOLIO</h2>
</div>
<div id="portfolio-right">
<p> This is my creative work ayoooo below...</p>
</div>
<div id="portfolio-1">
<img src="AppIcon.png">
<img src="AppIcon.png">
<img src="AppIcon.png">
<img src="AppIcon.png">
<img src="AppIcon.png">
<img src="AppIcon.png">
</div>
<div id="CV">
<div id="CV-left">
<h2> CV </h2>
</div>
<div id="CV-right">
</div>
<div id="CV-img">
<img src="CopenhagenJosh.png">
</div>
<div id="contact">
<div id="contact-left">
<h2> CONTACT </h2>
</div>
<div id="contact-right">
</div>
</div>
</body>
</html>
CSS
body {
font-family: 'Lato', sans-serif;
font-style:italic
}
html{
padding: 0px;
margin: 0px;
background: url(sky.jpg);
background-size:contain;
background-repeat:no-repeat;
display: inline-block;
}
/* FOOTER NAVIGATION */
#nav-div {
opacity: 1;
font-size: 15px;
}
#nav-div h1{
color: lightskyblue;
cursor: pointer;
width: px;
float: left;
margin-left: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
font-size: 25px;
}
#nav-div h1:hover{
color: white;
transition:all 0.40s;
}
#nav-div ul{
margin: 0px;
padding: 0px;
width: 100%;
height: 80px;
background: ;
line-height: 80px;
float:right;
border-bottom: px solid black;
margin-right: 300px;
}
#nav-div ul a{
text-decoration: none;
color: lightskyblue;
padding: 25px;
}
#nav-div ul a:hover{
color:white;
transition:all 0.40s;
font-style:italic;
}
#nav-div ul li {
list-style-type: none;
display: inline-block;
float: right;
font-style:normal;
font-size: 15px;
}
#main-left{
float: left;
display: inline-block;
width: 40%;
height: 250px;
margin-top: 100px;
}
#main-right{
float: left;
padding: px;
display: inline-block;
width: 22%;
height: 175px;
margin-top: 100px;
}
#main-right img{
float: left;
margin-left ;
width: 150px;
height: 150px;
padding: 10px;
display: inline-block;
}
#main-social{
float: left;
display: inline-block;
margin-left: 7%;
width: 10%;
height: 250px;
margin-top: 100px;
}
#main-left h2{
width: 300px;
height: 50px;
font-size: 35px;
color: white;
display: inline-block;
margin-left: 300px;
margin-right: %;
margin-top: 0;
margin-bottom:0;
float: left;
}
#main-left p{
width: 250px;
height: 100px;
margin-top: px;
margin-left: 300px;
margin-right: 5%;
font-size: 17px;
color: darkgrey;
display: inline-block;
position: relative;
}
#main-left h3{
margin-top: px;
width: 150px;
height: 30px;
margin-left: 300px;
font-size: 20px;
color: white;
display: inline-block;
float: left;
}
#interests {
width: 100%;
height:125px;
margin-top:px;
margin-left: 300px;
display: inline-block;
}
#interests img{
padding: 14px;
Height: 100px;
Width: 100px;
margin-bottom: 0px;
}
#intereststitles{
width: 100%;
height:100px;
margin-top:0px;
margin-left: 300px;
display: inline-block;
color: white;
}
#intereststitles p{
padding: 14px;
margin-top:0px;
Height: 10px;
Width: 100px;
font-style: normal;
display: inline-block;
text-align: center
}
#portfolio {
width: 100%;
height: 100%;
background-color: gray;
opacity: 1;
}
#portfolio-left{
background-color: gray;
float: left;
width: 25%;
height: 100px;
}
#portfolio-left h2{
width: 200px;
height: 50px;
font-size: 35px;
color: white;
display: inline-block;
margin-left: 200px;
margin-right: ;
margin-top: 25px;
margin-bottom:0;
float: left;
}
#portfolio-right{
background-color: gray;
float: right;
width: 75%;
height: 100px;
margin-top: 0px;
}
#portfolio-right p{
font-size: 20px;
color: white;
display: inline-block;
margin-left: 0%;
margin-right: %;
margin-top: 36px;
margin-bottom:0;
padding: 0px;
float: left;
}
#portfolio-1{
margin-left: 0%;
width: 100%;
display: inline-block;
text-align: center;
padding:0%;
margin:0;
background-color: gray;
}
#portfolio-1 img{
display: inline-block;
padding: 0px;
width:33%;
}
#CV {
width: 100%;
height: 900px;
background-color: skyblue;
opacity: 1;
}
#CV-left{
float: left;
width: 430px;
height: 100px;
}
#CV-left h2{
font-size: 35px;
color: white;
display: inline-block;
margin-left: 200px;
margin-right: ;
margin-top: 25px;
margin-bottom:0;
float: left;
}
#CV-right{
float: right;
width: 75%;
height: 100px;
margin-top: 0px;
}
#CV-right p{
font-size: 20px;
color: white;
display: inline-block;
margin-left: 0%;
margin-right: %;
margin-top: 40px;
margin-bottom:0;
padding: 0px;
float: left;
}
#contact {
width: 100%;
height: 500px;
background-color: mediumpurple;
opacity: 1;
}
#contact-left{
float: left;
width: 50%;
height: 900px;
}
#contact-left h2{
font-size: 35px;
color: white;
display: inline-block;
margin-left: 200px;
margin-right: ;
margin-top: 25px;
margin-bottom:0;
float: left;
}
#contact-right{
float: right;
width: 50%;
height: 900px;
}
You need a div as a wrapper for your webpage, and set a fixed width or max-width if you want the content to be able to become smaller on smaller screens with margin set as auto for margin-left and margin-right to keep the page centered.
Which is precisely what the webpage you mentioned does -
You can center center content horizontally in CSS by putting it inside a block-level element (like a div), with left and right margins set to "auto". Take a look at Centering in CSS: A Complete Guide > Horizontally > Block level element. In your case, you would probably want to add a div around all the content you currently have in the body, give it a set width, and add margin: 0 auto. Note that you probably want to use max-width instead of just width to support smaller browsers (see CSS Layout - width and max-width).
In the example site you mentioned, there's a div with an id of "wrapper" that contains all the centered content.
I need to create this image into my HTML using CSS.
As you can see, there is two bar graphs aligned to the right. each bar graph has a set of bars, numbers and texts. the text is the to left aligned right, the number is to the right aligned right, and each bar is in between the text and the number.
Like I said, I have no understanding of this level of css so please treat this as a css newbie
any information would be greatly appreciated.
UPDATE
I have not tried producing any code for this. I have no idea how to handle this task.
So I was able to get the text on the left but i cannot get the value on the right. Its showing up as a new line on the right
Here is my css:
.container {
width: 500px;
margin-bottom: 20px;
margin-top: 10px;
background: #fff;
padding-bottom: 20px;
padding-top: 10px;
overflow: hidden;
float: left;
}
.horizontal .progress-bar {
float: left;
height: 45px;
width: 100%;
padding: 12px 0;
}
.horizontal .progress-track {
position: relative;
width: 50%;
height: 20px;
background: #FFFFFF;
float:right;
margin-left:-20px;
}
.horizontal .progress-fill {
position: relative;
background: #2272af;
height: 20px;
width: 50%;
color: #fff;
text-align: center;
font-family: "Lato","Verdana",sans-serif;
font-size: 12px;
line-height: 20px;
border-radius: 5px;
}
.horizontal .progress-bar-label
{
position:relative;
display:inline-block;
white-space:nowrap;
padding-left:215px;
}
.horizontal .progress-bar-value
{
position:relative;
display:inline-block;
white-space:nowrap;
padding-right:-15px;
/**padding:0;*/
}
And here is my HTML:
<div class="progress-bar horizontal">
<span class="progress-bar-label">test</span>
<div class="progress-track">
<div class="progress-fill" style="width: 100%;">
</div>
</div>
<span class="progress-bar-value">125</span>
</div>
Not quite sure how to get the value of 125 on the right of the graph bar
This is using HTML CSS and Jquery http://codepen.io/ntibbs/pen/MaPpKr
<div class="progress-bar">
<div class="progress-bar-label">test</div>
<div class="progress-track">
<div class="progress-fill" style="width: 100%;">
</div>
</div>
<div class="progress-bar-value">125</div>
</div>
.container {
width: 500px;
margin-bottom: 20px;
margin-top: 10px;
background: #fff;
padding-bottom: 20px;
padding-top: 10px;
overflow: hidden;
float: left;
}
.progress-bar {
height: 45px;
width: 100%;
}
.progress-bar-label {
position:relative;
display: inline-block;
width: 10%;
}
.progress-track {
display: inline-block;
position: relative;
height: 20px;
background: #FFFFFF;
width: 75%;
}
.progress-fill {
position: relative;
background: #2272af;
height: 20px;
color: #fff;
text-align: center;
font-family: "Lato","Verdana",sans-serif;
font-size: 12px;
line-height: 20px;
border-radius: 5px;
}
.progress-bar-value {
display: inline-block;
float: right;
}
yesterday I posted a question asking how can I center a div inside a div... Now I have another problem, I want to center a div on the screen. I want it to be in the middle and to take up 50% of the screen;
Here is a pic of the problem:
As you can see there isn't anything in the middle of the screen, that is my problem. Here is my HTML code:
* {
font-size: 100%;
font-family: Serif;
}
body {
background: url("images/background.jpg") repeat;
font-size: 100%;
}
.items {
background-color: rgba(0,0,0,.5);
width: 100%;
text-align: center;
margin: 0;
}
#basicInfo{
background-color: rgba(255,150,0,.8);
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#basicInfo:hover{
background-color: rgba(255,150,0,1);
}
#basicInfo img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs{
background-color: rgba(255,150,0,.8);
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#langs img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs:hover{
background-color: rgba(255,150,0,1);
}
.navbar {
background-color: rgba(0,0,0,0.1);
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
min-height: 5%;
}
.button{
background-color: rgba(0,0,0,.5);
font-size: 2em;
color: white;
width: 33%;
margin: 0 .16%;
height: 100%;
float: left;
}
.button:hover{
background-color: rgba(0,0,0,.7);
}
.button a{
text-decoration: none;
display: block;
color: white;
text-align: center;
vertical-align: middle;
}
#textSpace {
background-color: rgba(0,0,0, .5);
width: 100%;
height: 50%;
display: block;
top: auto;
bottom: auto;
}
<title>Mateo's About Page</title>
</head>
<body>
<div class="items">
<div id="basicInfo">
<img src="images/question.png">
</div>
<div id="langs">
<img src="images/code.jpg">
</div>
</div>
<div id="textSpace">
</div>
<div class="navbar">
<div class="button">
<b>Mateo</b>
</div>
<div class="button">
<b>Home</b>
</div>
<div class="button">
<b>Josh</b>
</div>
</div>
Any help is apriciated! Thanks in advance!
To horizontally centre a div in the middle of the screen use:
margin-left:auto;
margin-right:auto;
I have developed a website as part of my assignment. As I am new to html/css I could not figure some problems out of my code. The assignment specifications says that the screen size should be in certain size so that majority browsers can open it and the user should not experience any scroll activties. So I have used div to divide the whole page to fit the size. However, the container(In my code named as 'box') is set to the left side of the brower body and I have to set it centred, but I do not know how to fix it. Can anyone give me some help, please and thank you.
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>habibe Naby</title>
<link rel="stylesheet" href="Websystems.css">
</head>
<body>
<div id="box">
<div id="header">
<img id="image" src="spring.jpeg">
<p id="text">Welcome to My Homepage</p>
</div>
<div id="under">
<div id="upper">
<div id="leftbar">
<div class="list">
<ul>
<li>Home</li>
<li>Past</li>
<li>Future</li>
<li>Comments
</li>
</ul>
</div>
</div>
<div id="rightbar">
<div id="title">Habibe Naby</div>
<p>this is my name and
I<spanclass="special">Danny</span>.Ihave a .. </p>
</div>
</div>
<div id="footer">copyrights©</div>
</div>
My CSS:
body
{
height: 750px;
margin: 2px;
padding: 2px;
width: 1000px;
}
#box
{
width: 1000px;
margin-left: auto;
margin-right: auto;
height:100%;
border:1px solid #8D8D8D;
}
#header
{
height: 150px;
width: 100%;
position: relative;
}
#image
{
height: 150px;
width: 1000px;
}
#text
{
z-index: 100;
position: absolute;
color: darkolivegreen;
font-style: italic;
font-size: 32px;
font-weight: bolder;
left: 300px;
top: 25px;
}
#leftbar
{
float: left;
width: 200px;
height: 560px;
margin: 0px;
padding: 0px;
background-color: azure;
}
.list
{
margin-top: 40px;
margin-left: auto;
text-decoration: underline;
color:blueviolet;
font-size: 20px;
}
.list ul
{
list-style: none;
}
#rightbar
{
float: right;
width: 800px;
height: 560px;
margin: 0px;
padding: 0px;
background: mintcream;
}
#title
{
margin-left: 80px;
margin-top: 30px;
font-size: 28px;
font-weight: normal;
font-style: italic;
color: blueviolet;
}
#footer
{
clear: both;
height: 40px;
text-align: center;
background-color: oliveDrab;
margin 0px;
padding: 0px;
color: white;
}
.special
{
font-size: 20px;
font-weight: bold;
font-family: "New Century Schoolbook", Times, sans-serif;
color: dodgerblue;
}
p, pre
{
padding: 10px 20px;
margin-left: 50px;
margin-right: 50px;
color: darkslateblue;
}
Jsfiddle: http://jsfiddle.net/2gtsK/show/
Removed width from body, Added margin:0 auto to #box
margin:0 auto is same as:
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
.
body
{
height: 750px;
margin: 2px;
padding: 2px;
}
#box
{
width: 1000px;
margin: 0 auto;
height:100%;
border:1px solid #8D8D8D;
}
You can wrap it by another div and set that div's text-align:center;