Sorry that this is a question asked a lot, but y'know it's a bit of a specific instance problem. I can't tell why it isn't scrolling. Here's my code:
* {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: 40px;
}
<div style="padding:20px;background-color:#000033;height:1500px;">
<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>
<p style="color: #FFFFFF";><b>TITLE1</b></p>
<p style="color: #FFFFFF";> PARAGRAPH </p>
<p style="color: #FFFFFF";><sub>SUBPARAGRAPH</sub>
<p style="color: #FFFFFF";><sub><sub><sub><sub>V0.81</sub></sub>
</sub>
</p>
<IMG height="1080" width="1920" SRC="bricks.png"><br>
<IMG height="1080" width="1920" SRC="pink.png"><br>
<IMG height="1080" width="1920" SRC="black.jpg"><br>
</div>
Sorry it's a mishmash. Any suggestions in terms of tidying it up are also appreciated. And the CSS of stars.css (http://pastebin.com/nSiiUy1d) is very large.
It's for a purely personal website, I just wanna scroll.
Remove that 1500px height from the div and you should be able to scroll.
Btw I recommend you not to use fixed widths and heights when coding your style attribute, try to use percentages instead, or event "max-width" if you want to put limits.
In terms of tidying, I recommend reading up on indentation, here's a decent article on the subject.
Related
I have an image which I want to align with the edge of text below. The text below is centered, but I can't figure out how keep it aligned on the left.
The code I have is:
<img src="Logo.png" style="margin: auto"/>
<h1 style="text-align: center;>The Collaborative Observer</h1>
<p style="text-align: center; font-size: 100%; padding-left: 6cm">The best thing that has happened to ICE since ICE.</p>
I also use the padding feature to align the bottom text, and I am wondering if there is a better way to do that.
The code above is modified for color, but looks like this.
just simply insert <center><img src="Logo.png" style="margin: auto"/></center>
when img & text in one div box, must set the 'vertical-align:text-bottom',so that the text under the image. sorry my English
<style>
.logo-box{display: table; text-align: center;}
.logo-box img{height: 100px; width: 100px; vertical-align:text-bottom}
</style>
<div class="logo-box">
<img src="Logo.png" />
<h3>The Collaborative Observer</h3>
</div>
<p style="text-align: center; font-size: 100%; padding-left: 6cm">The best thing that has happened to ICE since ICE.</p>
Seems like a good use of <figure> and <figcaption>.
From HTML5 Doctor:
The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.
The figure element can be used to annotate illustrations, diagrams, photos, code listings, etc., that are referenced in the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content — e.g., to the side of the page, to dedicated pages, or to an appendix.
So why not...
<figure>
<img src="Logo.png" style="margin: auto"/>
<figcaption>
<h1>The Collaborative Observer</h1>
<p>The best thing that has happened to ICE since ICE.</p>
</figcaption>
</figure>
<figure> and <figcaption> are both block-level elements, so they will take up the full width of their container unless otherwise specified. This will allow the caption below to stretch to the edge of the element on each side, and then image will then be lined up correctly. Then add the following to your CSS file...
figure img {
margin: auto;
}
figcaption {
text-align: center;
}
figcaption p {
font-size: 100%;
padding-left: 6cm;
}
I think this is what you wanted :
<div style="text-align: center;">
<div style="left:10%;display:inline;margin:0 auto;">
<img src="http://almadaenmisr.com/templates/logo/1410252800_1266901625.jpg" width="100px" style="" />
</div>
<h1 style="display:inline;">The Collaborative Observer</h1>
<br />
<p style="text-align: center; font-size: 100%;padding-left: 15%;display:inline;">The best thing that has happened to ICE since ICE.</p>
</div>
Float the image left & inline the text.
Though this is working code, I would like to suggest using frameworks like bootstrap/skeleton for design so that its easier to work with and also makes it readily usable with all screen sizes.
I want to make my image a cover background, but it doesn't work for me. Here's my code:
<b>
<div id="feedicon" style="display:none; z-index:0;position:fixed;width:32px;height:32px;top:250px;left:0px;">
<a href="http://www.willmaster.com/index.xml" target="_blank">
<img src="http://www.willmaster.com/images/feed-icon32x32.png" border="0" width="32" height="32" alt="RSS" title="RSS">
</a>
</div>
</b>
Try this:
h1
{
color:White;
}
.fullBack
{
background-image:url('http://www.willmaster.com/images/feed-icon32x32.png');
background-size:cover;
width:100%;
height:100%;
}
<div class="fullBack">
<h1> some content here </h1>
</div>
using the background-size you can change the image size in a page to cover the entire page. This is a good tutorial to learn how to use that attribute wisely if you wish for a cover background image.
EDIT - It's important to remember that background-size is a css3 trait - so use it with caution, as it might not work well with old browsers.
Hi having some issues here trying to stack image and text on the same line left to right.
<div style="position: absolute; top: 200px; left: 30px;">
<span style="float: left;">
<img class="tglbtn" src="img/toggle_tab_l.png" data-swap='img/toggle_tab_r.png' height="60%" width="60%">
</span>
<p style="float: right; font-size: 20px; color: #92d6f8; overflow: hidden; text-align: left">
Remember User ID?
</p>
</div>
Your Code
http://jsfiddle.net/21Ltsbeb/
Improved
http://jsfiddle.net/21Ltsbeb/1/
I'm not seeing the issue? Though, you might be better off using display:inline-block with matching html elements. Inline as in Have these elements in the same line
.tglbtn {width:60%;height:60%;}
span {display:inline-block;}
p {font-size:20px;color:#92d6f8;overflow:hidden;text-align:left;}
<div>
<span>
<img class="tglbtn" src="http://www.placehold.it/66x66">
</span>
<span>
Remember User ID?
</span>
</div>
Edit
A few things I should note that you need to address as a beginner.
Don't use inline css
Don't use pixels (rem,em,or %)
Avoiding using position absolute
Don't use floats
Remember that good web applications have great continuity in their structure.
Until you get the hang of CSS, I might recommend Foundation's CSS or Bootstrap CSS.
This could be cleaned up a lot for you, and also simplifying your css/removing a lot of the inline styling:
.mind{
display:inline-block;
vertical-align:top;
}
.tglbtn{
height:20px;
}
<div class="wrap">
<img class="tglbtn" src="http://placekitten.com/g/200/300" data-swap='img/toggle_tab_r.png' />
<div class="mind">Remember User ID?</div>
</div>
Set the paragraphs top margin to 0
margin-top:0;
It's being set by the browser default otherwise (I see the mis-alignment in chrome).
See this fixed Example
Hey I just made a landing page and it looks fine on chrome
http://www.advicestudents.ro/tommy/homepage/homepage_v1/homepage.html
well the CRT_abs div that holds the heading subtitle and button duplicates on IE 9 and 8 it goes CRT_abs for the text and CRT_abs for the button same goes for the H1 holder DIV !
Dose anyone understands why this happens?
HTML code for holder :
<a href="#"><div id="h1" style="margin-top:-3px;">
<img src="images/h1.jpg" alt="" />
<div class="CRT_abs" style="text-align: center;width: 711px;left: 139px;top: 219px;padding: 0px;">
<div class="CRT_title_s_i CRT_white" style="line-height:16px; font-size:16px; text-transform: none; margin-bottom: 8px;">
Fall Outerwear
</div>
<div class="CRT_gills CRT_white" style=" font-family:ITCCaslon224W01-BookIt;font-size:40px; line-height:40px; margin-bottom: 9px; letter-spacing:1px;">
THE WARM UP
</div>
<div class="CRT_subtitle CRT_white" style="font-size:14px; margin-bottom: 12px;">
The perfect coat for every occasion,
<br />
from vintage bomber to collegiate duffle.
</div>
SHOP OUTERWEAR <span class="CRT_f18 CRT_gills">›</span>
</div>
</div></a>
so some CSS styleing is already inline coded into the HTML as you can see + the Position:absolute on the CRT_abs. I think thats all
The problem was that the first link tag that was wraping the whole main div, moved it to wrap only the image so i got the same effect and no more buggs. The buttons have the right possition now.
I am having a little issue with a few headers being misplaced on the site I am working on and also an image that's supposed to show below each one of them is not showing.
You can see what I am talking about here:
Here's my HTML:
<!-- main-content -->
<div id="main-content">
<h1> Check out all our DEADicated sites: </h1>
<div class="sites">
<a href="http://www.thedeadicated.tumblr.com" target="_blank">
<img src="images/sites/tumblr.jpg" width="215" height="150" alt="Tumblr"/></a>
<p> Tumblr </p>
</div>
<div class="sites">
<a href="http://www.twitter.com/thedeadicated" target="_blank">
<img src="images/sites/twitter.jpg" width="215" height="150" alt="Twitter"/></a>
<p> Twitter </p>
</div>
<div class="sites">
<a href="http://www.youtube.com/user/DeadicatedRepository" target="_blank">
<img src="images/sites/youtube.jpg" width="215" height="150" alt="YouTube"/></a>
<p> YouTube </p>
</div>
<h2> To join TheDEADicated, click HERE! </h2>
<h2> To get your own DEADicated wristband, click HERE! </h2>
<h2> Can't get enough of Dead Sara?! Dead Sara Addiction Treatment Facility </h2>
<h2> Email us at: TheDEADicated#TheDEADicated.org </h2>
</div> <!-- close main-content -->
And this is the CSS code for the main-content & headers:
#main-content{
padding: 50px 50px 30px 50px;
background: #fff url('images/shadow.png') repeat-x;
min-height: 800px;
}
#main-content h2{
margin-top: 30px;
padding-bottom: 8px;
background: url('images/ink-line.png') no-repeat left bottom;
clear: both;
}
Any kind of help would be greatly appreciated. Thanks!
I can't tell exactly what is happening here, but taking a guess at how the elements above the headers look, I'd say you have a float issue. Try removing the "clear: both" from the h2 and add "float: left; width: 100%;" in its place.
The comments are correct that you're not really clear about what you should see but don't, but if I interpret you correctly you mean that "my headings aren't showing the margin and padding or background images that I expect".
I'm going to take another leap of faith to offer up a possible solution. I see
</div> <!-- close main-content -->
at the end of your html but I don't see a <div id="main-content> anywhere. It should either be at the top of the page, or before the block of h2s, depending on what you desire the outcome to be. Try adding <div id="main-content> before the first h2 tag and see if that solves it for you.
Edit: I see your problem more clearly now, but this is tricky to resolve without the live url to inspect. It could be a float issue, but the clear should resolve that, unless it's being overridden, so you could change to:
clear: both !important;
It could be a display problem, so try adding:
h2 { display: block !important; }
If there's a live url that would certainly help. Final thought is to make sure every tag in the entire page html is properly opened and closed. Redundant or unclosed divs can cause issues like this in my experience.