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.
Related
Nothing
When Hovered
How do I display a text in the middle of the image only using css.
Thanks for reading.
HTML:
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>
CSS:
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
[Demo][1]
CSS:
a.transparent {
width: 200px;
height: 200px;
background: url("whatever.jpg");
display: block;
text-decoration: none;
}
a.transparent span span{
color:transparent;
}
a:hover.transparent span{
display:block;
width: 200px;
height: 200px;
background:rgba(255,255,255,0.5);
}
a:hover.transparent span span{
display:block;
padding-top: 33%;
text-align: center;
font-size: 1.5em;
line-height: 1em;
background:transparent;
color: #000000;
}
HTML:
<span><span>Rocket<br />League</span></span>
You can try this. It is fully tested and hope it will helpful for you.
HTML:
<div id="container">
<img src="https://i.stack.imgur.com/8ybfu.png" class="hover" />
<p class="title">Rocket<br> League</p>
</div>
CSS:
#container {
position: relative;
width:300px;
}
.title {
position:absolute;
left:50%;
margin-left:-40px;
margin-top: -40px;
right:0;
top:50%;
bottom:0;
font-size: 22px;
color: red;
display:none;
}
#container:hover .title {
display:block;
}
I have three pages horizontally, each page filling up the entire screen, with a fixed menu having the links that jumps to a specific page. However it is also possible to scroll to the right to get to each screen.
If two pages are visible at the same time (Example: half of page-2 and half of page-3) the anchor links to those pages doesn't work, only the link to page-1 does work. After that all links start working again.
This works perfectly in column mode. I assume this is because anchor links to the top of the section and in landscape mode I would want it to display it from the side?
Below is my entire css
body{
font-size:0px;
}
h1{
font-family: 'Londrina Solid', cursive;
font-size:120px;
text-align: center;
color:rgba(153,0,0,1);
text-shadow: -1px -1px #A99E9E;
}
p{
font-family: 'Titillium Web', sans-serif;
font-size:25px;
color:rgba(255,255,255,1);
background-color:rgba(153,0,0,0.8);;
text-shadow: 4px 4px 10px #000000;
}
.pad{
margin-top:33vh;
display:flex;
flex-direction:column;
}
.line1{
text-align:center;
margin-right:32vw;
margin-left:21vw;
margin-top:2vh;
padding-top:1vh;
padding-bottom: 2vh;
}
.line2{
text-align:center;
margin-right:19vw;
margin-left:33vw;
margin-top:6vh;
padding-top:2vh;
padding-bottom: 2vh;
}
.menu{
position:fixed;
left:0;
right:0;
padding-left:33.33vw;
padding-right:33.33vw;
min-height:10vh;
text-align:center;
background-color:rgba(42, 37, 240, 0.7);
display:flex;
flex-direction:row;
justify-content: space-around;
}
.menu a{
font-family: 'Londrina Solid', cursive;
text-decoration:none;
font-size:25px;
color:rgba(255,255,255,0.9);
font-weight:bold;
padding-top:3vh;
padding-bottom:3vh;
padding-right:4vw;
padding-left:4vw;
text-shadow: 5px 5px 15px #000000;
}
.menu a:hover{
background-color:rgba(4, 3, 70, 0.5);
}
section:nth-child(1){
height:100vh;
width:100vw;
background-image: url("images/hot-cup.jpg");
background-size:cover;
background-position:center;
}
section:nth-child(2){
height:2vh;
width:100vw;
background-color: darkred;
}
section:nth-child(3){
height:100vh;
width:100vw;
background-image: url("images/orange-quarters.jpg");
background-size:cover;
background-position:center;
}
section:nth-child(4){
height:2vh;
width:100vw;
background-color: darkred;
}
section:nth-child(5){
height:100vh;
width:100vw;
background-image: url("images/cosy-cafe.jpg");
background-size:cover;
background-position:center;
}
article{
display:flex;
flex-direction: column;
}
#media screen and (orientation:landscape) and (max-width: 668px) and (max-height: 400px) {
article{
flex-direction:row;
width:304vw;
}
h1{
margin-left:10vw;
font-size:80px;
}
section#border1{
height:100vh;
width:2vw;
}
section#border2{
height:100vh;
width:2vw;
}
.menu a{
font-size:45px;
padding-top:10vh;
padding-bottom:10vh;
}
.pad{
margin-top:7vh;
}
.line1{
margin-right:24vw;
margin-left:25vw;
font-size:20px
}
.line2{
margin-right:9vw;
margin-left:39vw;
font-size:20px
}
.menu{
top:0;
bottom:0;
position:fixed;
left:auto;
right:auto;
padding-left:0vw;
padding-right:0vw;
flex-direction:column;
margin-right:30vw;
}
}
#media(max-width:376px){
article{
flex-direction:column;
}
h1{
font-size:55px;
}
p{
font-size:14px;
}
.pad{
margin-top:35vh;
}
.line1{
font-size:18px;
margin-left:15vw;
}
.line2{
font-size:18px;
margin-left:26vw;
margin-right:9vw;
}
.menu a{
font-size:25px;
padding-bottom:2.3vh;
padding-top:2vh;
padding-right:0vw;
padding-left:0vw;
}
section#border1{
height:2vh;
width:100vw;
}
section#border2{
height:2vh;
width:100vw;
}
.menu{
top:auto;
bottom:auto;
position:fixed;
left:0;
right:0;
padding-left:0vw;
padding-right:0vw;
flex-direction:column;
}
}
Maybe use some class for show pages?
<div class="menu">
<nav>
<ul>
<li><buttom class="pageGo1">page#1</buttom></li>
<li><buttom class="pageGo2">page#2</buttom></li>
<li><buttom class="pageGo3">page#3</buttom></li>
</ul>
</nav>
</div>
<div class="page page-1">
page #1
</div>
<div class="page page-2">
page #2
</div>
<div class="page page-3">
page #3
</div>
.menu {
position: fixed;
z-index: 100;
left: 0;
top: 0;
}
.menu li {
display: inline-block;
padding-right: 120px;
}
.page {
position: absolute;
right: -100%;
width: 100%;
height: 100%;
background: blue;
padding: 100px;
box-sizing: border-box;
transition: 200ms;
}
.page-2 {
background-color: red;
}
.page-3 {
background-color: green;
}
.page.active {
right: 0;
}
$(".pageGo1").click(function () {
$(".page-1").addClass("active");
});
$(".pageGo2").click(function () {
$(".page-2").addClass("active");
});
$(".pageGo3").click(function () {
$(".page-3").addClass("active");
});
Simple example https://jsfiddle.net/8wg6ogss/
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;
}
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;
I have problem with p element inside li. It shoud be seen in same line and ul element should overflow with horizontal scroll bar. However it does not work.
HTML as follows:
<div id="tests" class="container">
<form>
<input type="text" id='search-textbox' placeholder='Action name'/>
<input type="button" id='search-button'value="Search"/>
</form>
<div class="clip">
<ul id="ul-tests">
<li>
<p>Action-001</p>
<ul>
<li>
<p>Action-001-001</p>
<ul>
<li>
<p>Action-001-001-001</p>
<ul>
<li><p>Hello-Action-001-001-001-001</p></li>
<li><p>Hello-Action-001-001-001-002</p></li>
<li><p>Hello-Action-001-001-001-003</p></li>
<li><p>Hello-Action-001-001-001-004</p></li>
<li><p>Hello-Action-001-001-001-005</p></li>
<li><p>Hello-Action-001-001-001-006</p></li>
<li><p>Hello-Action-001-001-001-007</p></li>
<li><p>Hello-Action-001-001-001-008</p></li>
<li><p>Hello-Action-001-001-001-009</p></li>
<li><p>Hello-Action-001-001-001-010</p></li>
</ul>
</li>
<li><p>bell-Action-001-001-002</p></li>
<li><p>bell-Action-001-001-003</p></li>
<li><p>bell-Action-001-001-004</p></li>
<li><p>bell-Action-001-001-005</p></li>
<li><p>bell-Action-001-001-006</p></li>
<li><p>bell-Action-001-001-007</p></li>
<li><p>bell-Action-001-001-008</p></li>
<li><p>bell-Action-001-001-009</p></li>
<li><p>bell-Action-001-001-010</p></li>
</ul>
</li>
<li><p>Action-001-002</p></li>
<li><p>Action-001-003</p></li>
<li><p>Action-001-004</p></li>
<li><p>Action-001-005</p></li>
<li><p>Action-001-006</p></li>
<li><p>Action-001-007</p></li>
<li><p>Action-001-008</p></li>
<li><p>Action-001-009</p></li>
<li><p>Action-001-010</p></li>
</ul>
</li>
<li><p>Action-002</p></li>
<li><p>Action-003</p></li>
<li><p>Action-004</p></li>
</ul>
</div>
</div>
CSS as follows:
*
{
margin:0;
padding:0;
}
body, html
{
min-width: 1000px;
min-height:700px;
}
div#tests
{
top:40px;
left:40px;
bottom:20px;
width:240px;
display:block;
position:absolute;
}
div#tests.container
{
background-color:#ccc;
border-radius:4px;
}
div#tests.container>form
{
top:4px;
left:4px;
right:4px;
height:32px;
min-height:32px;
overflow: hidden;
display:block;
position: absolute;
}
div#tests.container>form>input#search-textbox
{
top:0;
left:0;
height:28px;
min-height:28px;
width:150px;
min-width:150px;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;
border: 1px solid #9c9c9c;
font: normal 18px 'trebuchet MS', arial, helvetica;
display: inline-block;
position: absolute;
}
div#tests.container>form>input#search-textbox::-webkit-input-placeholder
{
padding-left:10px;
color: #9c9c9c;
font-style: italic;
}
div#tests.container>form>input#search-textbox:-moz-placeholder
{
color: #9c9c9c;
font-style: italic;
}
div#tests.container>form>input#search-textbox:-ms-placeholder
{
color: #9c9c9c;
font-style: italic;
}
div#tests.container>form>input#search-button
{
top:0;
right:0;
height:30px;
min-height:30px;
width:78px;
min-width:78px;
display:inline-block;
position:absolute;
}
div.clip
{
top:38px;
left:4px;
right:4px;
bottom:4px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
background-color: #FFF;
overflow:scroll;
display:block;
position: absolute;
}
ul#ul-tests
{
list-style-type: none;
margin-left:20px;
}
ul#ul-test.hidden-n p
{
display:none;
}
ul#ul-tests ul
{
list-style-type:none;
margin-left:20px;
}
Link to the fiddle.
Please does not suggest to use fixed width size. Because, text can be different size. Thank you for your answers.
Add this setting to prevent line wrapping:
li p {
white-space: nowrap;
}
jsFiddle Demo