I'm new in html and css so i have a question.
I am messing around with some stuff but after placing some images on my page i can't click on my links anymore.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Rijschool Houben</title>
</head>
<body>
<div id="header"></div>
<div id="header-pic"><img src="image/test.png"></div>
<p>
<div id="nav-bar">
<ul>
<li>|Home|</li>
<li>Info|</li>
<li>Prijzen|</li>
<li>Acties|</li>
<li>Machtiging|</li>
<li>Theorie|</li>
<li>Begeleid rijden|</li>
<li>Bromfiets|</li>
<li>Contact|</li>
</ul>
</div>
</p>
<p>
<div id="icon-main">
<i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
<i class="fa fa-paste" style="font-size:18px;"></i><a>raymond#rijschoolhouben.nl</a><br />
<i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
</div>
</p>
<p>
<div id="img-1">
<img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
</div>
<div id="img-2">
<img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
</div>
<div id="img-3">
<img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
</div>
<div id="img-4">
<img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
</div>
<div id="img-5">
<img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
</div>
<div id="img-6">
<img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
</div>
</p>
</body>
</html>
CSS:
div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: white;
}
div#header-pic{
position: fixed;
height: 50px;
left: 500px;
}
div#nav-bar{
position: fixed;
padding-top: 130px;
left: 0;
width: 100%;
white-space: nowrap;
}
div#nav-bar ul{
list-style: none;
text-align: center;
background-color: #323232;
padding: 10px 0;
}
div#nav-bar li{
display: inline;
}
div#nav-bar li a{
text-decoration: none;
color: white;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#icon-main{
position: fixed;
color: #323232;
padding: 10px;
}
div#icon-main i{
padding: 5px;
}
div#icon-main a{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#img-1 {
position: fixed;
left: 0;
padding-top: 184px;
width: 100%;
}
div#img-2 {
position: fixed;
padding-top: 184px;
padding-left: 255px;
}
div#img-3 {
position: fixed;
padding-top: 184px;
padding-left: 915px;
}
div#img-4 {
position: fixed;
padding-top: 184px;
padding-left: 585px;
}
div#img-5{
position: fixed;
padding-top: 184px;
padding-left: 1245px;
}
div#img-6 {
position: fixed;
padding-top: 184px;
padding-left: 1575px;
}
i know the code is bad but i hope someone can help me!
Here is a fiddle.
-Ryan
I looked at your external code. Please add your HTML and CSS to your question in Stack Overflow.
From the external HTML you have the following code:
<a>046-4524501</a>
Which does not work as a link.
You have this code
Home
That works as you would expect it to.
Change this line:
<a>046-4524501</a>
to
046-4524501
Where the href="Where you want the link to go".
It's all about the value for "href"
I did notice you are doing non-responsive html which means it is not mobile friendly or will look the same in smaller browser windows.
Your code is messy but your doing okay.
First off wrap everything you are putting in the header in the header div
The images are floating up to the top over your nav due to the position:fixed
Remove all the empty <p></p> between your div's
Use floats on your images and width of a percentage of 100% plus wrap them in a container/div
If you need me to I can see if I can redo all your html and CSS but think for you would learn better to try it out for yourself.
You could always go look at the HTML5 boilerplate out there and use them to guide you on how to construct good code.
I see that you are trying to create a row of images. Instead of using a system of DIVs why don't you use the more flexible (and more responsive) structure of a list?
Then you can use float: for lining them up in a row and basic CSS to give them sizes. The images will be specified as a background for these li elements (better practice).
Like this: http://codepen.io/Attrexx/pen/KVvwXP
You are placing divs containing the images using padding. That's why you can not use links in the menu. Div blocks cover your links.
Try using something like:
selector {
position: absolute; /* or `fixed` like in your css; see below*/
top: 100px; /* pixels from the top */
left: 100px; /* pixels from the left */
/* you can also use `bottom` and `right` */
}
For example:
div#img-3 { /* or just `#img-3`; see below */
position: absolute;
top: 184px;
left: 915px;
}
Check this w3 schools article for more information on positioning.
Not related to the question:
If you are using CSS's id selector (#), I suggest not to use element selector (e.g. div). So rather than div#img-3 try using just #img-3.
Try avoiding using id selectors at all. You can use class rules, and happily after some time they will result in saving you a lot of work.
If you are using HTML5 then try using semantic elements.
Avoid using fixed position when you don't need to (your page is an example of such page).
Paragraphs (p) shouldn't be used in the same way as div. It may result in bad habit for semantic sites.
Rather than using positioning (position), experiment with float or different display types (e.g. inline-block). Use it only when it is really needed.
Read about HTML Responsive Web.
Related
When I try to size down my desktop screen navigation size of 1440px(90em) to any lower width screen, my navigation bar links start dropping off the screen. I have tried using some media query combinations, but nothing to show for it.I haven't got much experience with frontend, so I am a little bit thin on this side. Any long-term fixes to this one?Any hint on this one will be highly appreciated.
HTML header code:
<!--header-->
<header>
<nav class="nav__bar">
<a href="#" class="logo">
<img src="./images/logo.svg" alt="Sunnyside logo">
</a>
<ul class="nav__links">
<li class="nav__item">
About
</li>
<li class="nav__item">
Services
</li>
<li class="nav__item">
Project
</li>
Contact
</ul>
<img src="./images/icon-hamburger.svg" alt="toggle menu icon" class="toggle__menu">
</nav>
</header>
CSS header styles:
header {
height: 5em;
position: absolute;
left: 0;
right: 0;
}
.nav__bar {
height: 100%;
width: 90em;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 1 auto;
padding: 0 2em;
}
.nav__links {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.nav__item {
margin: 1em;
}
.nav__link {
text-decoration: none;
font-size: 1.125em;
color: hsl(0, 0%, 100%);
font-family: 'Barlow', sans-serif;
transition: all 350ms ease-in-out;
}
.nav__link:hover {
color: hsl(232, 10%, 55%);
}
.toggle__menu {
cursor: pointer;
display: none;
}
In your example code, you set the color of the link text to white... it's white on white. But that's not fully the problem... you should also remove width:90em from the .nav_bar... it's unnecessary. see this codepen https://codepen.io/aequalsb/pen/jOmyJNp
Just simply allow the <nav> to "be itself"... which is a block level element and naturally attempts to stretch out to fit available width.
padding in CSS Sizes the margin inside a button or element. Try using margin: (how many 'px' it's going off the screen); and I've had this problem before:
SOLUTION 1:
use margin-*left or top*: *px is going off screen*
<style>
#button {
width: 100px; /* the width of the button */
position: absolute;
left: 50%; /* always 50% when centering */
margin-left: -50px; /* minus half the size of the element */
}
</style>
<button id="button">Center of page</button>
SOLUTION 2
i've had this problem before, and in best situations, use position: absolute instead of relative if you are positioning the element.
<head>
<style>
.background {
position: relative;
}
.overlap {
position: absolute;
left: 30px;
}
</style>
</head>
</style>
</head>
<body>
<!-- background-element -->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Circle_Rufous_Solid.svg/1200px-Circle_Rufous_Solid.svg.png" class="background" width="10.5%" />
<!-- Overlap element -->
<img src="https://cdn.onlinewebfonts.com/svg/img_24930.png" class="overlap" width="10%" />
</body>
SOLUTION 3
if none of the above works, consider using javascript: device tester command and redirect to an error page with unsupported devices.
This example will detect a handful of mobile-devices, and if so, it'll redirect to 𝘩𝘵𝘵𝘱://𝘨𝘰𝘰𝘨𝘭𝘦.𝘤𝘰𝘮
<script>
if( /Android|webOS|iPhone|iPad|Mahc|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location.href = "http://google.com";
} else {
}
</script>
NOTE: if there is big problem you cannot solve, and none of these work, its best to do research or find some articles to find your answer. Then consider using stackoverflow.
I'm getting into the field of web design, and for practice purposes, I'm trying to create responsive HTML and CSS websites modeled after real websites so I only worry about the development, not the design. As of now, I'm redesigning apple.com. My problem is that in the apple.com navigation bar, the Apple logo is consistently around an inch away from the links to other parts of the site. As you resize the browser, it stays around an inch away. The problem is that on my (unfinished) version of the site, the apple logo stays fixed in one position as you resize the browser.
Here's my code:
html {
font-size: 100%;
}
body {
padding: 0;
margin: 0;
}
#font-face {
font-family: "San Francisco";
font-weight: 400;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}
.font {
font-family: San Francisco;
}
.logo {
position: absolute;
left: 5em;
top: .5em;
}
.center {
display: inline;
text-align: center;
}
.search {
display: block;
position: fixed;
right: 1em;
top: .7em;
}
header {
list-style-type: none;
word-spacing: 40px;
background-color: #323232;
height: 2.8em;
width: 100%;
position: fixed;
opacity: .98;
}
.ul-header {
margin: .8em;
}
.li-header {
display: inline;
}
.a-header {
text-decoration: none;
color: white;
font-family: San Francisco;
font-size: 15px;
}
.iphoneximg {
display: block;
margin-left: auto;
margin-right: auto;
}
.iphone {
text-align: center;
font-size: 3em;
line-height: 0.5em;
}
.sayhello {
text-align: center;
font-size: 1.6em;
line-height: 0;
font-weight: 550;
}
#media(min-width: 1500px) {
.iphoneximg {
width: 50%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Apple</title>
<link rel="icon" href="Images/Apple.ico">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<div class="center">
<img src="Images/Screenshot%20from%202018-03-20%2020-59-01.png" class="logo">
<ul class="ul-header">
<li class="li-header">Mac</li>
<li class="li-header">iPad</li>
<li class="li-header">iPhone</li>
<li class="li-header">Watch</li>
<li class="li-header">TV</li>
<li class="li-header">Music</li>
<li class="li-header">Support</li>
<img src="Images/Search.png" class="search">
</ul>
</div>
</header>
<br><br><br><br><br><br><br><br><br>
<section class="iphonex">
<h1 class="font iphone">iPhone X</h1>
<p class="font sayhello">Say hello to the future.</p>
<img src="Images/iphone.png" width="76%" class="iphoneximg">
</section>
<section class="iphonex">
<h1 class="font iphone">iPhone 8</h1>
<p class="font sayhello">A new generation of iPhone.</p>
<img src="Images/generation.jpg" width="76%" class="iphoneximg">
</section>
</body>
</html>
Someone suggested this solution:
How to horizontally center a <div> in another <div>?
The problem is that I'm trying to figure out how to work with the differences between images and text to center them, so simply throwing them in a div won't work.
I've tried putting the text and the image in a div and centering it, % values, messing with the display property, and a few other things, but nothing seems to work.
I'm also a newbie web dev, so if there's anything else I should fix, feel free to let me know.
Thanks,
Lyfe
Run an inspect element on the Apple page and you'll see they place their image as another list element. You on the other hand are placing it outside your list.
Here is your code, with the Apple logo placed as the first list element:
<ul class="ul-header">
<li class="li-header"><img src="apple_logo.png" width='20px'></li>
<li class="li-header">Mac</li>
<li class="li-header">iPad</li>
<li class="li-header">iPhone</li>
<li class="li-header">Watch</li>
<li class="li-header">TV</li>
<li class="li-header">Music</li>
<li class="li-header">Support</li>
</ul>
EDIT
To ensure your apple logo aligns vertically with the other elements in your list, add this to your CSS:
#app_logo {
margin-top: -10px;
}
.center ul img {
vertical-align: middle;
}
Note I added an ID to the image. Also, your settings may be slightly different.
if we have an actual look at the CSS and HTML of the apple page this is how you do it:
html:
<ul class="ac-gn-list">
<li class="ac-gn-item ac-gn-apple">
<a class="ac-gn-link ac-gn-link-apple" href="/" data-analytics-title="apple home" id="ac-gn-firstfocus">
<span class="ac-gn-link-text">Apple</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-mac">
<a class="ac-gn-link ac-gn-link-mac" href="/mac/" data-analytics-title="mac">
<span class="ac-gn-link-text">Mac</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-ipad">
<a class="ac-gn-link ac-gn-link-ipad" href="/ipad/" data-analytics-title="ipad">
<span class="ac-gn-link-text">iPad</span>
</a>
</li>
... There are More...
</ul>
css:
#media only screen and (max-width: 767px){#ac-globalnav .ac-gn-item-menu{
height:43px;
border-bottom:1px solid #333;
opacity:0;
pointer-events:none;
}
.ac-gn-apple{
position:absolute;
width:48px;
top:0;
left:50%;
margin-left:-24px;
text-align:center;
z-index:1
}
Comment:
I would bet the
position:absolute;
does the trick, however, I cut out allot of the webkit code. If yo ureally want to make a dynamic page/responsive page, you need to learn the Bootstrap Library, it is honestly super easy to use and to start using. Makes everything dynamic and responsive.
i have made 5 hyperlinks in html file but i want to give space between them
how should i do it a little help!
thank you!
<body>
<div class="back">
<div class="image">
<img src="comp.jpg" alt="background image" style="width:100%; height:100%">
</div>
<h3 class="name" style="color: #d9d9d9">
ASHUTOSH KUMAR SINGH
</h3>
<div class="link" align="middle">
About
Contact
Skills
My Work
Blog
</div>
<div class="myimg" align="middle">
<div class="circle" align="middle">
</div>
<img src="ashu.jpg" class="myimage" style="height: 300px; width:300px";>
</div>
</div>
this is my css file: in the code below i have made a class of link in which i
cascaded it. i want to give some equal space between them so that it look neat.
html,body{
margin:0;
}
div.link{
font-size: 25px;
position: fixed;
/*text-space: 100;*/
margin-top:500px;
margin-left: 250px;
}
.back{
height: 100%;
width: 100%;
margin: 0;
}
.image{
position: fixed;
}
.myimg{
position: absolute;
margin-top:100px;
margin-left: 500px;
}
.myimage{
border: 2px solid rgba(114, 114, 114, 0.55);
border-radius: 100%;
}
.circle{
border: 2px ;
border-radius: 100%;
background-color: black;
}
.name{
position: fixed;
margin-top:420px;
margin-left: 530px;
}
I think the most easiest way you're looking for is:
.link a {margin-right:10px;}
the only problem with this is that all link elements get now a margin-right, from the first to the last one.
if you want to exclude the last element to have no margin right, add an additonal:
.link a:last-child{margin-right:0px;}
remember that in css you can perfectly nest css selectors
html body .back .link a{some-css-rule}
by the way, the more specific a selector is, the more important it will be when the browser analyses them)
<div class="some_class" id="some_id" style="color:grey;">sometext</div>
#some_id{color:black;}
.some_class{color:blue;}
div {color:green;}
the color will be grey, because inline selectors have more weight than selectors with ID, which have more weight than selectors with classes, which have more weight than selectors with html containers.
This is called CSS specifity
CSS-specifity calculator by keegan.st
CSS specifity explained by css-tricks
Try to avoid custom CSS-Styles in your HTML-File and include them in your CSS-File. You can use padding or margin in your CSS-File, see this link for the difference.
YourHTMLfile.html
<head>
<link rel="stylesheet" href="YourStyleFile.css">
</head>
<body>
...
<div class="link" align="middle">
About
Contact
Skills
My Work
Blog
</div>
</body>
YourStyleFile.css
.link a {
padding: 16px;
color: white;
}
EDIT: make sure to create a CSS-File and add it to your <head> section of your HTML-File. They both have to be in the same directory. Another reason why my code may not work for you is that maybe you have another CSS-File which overrides the .link class.
Wrap them in a div and style the div with word-spacing: 10px; :)
I'm attempting to place a 'notification' style badge over an images. I am using Twitters Bootstrap as a base framework and creating a custom CSS class called notify-badge. But I cannot get anything to line up properly.
Through the magic of Photoshop, here is what I am trying to accomplish.
Here is my CSS code.
.notify-badge{
position: absolute;
background: rgba(0,0,255,1);
height:2rem;
top:1rem;
right:1.5rem;
width:2rem;
text-align: center;
line-height: 2rem;;
font-size: 1rem;
border-radius: 50%;
color:white;
border:1px solid blue;
}
I would like to be able to place any small about of text in the badge and it expand the red circle to fit.
Here is my HTML code.
<div class="col-sm-4">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="myimage.png" alt="" width="64" height="64">
</a>
<p>Some text</p>
</div>
Bunch of different ways you can accomplish this. This should get you started:
.item {
position:relative;
padding-top:20px;
display:inline-block;
}
.notify-badge{
position: absolute;
right:-20px;
top:10px;
background:red;
text-align: center;
border-radius: 30px 30px 30px 30px;
color:white;
padding:5px 10px;
font-size:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
<div class="item">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="https://picsum.photos/200" alt="" />
</a>
</div>
</div>
Addendum (from the Asker #user-44651)
(moved from the question)
Here is the result of applying this answer.
Adding margin-top:-20px; to .item fixed the alignment issue.
The idea here is to overlay an absolute container on top of a relative one. Here's a similar example:
<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
The CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
This is going to put our text right up on top of the image nicely, but it doesn't accomplish the box we want to achieve behind the text. For that, we can't use the h2, because that is a block level element and we need an inline element without an specific width. So, wrap the h2 inside of a span.
<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>
Then use that span to style and text:
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
For ideas on how to ensure proper spacing or to use jQuery to cleanup the code a bit by allowing you to remove some of the tags from the code and jQuery them back in, check the source.
Here's a fiddle I made with the sample code:
https://jsfiddle.net/un2p8gow/
I changed the notify-badge span into a div. I saw no reason it had to be a span.
I changed the position to relative. Edit - you could actually keep the attribute position: absolute; provided you know what you're doing with it. Guy in the comments was right.
You had the attribute right: 1.5rem; and I simply changed it to left because it was being inset in the opposite direction of your example.
You can tweak it further but in a vacuum this is what you want.
ETA: Thanks for all the help, everyone! These all worked beautifully. Thanks so much for your time!
I'm coding a newsletter (live preview here and my goal for it here) and am trying to get the navigation buttons ('Join Meet Learn Support') to sit about halfway down the logo. When I try top-margin in the navButtons class I'm not seeing any success. I suspect it's a display issue, but I'm not sure --- changing from inline to inline-block didn't really help.
<!DOCTYPE html>
<html>
<head>
<title>The Leaflet</title>
<style>
div
{
display: inline;
}
a
{
text-decoration: none;
}
p
{
text-align:left;
margin-left: 130px;
margin-right: 130px;
max-width: 600px;
}
#logo /* This sets the width for the New Leaf logo at the top. This should not change.*/
{
position:relative;
}
#navButtons
{
position:relative;
right:-240px;
}
#announcementImage
{
margin-left: 120px;
margin-right: 120px;
}
a.joinButton
{
margin-left:40%;
color:white;
background-color: #f7853e;
font-size: 30px;
}
a.navButton
{
color:#494541;
font-size: 22px;
}
</style>
</head>
<body>
<div id="logo"> <! --- Sets up the logo --->
<img src ="images/NLNewsletterLogo.png">
</div>
<div id="nav buttons"> <! --- Navigation Bar--->
<a class = "joinButton" href="url">Join</a>
<a class = "navButton" href="url"> Meet </a>
<a class = "navButton" href="url">Learn </a>
<a class = "navButton" href="url">Support </a>
</div>
<br>
<br>
<br>
<br>
<br>
<div id ="announcementImage"><! --- Lead Image-->
<img src="images/announcementGraphic.png">
</div>
<div id = "announcementText">
<p>Thrive Week is in full swing here at the Leaf. So far, we've had Sharon Perry, head of the State
College Area School District Career Center, help participants identify which of 34 traits,
including the special quality of woo, are strengths they employ in various settings so they can
work smarter. Then Anna Gokieli, owner of Tru Meditation and Yoga, got us staying present and
peaceful even in situations that often trigger stress. Will Snyder brought it home last night by
showing how making art and making money don't have to conflict.
Have a comment on a workshop you've attended or a session you'd like to see in our remaining
Design and Launch weeks? Galen would love to hear from you!</p>
</div>
</body>
Try this
#logo {
display: inline-block;
vertical-align: middle;
}
#nav {
display: inline-block;
vertical-align: middle;
width: 100%;
}
I think what your looking for is:
#logo {
vertical-align: middle;
}
Try adding bottom of something like 60px to div with id nav buttons.
Since this element is position: relative, it's placement can be controlled with left, right, top, bottom, like so:
#nav#buttons {
bottom: 50px;
}
Floating the logo left, and adding margin to the #nav will do the trick.
#logo { float: left; }
#nav {margin-top: 80px; width: 100%; display: inline-block; }
h1.title { clear: left; }
You're almost there. Inline-Block is what I'd use with absolute positioned nav, but you have a generic div {position:inline;} that applies to everything on the page inside of a div. You should be more specific for your logo and nav and just get rid of the generic styling by giving each a class like <div class="WHATEVER"> so you can target the div you want to work on.
Then try this:
#logo {
width: 240px;
display: inline-block;
#nav buttons {
margin: 0px 0px 0px 80px;
display: inline-block;
position: absolute;
top: 80px;}