So I build a neat little header thingy with some awesome icons.
For the user to change the input type of the search function, I'm trying to make it so that they can do so by:
(1) clicking the magnifying glass icon to open the search bar for typing (the search bar extends using :focus)
(2) once words are typed, the user then selects the magnifying glass again (which is at the end of the search bar).
(3) this extends a list of other icons signifying types of input (i.e. a music note for an audio file).
(4) once an icon is selected, it will replace the magnifying glass icon and submit. [this part I'm doing in JavaScript so not a huge deal.]
The biggest issue(s) are that the search bar won't stay focused when clicking on the icon and that I'm not even sure if I can click on the icon at all. Any and all help is appreciated.
Here's my HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="icomoon/style.css">
<title>outline</title>
</head>
<body>
<header class="header">
<ul class="navigation-bar">
<li class="nav-list">
<div class="nav-item" id="search">
<label class="search-label">
<input class="search-button"><span class="icon-search" id="icon-search-span-2"></span></input>
<button class="search-type"><span class="icon-search" id="icon-search-span"></span></button></label>
</div>
</li>
<li class="nav-list"><div class="nav-item" id="login"><button class="login-button"><span class="icon-user3"></span></button></div></li>
<li class="nav-list"><div class="nav-item" id="options"><button class="options-button"><span class="icon-menu2"></span></button></div></li>
</ul>
</header>
</body>
</html>
And my CSS:
html {
background-image: url("http://www.htmlhive.com/wp-content/uploads/2012/02/bluestripes.png");
}
container {
width:100%
}
body {
margin: 0 0 0 0;
margin-top: 10px;
width: 100%;
}
.header {
background-color:#0099CC;
width:100%;
height:50px;
}
.navigation-bar {
display:table;
list-style-type: none;
margin-top:0;
margin-left:auto;
margin-right:auto;
padding: 0;
width:700px;
}
.nav-item {
font-weight:bold;
color: #FFFFFF;
background-color:transparent;
display: inline;
text-align:left;
padding:4px;
text-decoration: none;
text-transform: uppercase;
}
.nav-list {
display:table-cell;
height:30px;
}
#search {
display:table-cell;
height:30px;
width:375px;
padding-right:10px;
}
#login {
display:table-cell;
height:30px;
width:175px;
}
#options {
display:table-cell;
height:30px;
width:75px;
}
#media (max-width:700px) {
.header {
height:120px;
}
.nav-list {
display:inline-block;
vertical-align: middle;
}
#search {
text-align: left;
width:645px;
padding-top:10px;
}
#login {
display:inline-block;
padding-top: 22px;
padding-bottom: 35px;
margin-top:35px;
height:0px;
width:485px;
text-align: center;
}
#options {
display:inline-block;
height:0px;
padding-top: 22px;
padding-bottom: 35px;
margin-top:35px;
width:152px;
text-align: center;
}
.options-button {
margin-top:-20px;
}
.search-button {
margin-left:60px;
margin-top:3px;
transition:all .8s;
}
.search-button:focus {
text-align: left;
padding-left:20px;
padding-right:40px;
width:465px;
}
#icon-search-span-2 ~ .search-button {
text-align: left;
padding-left:20px;
padding-right:40px;
width:465px;
}
.search-button:focus ~ .search-type {
margin-left:545px;
}
.search-button:focus ~ #icon-search-span-2 {
color:transparent;
}
.login-button {
margin-top:-20px;
margin-right:325px;
}
#icon-search-span {
padding:40px;
line-height:17px;
margin-left:0px;
margin-top:0px;
}
}
.options-button {
background-color: transparent;
border: 2px solid #FFFFFF;
border-radius:25px;
color:#FFFFFF;
font-size:20px;
padding:5px;
width:40px;
vertical-align: middle;
}
.search-button {
background-color: transparent;
border: 2px solid #FFFFFF;
border-radius:25px;
color:#FFFFFF;
font-size:20px;
margin-left:55px;
padding:5px;
width:26px;
vertical-align: middle;
transition:all .8s;
}
#media (min-width:700px) {
#search {
position:relative;
top:0px;
}
.search-button:focus {
text-align:left;
padding-left:20px;
padding-right:40px;
width:600px;
}
.search-button:focus ~ .search-type {
margin-top:-41px;
margin-left:680px;
transition:all .8s;
}
.search-button:focus ~ #icon-search-span-2 {
color:transparent;
}
#login {
position:absolute;
vertical-align: middle;
margin-left:40px;
}
#options {
position:absolute;
vertical-align: middle;
margin-left:90px;
}
.search-button:focus ~ #login {
}
}
.login-button {
background-color: transparent;
border: 2px solid #FFFFFF;
border-radius:25px;
color:#FFFFFF;
font-size:20px;
padding:5px;
width:40px;
vertical-align: middle;
}
#icon-search-span {
padding:7px;
line-height:17px;
margin-left:-5px;
margin-top:-15px;
vertical-align: middle;
}
.search-label {
position:absolute;
margin-left:5px;
}
.search-type {
position:absolute;
background-color: transparent;
border-radius:25px;
color:#FFFFFF;
font-size:20px;
margin-top:-41px;
border:2px transparent;
margin-left:-9999px;
pointer-events: none;
padding: 5px;
height:38px;
width:38px;
vertical-align: middle;
z-index: 100;
transition:all .8s;
}
#icon-search-span-2 {
position: absolute;
font-size:20px;
margin-left:-30px;
margin-top:12px;
transition:all .2s;
}
Clicking on something removes the focus from something else - by design. You can always use JavaScript to set the focus back to the input when the selection occurs.
You probably want to use a class name and control this using JavaScript instead of the :focus pseudo-class. Using jQuery for this really makes your JavaScript easier.
CSS:
.search-button.focus {
text-align:left;
padding-left:20px;
padding-right:40px;
width:600px;
}
JS:
$('.search-button').on('click', function() {
$(this).addClass('focus');
})
Related
For my Webpage I am trying to create a half moon shaped background. I am new to coding in general so my approach is probably all wrong, but I thought I could accomplish it with just editing my border radius. Do I have to do something majorly different to accomplish this? To be clear the background must be shaped into a half moon, so the exact opposite of what I am displaying with my code.
My code is formulated here:
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#600;626&display=swap');
/* */
body {
display:block;
margin:0px;
}
header {
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 10%;
height:50px;
}
li, a {
font-family: "Open Sans", sans-serif;
font-size:14px;
text-decoration:none;
font-weight:600px;
color:black;
}
.Nav_links {
list-style: none;
height:0px;
}
.Nav_links li {
display: inline-block;
padding: 0px 20px;
}
.Nav_links li, a:hover {
transition: 400ms;
color:grey;
}
#Login_nav {
display:block;
align-items:center;
height:15px;
}
.switchIconRotate {
transform-origin: center;
transition: 0.2s;
}
.fa-angle-down {
color:#6161F2
}
.iconUp .fa-solid {
transform-origin: center;
transform: rotate(180deg);
}
#Demobutton {
cursor:pointer;
background-color: #4EC843;
border-radius:34px;
border:none;
color: white;
width:130px;
height:35px;
font-family:"Open Sans", sans-serif;
font-weight:600px;
font-size:14px;
}
#Demobutton:hover {
background-color: #20D62C;
transition:800ms;
}
#Navbarline {
display:block;
width:80%;
opacity:15%;
height: 1px;
border: none;
border-top: 2px solid #ccc;
}
section:before {
content:'';
position:absolute;
height:100%;
width:75%;
background: linear-gradient(45deg, #1565FF, #9FC0ff);
border-top-right-radius: 510px;
border-bottom-right-radius: 510px;
margin-left:auto;
z-index:-1;
}
<body>
<section id="startingcolor">
<header>
<nav>
<ul class="Nav_links">
<li><a class="switch" href="#">Features <i class="fa-solid fa-angle-down switchIconRotate"></i></a></li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
<div id="Login_nav">
Login
<button id="Demobutton">Get demo</button>
</div>
</header>
<hr id="Navbarline"></hr>
</section>
<script src="/script.js"></script>
A picture of how it should look:
my problem
I just want help on how to make the footer and 'Google in different languages' fixed when I am hovering over the buttons.
I am trying to build it on my own (without referring to google homepage code in chrome dev tools), so I am unaware of what they did so as to fix the position of those two elements.
Here's my code:
<!DOCtype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css_stylesheets/stylesheet3.css"/>
<title>Google</title>
</head>
<body>
<div>
<header class="start">
<ul>
<li>Gmail</li>
<li>Images</li>
<li class="button">Sign in</li>
</ul>
</header>
<h1>
<img src="../Images/googlelogo.png" alt="Google logo"/>
<span>India</span>
</h1>
<form>
<input type="text"/><br>
<input type="submit" value="Google Search" id="text" name="search"/>
<input type="submit" value="I'm Feeling Lucky" name="search2"/>
</form>
<p>
Google.co.in offered in: HindiBanglaMalayalamMarathi
</p>
<footer>
<nav class="left">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
</nav>
<nav class="right">
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
<li>UseGoogle.com</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
My CSS stylesheet:
*
{
padding:0px;
margin: 0px;
}
body
{
font-family:Arial,sans-serif;
}
div:first-child
{
font-size:25px;
margin:auto;
text-align:center;
padding-top:0px;
}
div header ul
{
margin-right:0px;
text-align:right;
font-size: 17px;
}
body div header.start
{
padding-top:0px;
}
h1
{
display:inline-block;
font-size:20px;
}
h1 span
{
position:relative;
right: 63px;
bottom: 5px;
color:rgb(51,187,232);
font-size:small;
font-family: "Arial", sans-serif;
}
li.button a
{
display:inline-block;
outline:none;
background-color:rgb(10,125,247);
padding:9px;
border:solid 1px;
border-radius: 4px;
font-weight: bold;
color:#F5F5F5;
}
li.button a:hover
{
text-decoration:none;
outline:grey 3px;
box-shadow: inset 0 0 0px 1px #27496d;
}
li.button a:active
{
background-color:rgb(11,95,191);
border:inset 1px #C7C7C7;
}
a
{
text-decoration: none;
word-spacing:5px;
font-size: 15px;
color:grey;
}
a:hover
{
text-decoration:underline;
}
a::after
{
content: " ";
text-decoration: none;
}
input[type="text"]
{
margin:auto;
max-width:500px;
width:40%;
padding:10px;
}
input[type="text"]:visited
{
outline:blue;
}
input[type="submit"]
{
color:#727578;
border:solid 0px;
background-color:#E3E6E8;
font-weight:bold;
padding:10px;
margin: 30px 5px;
margin-bottom:0px;
}
input[type="submit"]:hover
{
border:ridge 2px;
color:black;
background-color:#f0f0f0;
}
input[type="submit"]:active
{
outline:blue;
}
p
{
margin:0px;
padding:0px;
font-size:14px;
position:relative;
top:15px;
}
p a::after
{
content: " ";
text-decoration: none;
}
p a:link
{
color: blue;
}
ul li
{
list-style-type: none;
display:inline;
word-spacing: 10px;
}
nav.left ul li
{
padding-top:2px;
position:relative;
right:590px;
top:50px;
}
nav.right ul li
{
position:relative;
left:500px;
top:0px;
}
footer nav.right ul
{
display:block;
background-color:#e3e3e3;
padding-top:20px;
margin-bottom:0px;
}
Let me tell you that I am very new to CSS3 elements. But I am pretty much familiar with most of the CSS ones.
I repeat, I don't need a complete debugging on this (unless required that is). Please help me on that issue (the text in bold at the beginning of this topic).
Your problem is input[type="submit"]:hover changing border-width from 0px to 2px, so total height and width of buttons increasing and moving below content for 4px.
Your solution is to change
input[type="submit"] {
...
border: solid 0px;
...
}
to
input[type="submit"] {
...
border: transparent solid 2px;
...
}
so I'm pretty new at HTML/CSS, and I'm trying to build a pretty basic homepage for myself that I could put on a business card. At the top of my page, I have a list of buttons (not bootstrap btw), and they are right now positioned absolutely.
The problem is that in my effort to make my website more flexible for different screen sizes, I don't want them to be that way.
However, deleting the position: absolute from their properties
(in my testing I deleted it from .button1)
causes an underline to magically appear.
Here's a gif of what happens when I delete the position:absolute:
https://gyazo.com/03e95bf02e822b544a39518b1923a7db
I will include my code here, but don't laugh at how awful I'm sure it is.
any help is good help!
HTML:
<body>
<h1 id="samsmith">Sam Smith</h1>
<div id="buttonbox">
<a href="https://www.smitty1ky.tumblr.com">
<h1 class="button1">
<div class="button1con">
Tumblr
</div>
</h1>
</a>
<a href="https://open.spotify.com/user/smitty1ky">
<h1 class="button2">
<div class="button2con">
spotify
</div>
</h1>
</a>
<a href="http://westwoodlitmag.com">
<h1 class="button3">
<div class="button3con">
WestWood
</div>
</h1>
</a>
</div>
<p id="welcome"> Welcome.</p>
<p id="student">Student at WCHS.</p>
<p id="inprogress">Coming Soon</p>
<h6 class="footer">© Samuel T Smith 2015</h6>
<script type="text/javascript">
</script>
</body>
CSS:
body {
background-image: url("http://gdurl.com/5oH1");
}
#samsmith {
font-family:Megrim;
color: rgb(236,228,217);
font-size: 100px;
margin:auto;
text-align:center;
right: 0;
left: 0;
padding-bottom: 5px;
}
.button1con {
background-image: url("http://gdurl.com/VjUJ");
margin:auto;
right:0;
left:0;
height: 35px;
width:100px;
padding-top:5;
}
.button1 {
position: absolute;
font-family:Megrim;
color: rgb(236,228,217);
font-size:25;
padding-top:0;
margin:auto;
text-align:center;
height:40px;
width:100px;
right:0;
left:0;
}
.button1:hover .button1con {background-image: url("http://gdurl.com/IWM6") }
.button1:hover {color: rgb(0,0,0); }
.button2con {
background-image: url("http://gdurl.com/VjUJ");
margin:auto;
right:0;
left:0;
height: 35px;
width:100px;
padding-top:5;
}
.button2 {
position:absolute;
font-family:Megrim;
color: rgb(236,228,217);
font-size:25;
padding-top:0;
margin:auto;
text-align:center;
height:40px;
width:100px;
right:250;
left:0;
}
.button2:hover .button2con {background-image: url("http://gdurl.com/IWM6") }
.button2:hover {color: rgb(0,0,0); }
.button3con {
background-image: url("http://gdurl.com/088x");
margin:auto;
right:0;
left:0;
height: 35px;
width:150px;
padding-top:5;
}
.button3 {
position:absolute;
font-family:Megrim;
color: rgb(236,228,217);
font-size:25;
padding-top:0;
margin:auto;
text-align:center;
height:40px;
width:100px;
right:0;
left:250;
}
.button3:hover .button3con {background-image: url("http://gdurl.com/DZaI") }
.button3:hover {color: rgb(0,0,0); }
a:link {
color: rgb(236,228,217);
}
a:visited {
color: rgb(236, 228, 217);
}
a:hover {
color: rgb(0,0,0);
background-color: rgb(236,228,217);
text-decoration: none;
}
a.buttons:link {
color: rgb(236,228,217);
text-decoration:none;
}
a.buttons:visited {
color: rgb(236,228,217);
text-decoration:none;
}
a.buttons:hover {
color: rgb(0,0,0);
text-decoration:none;
}
a.button1:link {
text-decoration:none;
}
p {
font-family:Megrim;
color: rgb(236,228,217)
}
p#welcome {
position: relative;
top:300;
font-size: 50px;
margin:auto;
text-align:center;
}
p#student {
position: relative;
top:300;
font-size: 30px;
margin:auto;
text-align:center;
}
#inprogress {
font-size: 75px;
position: relative;
margin:auto;
text-align:center;
letter-spacing: 30px;
}
.footer {
font-family: Megrim;
position: fixed;
font-size: 25px;
color: #282828;
bottom: -45;
right: 10;
}
#keyframes colors {
0% {color: white;}
50% {color: red;}
100% {color: white;}
}
#inprogress {
animation-name:colors;
animation-duration:5s;
animation-iteration-count:infinite;
}
#media only screen and (max-width: 1100px) {
#samsmith {
font-family:Megrim;
color: rgb(236,228,217);
font-size: 100px;
margin:auto;
text-align:center;
right: 0;
left: 0;
padding-bottom: 5px;
}
}
#media only screen and (max-width: 500px) {
#samsmith {
font-family:Megrim;
color: rgb(236,228,217);
font-size: 75px;
margin:auto;
text-align:center;
right: 0;
left: 0;
padding-bottom: 5px;
}
.button3con {
position:absolute;
background-image: url("http://gdurl.com/088x");
margin:auto;
right:0;
left:0;
height: 35px;
width:150px;
padding-top:5;
}
.button3 {
position:relative;
font-family:Megrim;
color: rgb(236,228,217);
font-size:25;
padding-top:0;
margin:auto;
text-align:center;
height:40px;
width:100px;
right:0;
left:-20;
top:75px;
}
.button2con {
position:absolute;
background-image: url("http://gdurl.com/VjUJ");
margin:auto;
right:0;
left:40;
height: 35px;
width:100px;
padding-top:5;
}
.button2 {
position:absolute;
font-family:Megrim;
color: rgb(236,228,217);
font-size:25;
padding-top:0;
margin:auto;
text-align:center;
height:40px;
width:100px;
right:250;
left:0;
}
.button1con {
position:absolute;
background-image: url("http://gdurl.com/VjUJ");
margin:auto;
right:0;
left:80;
height: 35px;
width:100px;
padding-top:5;
}
.button1 {
position:absolute;
font-family:Megrim;
color: rgb(236,228,217);
font-size:25;
padding-top:0;
margin:auto;
text-align:center;
height:40px;
width:100px;
right:0;
left:0;
}
}
edit 1: it's also worth mentioning that my id="buttonbox" has not been implemented at all aside from being given a name, so that is probably not the issue.
edit 2: created a jsfiddle but its super broken. unsure why, please advise http://jsfiddle.net/b8z9y9rr/
All browsers' default anchor style has text-decoration: underline. All of your links are underlined and your question should state instead: Why two of my links are not underlined?
The answer is: CSS text-decoration is not inherited by default and you nested a div with absolute position inside two of your anchors. Absolute positioning takes content our of flow and therefor it is not underlined.
The solution is: Apply your styles directly to anchors, not to child elements.
Talking with HTML:
.buttonbox {
position: relative;
text-align: center;
height: 100px;
}
.buttonbox a {
display: inline-block;
}
.button1 {
text-align: center;
}
.button2 {
position: absolute;
left: 0;
top: 50px;
}
.button3 {
position: absolute;
right: 0;
top: 50px;
}
<p>Use this:</p>
<div class="buttonbox">
<a class="button1" href="https://www.smitty1ky.tumblr.com">Tumblr</a>
<a class="button2" href="https://open.spotify.com/user/smitty1ky">spotify</a>
<a class="button3" href="http://westwoodlitmag.com">WestWood</a>
</div>
<p>NOT this:</p>
<div class="buttonbox">
<div class="button1">Tumblr</div>
<div class="button2">spotify</div>
<div class="button3">WestWood</div>
</div>
Also on Playground.
I'm building myself website in a class that I am taking at my school. I had to design what I wanted my site to look like, and now I have to build it.
I've found a stylesheet I really like, "Roboto Slab", and I have a background. I've got most of the main page done, actually.
I keep running into this one error when trying to format my text. I'm trying to make the text in the EXACT center of the web page, and it's a little lower than center. Not only that, but it gives the option to scroll left and right, and there is no reason that I can see for it to be doing that.
Here's the code for the site.
<html>
<head>
<title>MySite</title>
<meta name="description" content="My Site.">
<link rel="stylesheet" href="core.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>html,body,.do-you-even-flexbox{
height:100%;
} body {
margin:0;
font:normal 14px/1.2 "Roboto", Helvetica, Arial, sans-serif;
text-align:center;
background:#111 url('http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Alpamayo.jpg/1280px-Alpamayo.jpg') center top/ cover;
}::-moz-selection {
background:#2fdd11;
color:#fff;
}::selection {
background:#2fdd11;
color:#fff;
} a {
text-decoration:none;
}a:hover, a:active{
outline:none;
text-decoration:underline;
}a:focus {
outline:thin dotted;
}.do-you-even-flexbox,.container {
position:absolute;
top:50%;
width:100%;
height:1em;
margin-top: -.5em;
}.container {
padding:8px 20px 15px;
}h1, h2 {
font-family:"Roboto Slab",Helvetica,Arial,sans-serif;
margin:0;
color:#000;
font-weight:400;
font-size:96px;
}.social{
margin-top:30px;
}.social a {
background-color:#F5F7FA;
border-radius:35px;
margin:0 3px;
width:26px;
height:26px;
padding:16px;
display:inline-block;
-webkit-transition:background-color .6s ease;
transition:background-color .6s ease;
}.social a:hover,.social a:focus {
outline:none;
background-color:#FC6E51;
}.icon{
width:26px;
height:26px;
}.icon>path{
fill:#111;
}.links{
color:#333;
margin-top:30px;
}.links a{
display:inline-block;
padding:0 5px;
color:#000;
}.links {
color:#000;
}.links a:hover{
color:#000;
} #media (max-width: 660px) {
h1{
font-size:64px;
}h2 {
font-size:24px;
}
} #media (max-width: 460px) {
.do-you-even-flexbox {
display:none;
}.container{
margin:0 auto;
margin-top:4%;
}.links a{
display:block;
}h1{
font-size:48px;
}h2{
font-size:16px;
}
} #media (max-width: 350px) {
h1{
font-size:40px;
}
}
</style>;
</head>
<body>
<i class="do-you-even-flexbox"></i>
<div class="container">
<h1>Hi.</h1>
<h2>This is the website for my independent study.</h2>
<div class="links">
Example Page.
Another Page.
Another page! :D
Blah blah
</div>
</div>
</body>
</html>
What am I doing wrong with this? I've tried using the align: center methods, but none of those have worked for me.
!! EDIT !!
Fixed font size issue. Yay me. Just created a new section in the CSS code for H2.
You need to add a div for that center content, see html
<i class="do-you-even-flexbox"></i>
<div class="container">
<div class="box">
<h1>Hi.</h1>
<h2>This is the website for my independent study.</h2>
</div>
</div>
<div class="links"> Example Page.
Another Page.
Another page! :D
Blah blah
</div>
then you can center that div (I named it "box") with CSS using flex-box model
html, body, .do-you-even-flexbox {
height:100%;
width:100%;
overflow-x:hidden;
}
body {
margin:0;
font:normal 14px/1.2"Roboto", Helvetica, Arial, sans-serif;
text-align:center;
background:#111 url('http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Alpamayo.jpg/1280px-Alpamayo.jpg') center top/ cover;
}
::-moz-selection {
background:#2fdd11;
color:#fff;
}
::selection {
background:#2fdd11;
color:#fff;
}
a {
text-decoration:none;
}
a:hover, a:active {
outline:none;
text-decoration:underline;
}
a:focus {
outline:thin dotted;
}
.do-you-even-flexbox, .container {
position:relative;
top:0;
width:100%;
height:100%;
}
.container {
padding:8px 20px 15px;
display:flex;
align-content:center;
}
.box {
height:20%;
margin:auto
}
h1, h2 {
font-family:"Roboto Slab", Helvetica, Arial, sans-serif;
margin:0;
color:#000;
font-weight:400;
font-size:24px;
}
.social {
margin-top:30px;
}
.social a {
background-color:#F5F7FA;
border-radius:35px;
margin:0 3px;
width:26px;
height:26px;
padding:16px;
display:inline-block;
-webkit-transition:background-color .6s ease;
transition:background-color .6s ease;
}
.social a:hover, .social a:focus {
outline:none;
background-color:#FC6E51;
}
.icon {
width:26px;
height:26px;
}
.icon>path {
fill:#111;
}
.links {
color:#333;
margin-top:30px;
}
.links a {
display:inline-block;
padding:0 5px;
color:#000;
}
.links {
color:#000;
}
.links a:hover {
color:#000;
}
#media (max-width: 660px) {
h1 {
font-size:64px;
}
h2 {
font-size:24px;
}
}
#media (max-width: 460px) {
.do-you-even-flexbox {
display:none;
}
.container {
margin:0 auto;
margin-top:4%;
}
.links a {
display:block;
}
h1 {
font-size:48px;
}
h2 {
font-size:16px;
}
}
#media (max-width: 350px) {
h1 {
font-size:40px;
}
}
I made your heading tags smalles so you can see the effect, but you will need to adjust that to your needs and also you may need to adjust box height, but you'll get the idea. See fiddle here
h1 and h2 have the same size because your CSS file is included before the <style> tag, which defines h1 and h2 to have font-size: 96px. Just move the line
<link rel="stylesheet" href="core.css">
after <style> ... </style>.
I edited your code in a fiddle. I took out a lot of your, already defined code, but you can simply add that back in there. I think this will give you a good start of what you want to accomplish.
JSFiddle
HTML:
<div id="wrapper">
<div id="container">
<div id="centerText">
<h1>Hi.</h1>
<h1>This is the website for my independent study.</h1>
</div>
</div>
</div>
<footer>
<div class="footer">
Example Page.
Another Page.
Another page! :D
Blah blah
</div>
</footer>
CSS:
html {
background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Alpamayo.jpg/1280px-Alpamayo.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
h1 {
padding: 0;
margin: 0;
}
body {
overflow-x: hidden;
}
footer {
bottom: 0;
position: fixed;
width: 100%;
}
.footer {
height: 25px;
margin: auto;
width: 400px;
text-align:center;
padding: 10px;
color:#ffffff;
}
#wrapper {
height: 200px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: tahoma;
font-size: 8pt;
font-weight: bold;
}
#container {
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
height: 100%;
position: relative;
}
#centerText {
position: absolute;
width: 100%;
height: 20px;
top: 50%;
margin-top: -10px;
text-align: center;
}
After a long time of trying things I still not have come any closer, I do not know how to make the menu for this website (found here) I have appear in IE7.
I am using a css image replacement technique to achieve this result, currently I have a html menu with links and am replacing the links with images in css.
Could you please help me out thank you.
Here is the CSS
'#charset "utf-8";
/* CSS Reset */
/***** main styles ******/
body {
background-image:url(images/bg-top.jpg);
background-position:top center;
background-repeat:no-repeat;
background-color:#222121;
}
hr {
border : 0;
height : 2px;
background: url(images/line.png) 0 0 repeat-x;
margin : 1em 0;
}
p, h1, h2, h3, li {
font-family:Arial, Helvetica, sans-serif;
color:#b1b0b0;
}
h2 {
margin-bottom:40px;
}
h3 {
margin-top:30px;
margin-bottom:20px;
font-size:138.5%;
color:#fafafa;
text-transform:uppercase;
}
.body_text {
line-height:1.6em;
font-family: 'Arial Narrow', sans-serif;
font-size:114%;
}
input {
display:block;
border-top:2px solid #171717;
border-left:2px solid #171717;
border-right:2px solid #999;
border-bottom:2px solid #999;
background-color:#333;
width:200px;
margin-top:7px;
margin-bottom:10px;
}
textarea {
display:block;
border-top:2px solid #171717;
border-left:2px solid #171717;
border-right:2px solid #999;
border-bottom:2px solid #999;
background-color:#333;
width:300px;
height:120px;
margin-top:7px;
color:#CCC;
}
label {
color:#b1b0b0;
}
#submit {
width:100px;
border-top:2px solid #171717;
border-left:2px solid #171717;
border-right:2px solid #171717;
border-bottom:2px solid #171717;
color:#FFF;
}
/*** header styles ********/
#header_container {
margin:30px auto 0px auto;
width:860px;
height:110px;
background-image:url(images/line.png);
background-repeat:repeat-x;
background-position:0px 88px;
}
#menu {
position:relative;
left:527px;
top:-8px;
}
#menu li {
display:inline;
margin-right:20px;
}
#menu li.last {
display:inline;
margin-right:0px;
}
.menu_link1:link, .menu_link1:visited {
display:inline-block;
text-indent:-3000px;
width:45px;
height:16px;
background-image:url(images/home.png);
}
.menu_link1:active, .menu_link1:hover {
background-image:url(images/home_highlight.png);
}
.menu_link2:link, .menu_link2:visited {
display:inline-block;
text-indent:-3000px;
width:92px;
height:16px;
background-image:url(images/portfolio.png);
}
.menu_link2:hover, .menu_link2:active {
background-image:url(images/portfolio_highlight.png);
}
.menu_link3:link, .menu_link3:visited {
display:inline-block;
text-indent:-3000px;
width:45px;
height:16px;
background-image:url(images/blog.png);
}
.menu_link3:hover, .menu_link3:active {
background-image:url(images/blog_highlight.png);
}
.menu_link4:link, .menu_link4:visited {
display:inline-block;
text-indent:-3000px;
width:78px;
height:16px;
background-image:url(images/contact.png);
}
.menu_link4:active, .menu_link4:hover {
background-image:url(images/contact_highlight.png);
}
.active1 {
display:inline-block;
text-indent:-3000px;
width:45px;
height:16px;
background-image:url(images/home_highlight.png);
}
.active2 {
display:inline-block;
text-indent:-3000px;
width:92px;
height:16px;
background-image:url(images/portfolio_highlight.png);
}
.active3 {
display:inline-block;
text-indent:-3000px;
width:45px;
height:16px;
background-image:url(images/blog_highlight.png);
}
.active4 {
display:inline-block;
text-indent:-3000px;
width:78px;
height:16px;
background-image:url(images/contact_highlight.png);
}`
EDIT
Fixed the problem by adding font-size: 0px;
line-height: 0px; to the list-item.
But the background image is not centered and this only effects IE7
After looking through the menu with IE8's compatibility mode and its developer tools, there is an error with text-indent: -3000px; I have no idea what it is, but removing this makes your menu display as intended.