This is driving me crazy. I am building a new horizontal scrolling website in Wordpress. The header and footer are simple fixed elements, but the page content scrolls horizontally. I am not trying to do this within a post, but as a page. Everything works fine up until I hit a certain width and then a new line is created of my images, messing up the flow of the entire page. It also then hides the footer. I have looked at this in multiple browsers and am stuck as what to do. Shouldn't I be able to horizontally scroll for as long as I want? It seems like I hit some sort of maximum width on my website.
Here it is looking good and then if I add two more images in the same manner using divs it skips a line and screws everything up and looks bad.
Please help. Here is the relavent CSS:
/************************* GLOBAL STYLES ***************************/
body {color:#eee; background: #000000}
.container-inner {position:relative; overflow:auto}
.container {background:#111; position:relative; overflow:auto}
h1,h2,h3,h4,h5,h6 {color:#eee;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {color:#eee;}
h3.sub,h2.sub {margin: 0 0 10px 0;padding: 0 0 5px 0;font-size: 1.9em;font-weight: bold;line-height: 1em;text-transform: uppercase;letter-spacing: 2px;color: #515151;border-bottom: 1px solid #000;}
a {color:#428ce7;text-decoration:none;}
a:hover, a:focus {color:#fff;}
p {color:#eee;}
h6.top {color:#ccc;}
.login {float:left;}
/* Posts */
.content {font-size: 1.2em; position:relative; overflow:auto}
.content h2 {font-size:1.5em; border: 3px solid white; text-align: center; padding: 2px;}
.post {display:block;font-size: 1.2em;}
.post h4, .post h6 {font-size: 1.2em;}
.post h2 {font-size:1.5em; border: 3px solid white; text-align: center; padding: 2px;}
.postmetadata {background:#000;padding:1em;color:#999; font-size:10px;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.postmetadata a {}
.postmetadata a:hover {color:#fff;}
.underlined {border-bottom:1px solid #eee;}
h6.underlined {margin:0 0 1em;}
.welcomebox {padding:1.5em;margin-bottom:1.5em;color:#eee;text-shadow: 1px 1px 1px #000}
.nav-image-left, .nav-image-up, .nav-image-right {text-align:center;float:left;width:25px;margin:0 10px 0 2px;}
.nav-image-left a, .nav-image-up a, .nav-image-right a {background:#eee;padding:2px 48% 2px 48%;text-decoration:none;color:#000;}
.nav-image-left a:hover, .nav-image-up a:hover, .nav-image-right a:hover {background:#000;color:#fff;}
.nav {background:#eee;margin:0 0 1em 0;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.nav:hover {background:#ccc;}
.prev a, .next a {color:#222;text-decoration:none;padding:.2em 1em;}
.nav-interior {margin:0;padding:0;clear:both;display:inline;}
.nav-interior .next {color:#000;text-decoration:none;float:right;}
.nav-interior .prev {color:#000;text-decoration:none;float:left;}
/* Paragraph */
#paragraph {margin:0px 30px 0px 30px; text-align:justify;}
/* Horizontal Scroll */
#wrapper {
float:left;
margin:40px 20px 30px;
margin-right:-999em;
position:relative;
overflow:auto;
}
.floatbox {
float:left;
margin:0 20px 0 0;
white-space:nowrap;
}
.floatbox img {float:left;}
.floatboxtext {
width:480px;
float:left;
margin:20px 60px 0 40px;
font-family:"Courier New", Courier, monospace;
text-align:justify;
font-size:.8em;
overflow:hidden;
}
/* Footer */
#footer {padding:1.5em 0; margin:0 auto; color:#999; text-align:center; border-top:2px solid #333; position:fixed; width:100%}
#footer p {color:#999}
#footer h3 {margin:0;padding:0 0 .4em 0; border-bottom:none; color:#999}
I have no idea how this works, but it does for me, at least:
#wrapper {
margin-right:-999em;
}
To:
#wrapper {
margin-right: -99999em;
}
Your example stared working around -1080em, so I assume the margin-right determines it's maximum width. I put it as -99999em because that seemed sufficiently large, you can increase it.
Related
I have this css style code:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dd,dt,dl,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
hr {
display:none;
/*
HR in my code are for semantic breaks in topic/section, NOT
style/presenation, so hide them from screen.css users
*/
}
#media (max-width:600px) {
* {
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
}
}
body {
font:normal 85%/150% "segoe ui",helvetica,sans-serif;
background-image: url("CB1.html");
//position:fixed; //(relative, absolute, static*)
//top: 120px;
//left: 120px;
//bottom: 120px;
width: 960px; margin: 0 auto;
}
.ss_scripted img {
display:none;
}
.ss_scripted .ss_show {
display: block;
}
#slideShow img {
margin:0 auto;
}
#slideCounter {
text-align:center;
padding:0.25em 1em;
font:bold 200%/120% consolas,courier,monospace;
color:#C00;
}
#slideControls {
width:512px;
padding:0.5em 0;
margin:0 auto;
}
#slideControls a {
float:left;
padding:0.25em 0.6em;
text-decoration:none;
color:#000;
background:#EEE;
border:2px solid #666;
-webkit-border-radius:1em;
-moz-border-radius:1em;
border-radius:1em;
-webkit-box-shadow:
inset 0 -0.5em 1em rgba(0,0,0,0.3),
0 0 1px #000;
-moz-box-shadow:
inset 0 -0.5em 1em rgba(0,0,0,0.3),
0 0 1px #000;
box-shadow:
inset 0 -0.5em 1em rgba(0,0,0,0.3),
0 0 1px #000;
}
#slideControls a:active,
#slideControls a:focus,
#slideControls a:hover {
background:#FFF;
}
#slideControls .next {
float:right;
}
I changed the part in the body:
body {
font:normal 85%/150% "segoe ui",helvetica,sans-serif;
background-image: url("CB1.html");
//position:fixed; //(relative, absolute, static*)
//top: 120px;
//left: 120px;
//bottom: 120px;
width: 960px; margin: 0 auto;
}
Unmarked 3 lines and added the width and margin 0 auto
If i was using this 3 lines without the width and margin then the slideshow was displaying in the left bottom.
Now the slideshow is displaying in the middle top. But i want it to be in the screen center not middle top:
Middle Top
What should i change/add ?
Try this:
<div id="slides">
<--! slider here -->
</div>
#slides{
margin-right: auto;
margin-left: auto;
display: block
}
I am going to assume your middle part is 300px width and 300px height.
body {
font:normal 85%/150% "segoe ui",helvetica,sans-serif;
background-image: url("CB1.html");
position:fixed;
top: 50%;
left: 50%;
margin-top:-150px; /* 50% of the exact height */
margin-left:-150px; /* 50% of the exact width */
}
You can use div tags for styling..
Below I have used the attribute style and set the margin from top...
For example,
<div style="margin-top:200px">Your slideshow content </div>
I'm using floats and trying to keep each one of three buttons in a navigation menu to ~33.3% so that it fills the screen and doesn't break when the window size shrinks, nor should it leave gaps on the ends when the browser window gets wider.
Here is a fiddle http://jsfiddle.net/xxd1vdcj/1/
<div id ="nav">
<ul>
<li id="dawn" >Tradition</li>
<li id="dusk" >Styles</li>
<li id="night">Contact</li>
</ul>
</div>
#nav ul li{
display:block;
//width:19.3%;
width: 33%;
line-height: 3em;
margin:0 auto;
padding:0;
text-align:center;
float:left;
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#111));
color: #b0c4ff;
font-size: 18px;
margin-top: 140px;
opacity: 1;
border: 1px solid black;
}
As I've said in my comment, <a> is not a valid <ul> children.
100/3 = 33.333.. but you used 33% which on larger screen sizes encounted for the 1px (up to 6px) for your three LI widths, than once you resized your page, the remaining availiable width % was not enough to contain the fixed (1px) border width, leading to a LI breaking beneath to the nearest available space.
using box-sizing
Some box-sizing will fix your issue of borders adding up the available space.
*{margin:0; padding:0;} /* Global reset (also to remove 8px margin from Body) */
#nav ul{
display:block;
margin:10px;
margin-top: 140px;
}
#nav ul li{
box-sizing:border-box;
border: 1px solid black;
display:block;
float:left;
width: 33%;
line-height: 3em;
text-align:center;
color: #b0c4ff;
font-size: 18px;
}
http://jsfiddle.net/xxd1vdcj/5/
Now you can even go using 33.333% for your LI width.
using display:table and table-layout
Since box-sizing is not supported by older browsers you can go and use this simple solution:
*{margin:0;padding:0;}
#nav{
margin:10px;
margin-top: 140px;
}
#nav ul{
display:table; /* Table!! yey */
width:100%;
table-layout: fixed; /* To fix LI widths */
}
#nav ul li{
border: 1px solid black;
display: table-cell; /* Note */
line-height: 3em;
text-align:center;
color: #b0c4ff;
font-size: 18px;
}
which excels at what tables are born for!
http://jsfiddle.net/xxd1vdcj/7/
I'm using Wordpress and their twentythirteen theme. With this theme I would like to position and align the site title and tagline text to the upper right of the header. When I try to do so it's always positioned under my logo for some reason. I played with the position CSS property with no luck, it's still positioned under the logo.
Sample of the CSS file
.site-title {
font-size: 30px;
line-height: 0.5;
padding: 5px 0 10px;
text-align:right;
position: relative;
}
.site-description {
font: 300 italic 18px "Source Sans Pro", Helvetica, sans-serif;
text-align:right;
}
.site-header {
margin:10px auto 0 auto;
max-width:980px;
padding:0;
background-color:#ffffff;
background-size: 980px auto;
border-top:2px solid #efefef;
border-bottom:1px solid #cdcdcd;
box-shadow: 0 3px 3px #dedede;
-moz-box-shadow: 0 3px 3px #dedede;
-webkit-box-shadow: 0 3px 3px #dedede;
-o-box-shadow: 0 3px 3px #dedede;
}
.site-header .site-title:hover {
text-decoration: none;
}
.site-header .home-link {
min-height: 50px;
}
.header-logo {
max-width:60%;
display:block;
padding-top:3px;
position:relative;
}
Here's my testing website so you can see exactly what I'm talking about:
mywptestsite.is-great.org
What am I missing here?
Thanks in advance,
Kim
The problem is that you are encapsulating your site title in an h1 tag, so it is positioning it in a new line.
You could fix the issue by putting both your logo and your site title in the same <div> element, and add float: left; to your header-logo class, and float: right; to your site-title class.
You can try this - add these few lines to title and tagline css classes:
.site-title {
position:absolute;
top:20px;
right:20px;
}
.site-description {
position:absolute;
top:50px;
right:110px;
}
You can change top and right values to get desired positions of course...
You can use float on the image, title, and description to get those two elements onto the right. You will also need to use a clearfix technique on .home-link to get the element to wrap around all floated elements.
CSS
.header-logo { float: left; }
.site-title{ float: right; clear: none; }
.site-description { clear: right; }
Take a lot at the fiddle below and you would observe that when the line is about to end, the li elements break abruptly. Like, in the first line, after 4 li elements, the next li element breaks and the red circle comes in the same line while the text part moves to the next line.
Here is how I have defined the list elements in CSS:
.popular ul li:before { // Its this part of the code which is making the things
content: "\2022 "; // happen like this. If I remove this part, everything
color:red; // works fine.
}
.popular ul li{
display: inline;
padding: 4px 7px 4px 5px;
background-color:#ededed;
border-radius:5px;
border:2px solid #dcdcdc;
}
Here is the JsFiddle Link http://jsfiddle.net/e7rjW/.
Could someone please tell me how to correct this thing?
Change the display:inline to inline-block
.popular ul li{
display: inline-block;
padding: 4px 7px 4px 5px;
background-color:#ededed;
border-radius:5px;
border:2px solid #dcdcdc;
}
Fiddle: http://jsfiddle.net/e7rjW/5/
Replacing .popular ul li:before with .popular ul li a:before in the CSS fixes your issue.
See the updated JSFiddle.
EDIT: This doesn't work correctly in Chrome, as pointed out by #Nagarjun:
http://img577.imageshack.us/img577/6770/o7g.png
So you'll probably want to use his answer.
try this
http://jsfiddle.net/e7rjW/6/
replace this classess
.popular ul li{
display: inline;
padding: 4px 7px 4px 5px;
background-color:#ededed;
border-radius:5px;
border:2px solid #dcdcdc;
text-wrap:none;
float:left;
}
.popular ul li a{
display: inline-block;
color:#777;
font-family:Arial;
font-size:15px;
font-weight:700;
text-decoration:none;
text-shadow:0 1px 7px #fff;
}
For some reason the images in the columns on this page are not centering while the <p>s are. They are both encased in the same divs (#event).
.event {
position:relative;
right:auto;
left:auto;
width: 315px;
height:100%;
margin:5px 0px 0px 0px;
}
img.event {
position:relative;
align:center;
width:315px;
height:auto;
margin:auto;
padding:10px 0px 0px 0px;
}
p.event {
position:relative;
right:auto;
left:auto;
width:315px;
height:auto;
padding:0px 0px 0px 0px;
font-family: helvetica, sans-serif, Arial;
font-size: 16px;
letter-spacing: 1.2pt;
border-bottom: 2px dotted #333333;
}
add the following to img.event:
right:auto;
left:auto;
I think you need to correct your markup first. You have p tags nested inside anchor tags. I think this is giving you the illusion that your p tags are centered when in fact they are not.
I'm not trying to be harsh, but it would probably be easier to debug your issue when you have correct markup.