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:
Related
I am new to the front-end designing world and for my webpage I want to import an SVG file to display my company logo. I used Figma in order to export my design as an SVG file, however it doesn't appear to be showing up on my live server.
I used Codepen to display my SVG, and Codepen does display my SVG. But whenever I start up the Live Server, all I see is my alternative logo text and a logo pictogram. I tried renaming my SVG file to make sure the src location is right, but nothing seems to work.
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#600;626&display=swap');
body {
display:block;
margin:8px;
}
li, a {
font-family: "Open Sans", sans-serif;
font-size:14px;
text-decoration:none;
font-weight:600px;
color:black;
}
header {
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 10%;
}
.Nav_links {
list-style: none;
}
.Nav_links li {
display: inline-block;
padding: 0px 20px;
}
.Nav_links li, a:hover {
transition: 400ms;
color:grey;
}
#Login_nav {
display:flex;
align-items:center;
gap:1rem;
}
.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 {
width:80%;
border-width:1.5px;
opacity:15%;
}
<body>
<header>
<img class="logo" src="/logo.svg" alt="logo">
<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>
<script src="/script.js"></script>
</body>
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 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');
})
I'm trying to create a fixed header that sticks to the top on scroll. I have one wrapper (#topbarwrapper) that should fit 100% across the entire browser. I also have another div wrapper (.topbarcontentWRAPPER ) inside the(#topbarwrapper) which includes logo and navigation (#mainNav). One floats to the left and the other floats to the right. They both float as they should but it seems as if when the browser is resized, the divs move. I want the two divs floating inside to be centered with the entire page. The layout is responsive so the body width is 90%. I spent several days trying to figure this out including research. Any help would be appreciated.
Ideal goal is to have the header with 100% width fixed and centered.
Layout View:
http://s30.postimg.org/so036qarl/Screen_shot_2014_03_10_at_1_53_42_AM.jpg
HTML:
<body>
<div id="topbarWRAPPER">
<div class="topbarcontentWRAPPER">
<nav id="mainNav" role="navigation">
<h2 class="hidden">Main Site Navigation</h2>
<?php if ($this->countModules('nav')): ?>
<jdoc:include type="modules" name="nav" />
<?php endif; ?>
</nav>
</div>
</div>
<div id="mobilelogo"></div>
<div id="imageshow">
</div>
<div class="wrap">
<div class="miscellaneousRow">
</div>
<div class="search">
</div>
</div>
<section><h2 class="hidden">Recent News</h2>
<article id="recentNews">
<jdoc:include type="component" />
</article>
</section>
<aside>
<div class="sideBOX"> <section>
<h1 class="sideHeader">MAILING LIST</h1>
<div class="signup">
</section> </div>
<div class="sideBOX"> <section>
</section></div>
<div class="tabviewTABS"> <section>
</section>
</div> </aside>
<footer id="mainbottomFooter">
<div class="footerFLOATLEFT">
<h1 class="hidden">Footer</h1>
<div class="floatone">
</div>
</div>
</footer>
<div class="secondbottomFooter"> <div class="secondbottomfooterRight">
<nav id="sidenav">
<ul>
<li>
l
</li>
<li>
f
</li>
<li>
g
</li>
<li>
x
</li>
<li>
!
</li>
</ul>
</nav>
</div>
<div class="secondbottomfooterLeft"> content</a></div>
</div>
</html>
body {
width:90%;
margin:0 auto;
min-width:1024px;
max-width:1580px;
}
.latest-post clearfix{
display:hidden;}
.imageshow {
position:relative;
width: 100%;
}
.blog-readmore{
font-size: 24px;
display: inline;
width: 180px;
text-transform:uppercase;
margin-top:20px;
}
.blog-readmore a:link{
font-family: arial;
color: #690000;
}
.blog-readmore a:visited{
color: #690000;
}
.blog-readmore a:hover{
color: #eee;
}
#topbarWRAPPER{
position:fixed;
left: 0px;
right: 0px;
background-color:#000;
z-index:1000;
text-align:center;
}
.topbarcontentWRAPPER {
display:block;
height:50px;
background-color: #1E1E1E;
width: 90%;
margin: 0 auto;
}
#topbarLOGO
{
background-image:url("http://strip2.png");
background-repeat:no-repeat;
display:block;
float:left;
height:50px;
width:250px;
text-indent:-9999px;
}
aside{
background-color: #d6d6d6;
width: 29.1%;
padding-left:1%;
height: 100%;
float: right;
overflow: none;
color: #fff;
font-size:10px;
padding-bottom:1000em;
margin-bottom:-1000em
}
/* Blog content */
#recentNews {
width: 65.1%;
float: left;
padding-right:2%;
padding-left:2%;
padding-bottom:2%;
background-color:#fff;
padding-bottom:1000em;
margin-bottom:-1000em;
}
.wrap{ overflow:hidden;
background-color:#fff;
}
/* ~~ Bottom footer ~~ */
#mainbottomFooter{
background-color:#000;
position:relative;
height: 300px;
clear: both;
padding:15px 0;
min-width:100%;
}
.footerFLOATLEFT li{
list-style-type: none;
padding-bottom: 1em;
padding-top: 1em;
}
.footerFLOATLEFT a:link{
font-size:12px;
color: #555555;
text-transform:uppercase;}
.footerFLOATLEFT a:visited {
font-size:12px;
color: #555555;
text-transform:uppercase;}
.footerFLOATLEFT a:hover {
font-size:12px;
color: #690000;
text-transform:uppercase;}
/* ~~ P~~ */
p{
font-size: 17px;
color: #000;
line-height:140%;
font-family: 'HelveticaNeue';
padding-left: 1%;
padding-right:1%;
font-weight:bold;
}
h3 {
margin-bottom: 0px;
font-size: 2em;
color: #690000;
font-family: 'Lato', sans-serif;
font-weight:300;
text-transform:uppercase;
padding-bottom:1em;
padding-top:1em;
}
.floatone {
float:left;
padding-right: 4em;
padding-top: 4em;
height: 100%;}
.floattwo {
float:left;
height: 100%;
padding: 4em;}
.floatthree {
float:left;
height: 100%;
padding: 4em;}
.floatfour {
float:left;
height: 100%;
padding: 4em;}
.signup {
width:100%;}
.footerFLOATLEFT {
width:100%;
float:left;
}
.secondbottomFooter {
width: 100%;
height:40px;
background-color:#690000;
border-top:1px solid #222;
border-bottom:1px solid #222;
color: #fff;
font-size: 12px;
padding-top:2em;
padding-bottom:2em;
text-align:right;
}
h2 {font-face:arial;
font-size:12px;
color: #fff;
padding-top: 1em;
padding-bottom: 1em;}
#sidenav {
}
#sidenav li {
display:inline;
}
#sidenav a:link{
font-family: 'socialicoregular', Arial, sans-serif;
font-size:5em;
color: #eee;
text-decoration:none;
}
#sidenav a:visited{
color: #fff;
text-decoration:none;
}
#sidenav a:hover{
color: #690000;
text-decoration:none;
}
.miscellaneousRow {
background-color: #000;
width: 100%;
height:100px;
position:relative;
}
.twitterFeed {float:left;
padding-top: 10px;
padding-bottom: 10px;
width: 65.1%;
}
.search {
float: right;
padding:2%;
width: 26%;}
#mainNav {
float:right;
}
.sideDivider {
background-color:#222;
height:auto;
margin-bottom:10%;
padding-top:10%;
padding-bottom:5%;
padding-left:5%;
padding-right:5%;
}
.tabviewTABS {
background-color:#222;
height:auto;
margin-bottom:20%;
padding-top:10%;
padding-bottom:5%;
padding-left:5%;
padding-right:5%;
}
.sideBOX {
background-color:#222;
height:auto;
margin-bottom:10%;
padding-top:10%;
padding-bottom:5%;
padding-left:5%;
padding-right:5%;
text-align:center;
}
.soundcloud {
background-color:#222;
position:relative;
height:auto;
clear: both;
padding:15px 0;
min-width:100%;
}
.soundcloudtitle {
font-family: 'Droid Serif', serif;
color: #fff;
font-size: 2em;
text-align:right;
text-transform: uppercase;
margin-bottom: 1em;
border-bottom: 5px solid #690000;
}
.secondbottomfooterRight p{
padding-right:3em;
padding-bottom:1em;
}
.hidden
{
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
You're setting the left and right positions of your topbarWRAPPER to 0px instead of 5%.
See this fiddle.
EDIT:
I see what you mean. I've updated the fiddle. It should be what you need.
EDIT #2:
Alrighty. Forgive me, I didn't notice this earlier. You've assigned the body a width in percent but a min and max width in pixels. If you remove the min and max widths you'll see the behavior you're looking for, but what I think you should do is assign the 70% width to .wrap and give it a margin:0 auto;
THis is my first time commenting on this website. I've found this site to be helpful in the past but now I can't seem to find a solution to my problem to I would like for someone to answer me directly.
I have webpage using where I have a fixed header and footer and absolute positioned panel where the content goes. My problem is, when I resize the browser the header content stays in the fixed position> Now that is obvious, none the less I would like to have it move with the scroll of the rest of the page. When I set the header to relative, it does work to my liking, but then the header nav links go under my lowerband and z-indexing wouldn't help. The same goes for the footer.
Also for the content panel, when I set the body overflow to auto or show, the content panel when I scroll, leaves a whitespace to the right.
Can anyone help me with this problem? It is very frustrating.
And one more thing, can anyone help me with code to use for css for my ux-header-upperbandcontent and lowebandcontent?. I would like to place the logo and other text in the upperband and the nav links in the lowerband but using a content wrapper.
Thanks. Here is my code for css and html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="content/style.css">
</head>
<body>
<!--BACKGROUND-->
<!--HOME-->
<div id="home">
</div>
<!--ABOUT-->
<div id="about" class="panel">
<div class="content">
<p>about content</p>
</div>
</div>
<!--SERVICES-->
<div id="services" class="panel">
<div class="content">
<p>services content</p>
</div>
</div>
<!--CONTACT-->
<div id="contact" class="panel">
<div class="content">
<p>contact content</p>
</div>
</div>
<!--HEADER-->
<div id="ux-header">
<div id="ux-header" class="upperband">
</div>
<div id="ux-header" class="lowerband">
</div>
<div id="ux-header">
<ul id="ux-header" class="dev-navigation">
<li><a id="dev-home" href="#home">HOME</a></li>
<li><a id="dev-services" href="#services">SERVICES</a></li>
<li><a id="dev-about" href="#about">ABOUT</a></li>
<li><a id="dev-contact" href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
<!--FOOTER-->
<div id="ux-footer">
</div>
</body>
</html>
body {
min-width:980px;
margin: 0px;
color: rgb(51, 51, 51);
line-height: 30px;
font-family: "Segoe UI","Helvetica",Garuda,Arial,sans-serif;
font-size: 0.81em;
cursor: default;
overflow:hidden;
}
a {
color: rgb(0, 68, 204);
text-decoration: none;
cursor: pointer;
}
img {
border:currentColor;
border-image: none;
max-width: 100%;
}
ul {
margin: 0px;
padding: 0px;
}
ol {
margin: 0px;
padding: 0px;
}
li {
margin: 0px;
padding: 0px;
}
p {
margin: 0px;
padding: 0px;
}
ul {
margin-bottom: 0px;
}
ul li {
margin-bottom: 0px;
margin-left: 15px;
}
ol li {
margin-bottom: 2px;
margin-left: 18px;
}
p {
margin-bottom: 10px;
}
h1 {
margin: 0px;
color:rgb(104, 33, 122);
font-weight: normal;
}
h2 {
margin: 0px;
color:rgb(104, 33, 122);
font-weight: normal;
}
h3 {
margin: 0px;
color:rgb(104, 33, 122);
font-weight: normal;
}
h1 {
line-height: 42px;
font-size: 2.77em;
margin-bottom: 20px;
}
h1.error {
margin-top: 50px;
}
h2 {
line-height: 34px;
font-size: 2.16em;
margin-bottom: 20px;
}
h3 {
line-height: 24px;
font-family: "Segoe UI Semibold","Segoe UI",Tahoma,"Microsoft Sans Serif",Verdana,sans-serif;
font-size: 1.39em;
margin-bottom: 20px;
}
h4 {
margin: 0px 0px 10px;
color: rgb(51, 51, 51);
line-height: 20px;
font-family: "Segoe UI Semibold","Segoe UI",Tahoma,"Microsoft Sans Serif",Verdana,sans-serif;
font-size: 1.08em;
}
#ux-header.dev-navigation {
margin-top:60px;
width:300px;
z-index:3;
left:70%;
white-space:nowrap;
}
#ux-header .dev-navigation li{
padding-right:10px;
margin:10px;
}
#ux-header ul.dev-navigation li{
display:inline;
}
#ux-header.dev-navigation li a {
text-transform:uppercase;
font-size:12px;
padding-bottom:0px;
margin-bottom:0px;
}
#ux-header.dev-navigation li a:hover {
padding-bottom:3px;
border-bottom-style:solid;
border-bottom-color:#4169E1;
border-bottom-width:10px;
}
#ux-header {
position:fixed;
top:0px;
z-index:2000;
width:100%;
overflow:hidden;
}
#ux-header a {
color:#FFF;
}
#ux-header ul {
margin:0px;
}
#ux-header li {
margin:0px;
}
#ux-header .upperband{
height:60px;
background-color:#000;
}
#ux-header.upperbandcontent {
margin:0px, auto;
padding:0px, 10px;
width:100%;
max-width:980px;
}
#ux-header .lowerband {
top:60px;
height:30px;
background-color:#F42;
}
#ux-header.lowerbandcontent {
position:absolute;
margin:0px, 0px, 5px, 0px;
padding:0px, 10px;
width:100%;
max-width:980px;
}
#ux-footer {
position:fixed;
bottom:0px;
width:100%;
height:50px;
background-color:#000;
border-top-style:solid;
border-top-width:8px;
border-top-color:#0000FF;
z-index:2000;
}
.content {
font-size:12px;
padding:3px;
line-height:10px;
color:#fff;
display:inline-block;
margin:3px 0px;
z-index:-1;
}
.content h2{
font-size: 30px;
padding: 10px 0px 20px 0px;
margin-top: 52px;
color: #fff;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content p{
font-size: 12px;
padding: 3px;
line-height: 16px;
color: #fff;
display: inline-block;
margin: 3px 0px;
}
.panel {
position:absolute;
min-width:100%;
min-height:80%;
margin-top:90px;
right:2000px;
background-color:#FF00FF;
z-index:-2;
transition:right 2s;
overflow:hidden;
}
.panel:target {
background-color:#F6A600;
right:0;
}
#home:target ~ #ux-header .dev-navigation #dev-home,
#about:target ~ #ux-header .dev-navigation #dev-about,
#services:target ~ #ux-header .dev-navigation #dev-services,
#contact:target ~ #ux-header .dev-navigation #dev-contact,{
color:#000;
}
Is that what you are looking for?
http://jsfiddle.net/cancerian73/huawb/
#media screen and (max-width: 400px) {
/* grid4 */
.col {
width: 100% !important;
margin-left: 0 !important;
clear: none !important;
}
}