I'm making this site and there's a blank space between the image and the table I want to put, i tried to find if there was a code making that space but found nothing. where can be the problem??
Thanks!
<style>
body {
padding: 0;
margin: 0;
background-color: #F0F0F0;
}
#nav {
font-family:sans-serif;
background-color:#F0F0F0;
position: fixed;
top: 0;
width: 100%;
color: #383838;
height: 27px;
text-align: center;
padding-top: 9px;
z-index: 999;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 0px 0px #FFA600;
-moz-box-shadow: 0px 0px 0px 0px ##FFA600;
box-shadow: 0px 0px 0px 1px #FFA600;
}
#nav a {
font-size: 14px;
padding-left: 70px;
padding-right: 50px;
color: #383838;
text-decoration: none;
z-index: 999;
}
#nav a:hover {
color: #FCC772;
z-index: 999;
}
header{
position: relative;
width: 390px;
top: 80px;
padding-bottom:20px;
z-index: 1;
margin:0 auto;
}
#hd2{
padding-top:90px;
position: relative;
padding-bottom:15px;
}
.wbox {
position: relative;
top: -370px;
opacity: 0.6;
width:750px;
height:280px;
z-index: 1;
margin:0 auto;
}
#textini {
top: -570px;
height: 150px;
position: relative;
padding-bottom:0px;
margin:0 auto;
z-index: 3;
}
#textini p{
padding-bottom:0px;
padding-top:0px;
font-family:sans-serif;
text-align: center;
font-weight:normal;
font-size: 28px;
z-index: 3;
color:#383838;
}
.s3{
margin-top:50px;
margin:0 auto;
position: relative;
}
.font_8{
font-family:sans-serif;
color:#ffffff;
font-size:18px;
font-weight:normal;
margin:0 auto;
text-align:center;
}
footer {
background-color:rgba(56, 56, 56, 1);
clear:both;
padding:30px;
border-top: 0px solid rgba(146, 146, 146, 1);
border-bottom: 0px solid rgba(146, 146, 146, 1);
}
</style>
</head>
<html>
<head>
<meta charset="UTF-8">
<title>Números & Vírgulas</title>
<link rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<div id="page-wrap">
<div id="nav" style="overflow:hidden">
INÍCIO
ATUAÇÃO
QUEM SOMOS
CONTATOS
</div>
<header>
<img src="http://i61.tinypic.com/2vjwxv5.png" style="width:100%;height:100%" alt="" />
</header>
<div id="hd2">
<img src="http://i61.tinypic.com/fn4n6q.png"; style="width:100%;height:424px"; alt="" />
</div>
<div class="wbox">
<img src="http://i60.tinypic.com/2ypel9c.png" style="width:100%; height:100%" alt="" />
</div>
<div id="textini">
<p>Os Números constituem uma linguagem universal mas <br> uma Vírgula pode mudar tudo.</p>
<p style="margin-left:350px;font-size:15px">Por: Dr. Sérgio Rosa</p>
</div>
<table style="width:100%:">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</div>
</table>
<div style="width:330px; top:55px;" class="s3">
<p style="line-height: 1.6em;" class="font_8"><span style="line-height:1.6em;">© 2013 Números & Vírgulas</span></p>
</div>
<!--
<div class="in" style="width:0 auto; padding-left:0px; right:300px;">
<a href="https://www.linkedin.com/company/n%C3%BAmeros-&-v%C3%ADrgulas---contabilidade-gest%C3%A3o-e-forma%C3%A7%C3%A3o-unipessoal-lda-?trk=top_nav_home">
<img src="http://i59.tinypic.com/jphpix.png" alt=" " style="width:24px;height:24px;margin:0 auto;float:right">
</a>
</div>
-->
<footer>
<br>
</footer>
</body>
</html>
your space is taken up by <div class='wbox'></div> and <div class='textini'></div> they have a set height but you are positioning them by using negative top values.
Here is the site without the 2 elements fixed
So you are going to need to restructure your site.
Try to change relative position to absolute for .wbox & #textini : Demo
CSS:
.wbox {
position: absolute;
top: -370px;
opacity: 0.6;
width:750px;
height:280px;
z-index: 1;
margin:0 auto;
}
#textini {
top: -570px;
height: 150px;
position: absolute;
padding-bottom:0px;
margin:0 auto;
z-index: 3;
}
You can fix the issue by updating your css with the below one
#textini {
top: -215px;
height: 150px;
position: relative;
padding-bottom: 0px;
margin: 0 auto;
z-index: 3;
}
.wbox {
position: relative;
top: -370px;
opacity: 0.6;
width: 750px;
height: 280px;
z-index: 1;
margin: 0 auto;
margin-bottom: -370px;
}
Related
I am creating a profile page and on that page there is a div which spans 100 percent of the page. After I set the height and margins and refresh page there is a colored div, the height that I want with no white space. When I try to do the same for my end of page and set overflow hidden, instead of the page ending there,I am able to scroll and see the page continuing. My goal is to have all my content in between the whitespace of top and bottom divs. This is not homework, it is my personal project.
Thank You in advance for your help and time.
Attached is my html code:
*{
margin:0px;
padding:0px;
}
.blue{
width: 100%;
height:70px;
text-decoration: none;
overflow-x: hidden;
background-color: rgb(208, 210, 255);
color: rgb(190,91,93);
position:absolute;
}
.vanilla{
position: absolute;
background-color: rgb(250,0,0);
color:black;
width:100%;
height:100px;
text-decoration:none;
overflow:hidden;
top:600px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Practice</title>
</head>
<body>
<div class="blue">
</div>
<div class="vanilla">
</div>
</body>
</html>
The following is what I originally attempted:
#body2{
background-color: rgb(255,253,208);
overflow-x: hidden;
}
#me{
position: absolute;
top: 150px;
left: 435px;
}
.section1{
width: 100%;
height:70px;
text-decoration: none;
overflow: hidden;
background-color: rgb(208, 210, 255);
color: rgb(190,91,93);
position:absolute;
}
:hover{
color: white;
}
#about{
position: relative;
left: 535px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
}
#age{
position: relative;
top: 70px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
}
#education{
position: relative;
top: 440px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
padding-bottom: 0px;
}
#languages{
position: relative;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 10px;
bottom: 40px;
line-height: 36px;
}
#languages ul li {
list-style-type:none;
}
#comp_lang{
position: relative;
bottom: 380px;
left: 815px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
line-height: 36px;
}
#comp_lang ul li {
list-style-type:none;
}
#comp_lang2{
position: relative;
top: -245px;
left: 870px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
}
#comp_lang2 ul li{
list-style-type: none;
}
.remarks{
margin: 0px;
width: 165px;
height: 200 px;
}
#endgame{
width: 100%;
height:70px;
text-decoration: none;
overflow: hidden;
background-color: rgb(208, 210, 255);
color: rgb(190,91,93);
position:absolute;
z-index: -2;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>About Me</title>
<link rel="stylesheet" href="profile.css">
</head>
<body id="body2">
<div id="me">
<img src="profile2.jpg"alt="Hello" height=500px;>
</div>
<div class="section1">
<h1 id="about"><b>Who is Intisar?</b></h1>
</div>
<div id="age">
<h2> Age : </h2>
<h3> I am 23 years old!</h3>
</div>
<div id="education">
<h2> Education : </h2>
<h3>
I am a high-school graduate.<br>
I am in my third year<br>
at something College.<br>
I am studying<br>
Software Development and Design.<br>
Interest in Web Development and Design<br>
</h3>
</div>
<div id="languages">
<h2> Trilingual in :</h2>
<ul>
<li>English</li>
<li>Bengali</li>
<li>Spanish</li>
</ul>
</div>
<div id="comp_lang">
<h2> Computer Lanuguages I am competent in : <br> </h2>
<ul>
<li>Python</li>
<li>C++</li>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>SQL</li>
<li>PHP</li>
</ul>
</div>
<div id="comp_lang2">
<h2> Lanuguages and software in Progress : </h2>
<ul>
<li>Wordpress</li>
<li>Ruby</li>
</ul>
</div>
<div class="endgame">
<h3>Something</h3>
</div>
</body>
</html>
You can achieve this by css grid, the current approach is not very good.
I wrote a little bit of code for you. If you don't understand it, let me know.
https://www.w3schools.com/cssref/pr_grid-template-rows.asp
It might be tricky for you if you are not fimiliar with grid, so let me know if you need help.
Preview here
<div class="parent">
<header><h1>Header</h1></header>
<main>
<img src="https://images.unsplash.com/photo-1605032659978-a5bd04094a16?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max">
<img src="https://images.unsplash.com/photo-1603943817715-f50e0a2c413a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max">
<img src="https://images.unsplash.com/photo-1605910470315-abac78c52d73?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max">
</main>
<footer><h1>Footer Content</h1></footer>
</div>
<style>
*{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
overflow: hidden;
}
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
width: 100vw;
}
main{
overflow:auto;
}
// css below this is just for styling
footer, header, main{
padding: 1rem;
text-align: center;
}
footer{
background-color:red;
}
header{
background-color:yellow
}
</style>
Use the Below Code to keep everything within the view-port and work on whitespace area .
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
body{
height:100vh;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.blue{
width: 100%;
height:70px;
text-decoration: none;
overflow-x: hidden;
background-color: rgb(208, 210, 255);
color: rgb(190,91,93);
}
.vanilla{
background-color: rgb(250,0,0);
color:black;
width:100%;
height:100px;
text-decoration:none;
overflow:hidden;
top:600px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Practice</title>
</head>
<body>
<div class="blue">
</div>
<div class="vanilla">
</div>
</body>
</html>
I want to make a round clickable profile image which will a have button on the bottom . i can do that for a normal image but when it comes to rounded image, the button is taking the size of the container in which this image and button are available .
thanks
.img-circle {
border-radius: 50%;
}
<div class="img-thumbnail img-circle">
<div style="position: relative; padding: 0; cursor: pointer;" type="file">
<img class="img-circle" style="width: 140px; height: 140px;" >
<span style="position: absolute; color: red; bottom: 20px; left: 40px;">UPLOAD</span>
</div>
</div>
ok. see here. i think i understood what you wanted to achieve .
let me know if it helps
NOTE : the img.img-circle {background:black; } is just for example purpose so you can see where the img should be. in your code you don't have to include this
.img-circle {
border-radius: 50%;
}
img.img-circle {
background:black;
}
span {
left:0;
text-align:center;
width:100%;
background:rgba(255,255,255,0.5);
bottom:0;
padding:20px 0;
}
.img-thumbnail {
border-radius: 0;
display:inline-block;
background:#dbdbdb;
padding:20px;
}
.img-thumbnail > div {
display:inline-block;
overflow: hidden;
height: 140px;
border: 5px solid #fff;
-webkit-box-shadow: 0 2px 0 2px #333;
box-shadow: 0 2px 0 2px #333;
border-radius:50%;
}
<div class="img-thumbnail img-circle">
<div style="position: relative; padding: 0; cursor: pointer;" type="file">
<img class="img-circle" style="width: 140px; height: 140px;" >
<span style="position: absolute; color: red; ">UPLOAD</span>
</div>
</div>
<div class="img-thumbnail img-circle">
<div style=" position: relative;padding: 0; cursor: pointer;" type="file">
<img class="img-circle" style="width: 140px; height: 140px;" >
<span style="position: absolute; color: red; ">UPLOAD</span>
</div>
</div>
you can try this one:
.img-circle {
border-radius: 50%;
}
.img-circle {
background:green;
}
span {
text-align:center;
width:100%;
background:white;
bottom:0;
padding:20px 0;
opacity:.5
}
.img-thumbnail {
display:inline-block;
overflow: hidden;
height: 140px;
border: 5px solid #fff;
box-shadow: 0 2px 0 2px #dbdbdb;
}
Here Updated Fiddle
In my title I am trying to have two images on both sides of the text. I have tried a few methods, but none have worked. Here is my live website. I would like to have the icons also automatically resize based on the window size. Any help is greatly appreciated.
Related code here:
<img style="width: 15px; height: 15px;" align="left" src="favicon.ico">
<p align="middle" class="rusty"> RedstoneGaming </p>
<img style="width: 15px; height: 15px;" align="right" src="favicon.ico">
var rick = false;
var audio = new Audio('rick_roll.mp3');
var kkeys = [],
konami = "38,38,40,40,37,39,37,39,66,65,13";
$(document).keydown(function(e) {
kkeys.push(e.keyCode);
if (kkeys.toString().indexOf(konami) >= 0) {
kkeys = []; // <-- Change here
if (rick == false) {
rick = true;
audio.play();
} else if (rick == true) {
rick = false;
audio.pause(); // <-- another issue
}
}
});
/*Some Fonts Here:*/
#font-face { font-family: Rusty; src: url('BrushScriptStd.otf');}
* {
font-family: Rusty;
font-weight: Lighter;
}
.background
{
background-image: url(0.jpg);
background-attachment: fixed;
background-size: 100% auto;
background-color: f7f7f7;
background-repeat: no-repeat;
background-position:absolute;
}
.menubar {
position: relative;
height: 2.8vw;
opacity: 0.85;
background-color: #CCCCCC;
z-index: 1;
}
.clearfix:after {
display: block;
clear: both;
}
.menu-wrap {
width: 50%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #3e3436;
}
.menu {
width: 100%;
margin: 0px auto;
text-align: center;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'Ek Mukta';
}
.menu a {
transition: all linear 0.15s;
color: #919191;
}
.menu li:hover > a,
.menu .current-item > a {
text-decoration: none;
color: rgba(189, 34, 34, 1);
}
.menu .arrow {
font-size: 0.95vw;
line-height: 0%;
}
.menu > ul > li {
float: middle;
display: inline-block;
position: relative;
font-size: 1.2vw;
}
.menu > ul > li > a {
padding: 0.7vw 5vh;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #2e2728;
}
.menu li:hover .sub-menu {
display: block;
}
.sub-menu {
width: 100%;
padding: 0px 0px;
position: absolute;
top: 100%;
left: 0px;
display: none;
transition: opacity linear 5.8s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
}
.sub-menu li {
display: block;
font-size: 1.2vw;
}
.sub-menu li a {
padding: 10px 10px;
display: block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background: #3e3436;
}
.Rusty
{
font-family: "Rusty";
color: rgba(189, 34, 34, 1);
}
.content
{
opacity: .85;
position: relative;
margin: auto;
width: 80%;
z-index: 0;
background-color: #CCCCCC;
padding: 10px;
height: 100%;
}
.menu > ul > .login
{
position: absolute;
top: 0;
right: 0;
}
.video-container {
position:relative;
padding-bottom: 5%;
padding-top: 30px;
width: 100%;
border-bottom: thick solid rgba(189, 34, 34, 1);
}
.video-container iframe, .video-container object, .video-container embed {
position: relative;
top:15%;
left:15%;
right:15%;
width: 25vw;
height:25vh;
}
.title
{
text-align: center;
font-size: 7vh;
text-decoration: underline;
-moz-text-decoration-color: inherit;
text-decoration-color: inherit;
}
.feed-column
{
width: 50%;
height: 100%;
}
.border-right
{
border-right: thick solid rgba(189, 34, 34, 1);
}
.text-center
{
text-align: center;
}
.footer
{
background: #CCCCCC;
position:fixed;
bottom:0px;
height: 50px;
width: 100%;
opacity: .85;
}
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://s.ytimg.com/yts/cssbin/www-subscribe-widget-webp-vflj9zwo0.css" name="www-subscribe-widget" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="script.js"></script>
<link rel="shortcut icon" href="favicon.ico" />
<title>RG - Home</title>
</head>
<body class="background">
<div class="menubar">
<nav class="menu">
<ul class="clearfix">
<li>
<a href="aboutme.html">About Me
<span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>
Gaming
</li>
<li>
Programming
</li>
<li>
YouTube
</li>
<li>
Other
</li>
</ul>
</li>
<li>
Schedule
</li>
<li class="current-item">
<a href="#"><!--Here is where-->
<img style="width: 15px; height: 15px;" align="left" src="favicon.ico"><p align="middle" class="rusty"> RedstoneGaming </p><img style="width: 15px; height: 15px;" align="right" src="favicon.ico">
</a><!---------->
</li>
<li>
Equipment
</li>
<li>
Contact Me
</li>
<li class="login">
Login/Sign Up
</li>
</ul>
</nav>
</div>
<div class="content">
<h1 class="rusty title">ThatRedstoneGuy's Feed</h1>
<div class="border-right feed-column">
<h1 style="font-size: 3vh;" class="rusty text-center">Colortone | Am I colorblind?! | W/Voiceless</h1>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/-egJP-2ShRk?controls=2%20align="></iframe>
</div>
</div>
<div class="feed-column">
</div>
</div>
<div class="footer">vv</div>
</body>
</html>
make p tag inline.
.rusty {
font-family: "Rusty";
color: rgba(189, 34, 34, 1);
display: inline;
}
try this code:
.menu li.current-item {
float:none;
width:100%;
}
just change you code
<a href="#"><!--Here is where-->
<img style="width: 15px; height: 15px;" align="left" src="favicon.ico"><p align="middle" class="rusty"> RedstoneGaming </p><img style="width: 15px; height: 15px;" align="right" src="favicon.ico">
</a><!---------->"
to
<div>
<div class="left">
<img style="width: 15px; height: 15px;" align="left" src="favicon.ico">
</div>
<div class="middle">
RedstoneGaming </p>
</div>
<div class="right">
<img style="width: 15px; height: 15px;" align="right" src="favicon.ico">
</div>
<div class="clearfix"></div>
<style>
.left{
float:left;
}
.middle{
float:left;
}
.right{
float:left;
}
.clearfix{
clear:both;
}
</style>
There are plenty of methods, each width some pros and cons.
If you need maximum possible browser compatibility, use:
Method 1
The markup:
<table>
<tr>
<td><img src="path/to/img"></td>
<td><p>This is text</p></td>
<td><img src="path/to/img"></td>
</tr>
</table>
the CSS:
table{
width: 100%; border: none;
border-spacing: 0;
border-collapse: collapse;
text-align: center
}
table img, table p{
display: inline
}
If you have some flexibility on browser compatiility, you may choose the inline-block method:
Method 2
The markup:
<div class="parent">
<img src="path/to/img"><!--
--><p>This is text</p><!--
--><img src="path/to/img">
</div>
the CSS:
.parent{
text-align: center
}
img, p{
display: inline-block;
vertical-align: middle
}
The slider at the top of my page does show up perfect in Chrome, but not in Firefox. How can I fix this problem?
I already uploaded a test of the page, in case you would like to have a look.
Test of page: http://www.s4ea.org/new/index.html
HTML:
<header class="header2">
<header class="second">
<div class="top_slider">
<div id="slider" class="aslider" data-duration="10" data-hide-controls>
<div class="aslide" data-duration="4" data-audio="assets/audio/Acoustic-Josh-10248_hifi.mp3" data-audio-loop>
<img src="https://lh6.googleusercontent.com/-kKIX7Bbp10U/UwlakWBTzII/AAAAAAAA1iU/FoYSNulL4Oo/s720/IMG_0003.JPG" />
</div>
<div class="aslide" data-duration="5" data-audio="assets/audio/Country_-Adrien_G-8614_hifi.mp3">
<img src="https://lh3.googleusercontent.com/-yRjbRGF3V5Q/UwlauwWKw-I/AAAAAAAA1jE/8EiHF1C5bvc/s720/IMG_0009.JPG" />
</div>
<div class="aslide" data-duration="6" data-audio="assets/audio/Driving_-SpoonZ-9705_hifi.mp3">
<img src="https://lh4.googleusercontent.com/-I0BvWvxsYos/Uwla55SXfeI/AAAAAAAA1j8/nH4M26dUtdw/s720/IMG_0016.JPG" />
</div>
<div class="aslide" data-duration="7" data-audio="assets/audio/I_Wouldn-duh-8326_hifi.mp3">
<img src="https://lh3.googleusercontent.com/-1OPZWOsQxTQ/UwlbHV7w9tI/AAAAAAAA1k0/FHocKwEtNuQ/s720/IMG_0023.JPG" />
</div>
</div>
</div>
<div class="logo">
<img src="http://www.s4ea.org/images/logor.jpg" width="100%" height="auto">
</div>
<div class="right">
<img src="http://www.s4ea.org/images/register3.jpg" height="100%" width="auto" />
</div>
</header>
</header>
CSS:
.ul {
width:50%;
list-style:none;
display:inline;
background-color:#FFF;
}
.ul li {
display: inline;
background-color:#FFF;
}
.second .top_slider {
width:40%;
background-color: #FFF;
float:left;
}
.second .top_slider .aslide {
display: none;
}
.second .top_slider .aslide img {
max-width: 100%;
height:auto;
}
.second .top_slider #slider {
width: 100%;
height: 600px;
}
.second .top_slider .aslide .text {
width: 200px;
margin: 0 auto;
color: #f8f8f8;
text-shadow: 0 0 2px #000;
font-weight: bold;
font-size: 36px;
width: 100%;
text-align: center;
position: absolute;
bottom: 30px;
font-family: sans-serif;
}
.second .logo {
width: 26.7%;
background-color: #FFF;
float:left;
padding-left:3.3%;
}
.second .right {
width:26.7%;
background-color: #FFF;
float:left;
overflow:hidden;
font-size:1em;
height:100%;
padding:0% 0% 0% 3.3%;
}
.second .right img {
margin:0px 0px 0px 0px;
width:100%;
height:auto;
}
.second .right ul li{
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.second .right ul {
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.second .right ul li img{
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
height: 20%;
padding-top:5%;
width:auto;
}
A couple of issues
.second .top_slider .aslide img {
width: 100%;
height:auto;
}
.mainheader nav {
background-color: #FFFFFF;
float: left;
height: 10%;
width: 100%;
}
it seems the width of the images are not correct since you did not set a width and your nav just needed a float clear. I cleared it by making it a float but there are many other ways to do this
I've been having a problem with a new website theme I'm creating, this didn't occur to me before until I scrolled down.
Here is the problem. I created a fixed menu (which will stick to the top of the page wherever you are on the page). When you scroll down, the menu goes UNDER the content box instead. I couldn't find a solution to this either. I'm not a professional html or css web developer anyway.
Source:
File: Header.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="interface/css/style.css">
</head>
<script type="text/javascript" src="interface/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').mouseout(function() {
$(this).stop().animate({
opacity:'0.7'
});
});
$('a').mouseover(function() {
$(this).stop().animate({
opacity:'1'
});
});
$('#header-container > a').mouseout(function() {
$(this).stop().animate({
opacity:'0.7'
});
});
$('#header-container > a').mouseover(function() {
$(this).stop().animate({
opacity:'1'
});
});
});
</script>
<div id="header-container">
<div id="header-image" align="center"><img src="interface/images/interface/header.png" title="Home"></div>
<div id="header-social">
<a id="icon" href="#"><img src="interface/images/icons/facebook.png" title="Facebook"></a>
<a id="icon" href="#"><img src="interface/images/icons/twitter.png" title="Twitter"></a>
<a id="icon" href="#"><img src="interface/images/icons/blog.png" title="Blog"></a>
</div>
<div id="header-bottom"></div>
<div id="menu">
<ul><a class="text" href="#" title="">Home</a></ul>
<ul><a class="text" href="#" title="">About</a></ul>
<ul><a class="text" href="#" title="">Articles</a></ul>
<ul><a class="text" href="#" title="">Videos</a></ul>
<ul><a class="text" href="#" title="">Tutorials</a></ul>
<ul><a class="text" href="#" title="">Downloads</a></ul>
<ul><a class="text" href="#" title="">Contact</a></ul>
<ul><a class="text" href="#" title="">Help</a></ul>
</div>
</div>
<body>
<div id="main-container">
File: index.php
<div id="container">
<div id="content-container">
lorem ipsum
</div>
</div>
File: Footer.php
<!--Footer Container-->
</body>
</div>
</html>
The CSS Styles: style.css:
#font-face { font-family: myriad; src: url('../font/MYRIADPRO-REGULAR.OTF'); }
/*HTML Ententites*/
html{
margin:0;
left: 0;
right: 0;
top:0;
bottom: 0;
position: absolute;
font-family: myriad;
color: white;
}
body{
background:white;
}
a{
text-decoration: none;
color: white;
}
/*Containers*/
#header-container{
background:#202020;
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 100px;
}
#header-bottom{
height: 1px;
width: auto;
background:#8A8A8A;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
box-shadow: 0 0 50px 5px rgba(255,255,255,.5);
}
#header-image{
position: absolute;
top:70px;
left:300px;
cursor: pointer;
opacity: .7;
}
#header-social{
position: absolute;
right:0px;
top:50px;
}
#header-social > #icon{
opacity: .7;
}
#header-social > #icon:hover{
background: url('../images/icons/icon-hover.png') no-repeat;
opacity: 1;
}
#main-container{
background:#454545;
margin-left: -10px;
margin-right: -8px;
height: 1500px;
}
#menu{
position: fixed;
top:0px;
left: 0px;
right: 0px;
height: 50px;
background: rgba(0,0,0,.5);
}
#menu > ul{
display: inline-block;
background: rgba(10,174,254,.8);
height:40px;
cursor: pointer;
margin: 5px 0px 10px 0px;
width: 100px;
text-decoration: none;
font-size: 20px;
font-family: myriad;
}
#menu > ul:hover{
background: rgba(10,174,254,1);
}
#menu > ul > .text{
text-align: left;
color: white;
text-decoration: none;
opacity: .7;
}
#container{
position: absolute;
right: 500px;
left: 10px;
margin-top:250px;
background-clip: content-box;
}
#content-container{
background:#646464;
padding: 20px;
height: 200px;
overflow: auto;
border-bottom:3px solid #2B312D;
border-left:3px solid #2B312D;
border-right:3px solid #2B312D;
box-shadow: inset 0 0 10px 0px rgba(0,0,0,0.5);
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
#content-header{
}
I suppose the problem must be somewhere in my CSS for the menu. I don't think it's layered correctly in the html, but again, I suck at layering, I'm still learning. :)
Thanks in advance.
LIVE VIEW
Scroll down over the content box.
Set the z-index to 2.
#menu {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
background: rgba(0,0,0,.5);
z-index: 2;
}
Just add z-index in your menu.
CSS
#menu {
z-index: 99999;
}