I'm learning PHP right now (after learning the basics of HTML,CSS and more).
I'm trying to build a website, in which you can cut the main section in to three pieces (one with 15% width, one with 70% width and another one with 15% width).
The problem is that both of the 15% sections work fine on Internet Explorer and Firefox, but for some unknown reason disappears on Google Chrome.
This is the HTML part of the code:
<!-- First Section (Desktop only) -->
<div class="side_banner">
<img src="images/asd.gif" id="bannerlong"/>
<img src="images/asd2.png" id="bannerwide"/>
</div>
And this is the CSS part of the code:
.side_banner {
width: 15%;
float: right;
padding: 20px;
margin: auto;
text-align: center;
padding-top: 120px;
}
.side_banner img {
padding: 10px;
}
#bannerwide {
display: none;
}
.phone_banner {
display: none;
}
The ones with the "display: none;" are for other viewports...
An important clue might be that when the file had an HTML extension it worked fine on chrome, but when I changed it to a PHP extension (and opened it through WAMP) the problem appeared.
Can you please help me find out why there is a problem with my web on Chrome?
Thank you very much!
Related
This is my first ever question on stackoverflow so I apologize if I'm not following standard etiquette.
I'm working on a blog final project for a class that requires a custom theme and I'm using tumblr to host it for reasons independent of coding. This is the first time I've used css for more than extremely basic styling purposes, and I'm relatively new to html/css-related work in general.
For my main page, I have a sticky sidebar on the left 1/4 of the page, and then 3 columns for posts in a tiled gallery sort of like (similar to masonry but I used css grid because masonry confused me). Overall, I'm pretty satisfied with how this is turning out. Due to my inexperience, it's not where I would ideally have it designed, but my goal is to be able to work on it as I learn more html/css/js after this class is over.
main page layout
about page currently
However, I'm having trouble with fixing an individual post page and my about page: when you click on an individual post, it's also being shown as a 3 column post, which is not my intention at all. Same with the about page. I think this is due to my usage of css-grid on the main page, but I'm confused as to how I can fix this on individual posts.
a note on my html/css - my friend let me borrow most of the sidebar-specific code which is why it's much nicer than some of the stuff I've written and she's helped me a lot during this process but the page issue isn't something she's ever really encountered because she doesn't use css-grid or columned design often.
I've tried simply writing a completely new html for the about page, but my sidebar uses meta/variables (that I think are) built into the tumblr theme editing interface, so my sidebar wouldn't show up correctly when I tried to do that. And I haven't tried anything for the posts because I didn't even realize they had an issue until earlier today.
I can provide other code snippets if this would help, but I'm not sure what to include other than these:
#sidebar {
top: 35%;
position: -webkit-sticky;
position: sticky;
background: #ffffff;
height: 40vh;
width: 20%;
text-align: center;
padding: 25px 10px 10px 10px;
border: 2px solid;
border-radius: 70% 30% / 20% 40%;
margin: 2% 2%;
}
#container {
column-count: 3;
display:inline-block;
grid-template-columns: auto auto auto;
grid-area: container;
width: 100%;
column-gap: 20px;
}
#house {
display: flex;
flex-direction: row;
justify-content: right;
}
.content{
width: 90%;
background-color: #ffffff;
padding: 20px;
margin: auto;
margin-bottom: 10px;
float: left;
}
<body id="{select:background}">
<div id="house">
<div id="sidebar">
<a href="/">
<h1>{Title}</h1>
</a>
<div id=“description”>
{Description}
</div>
<br />
<div class="sidebarlink">{text:link 1}</div>
<div class="sidebarlink">{text:link 2}</div>
<div class="sidebarlink">{text:link 3}</div>
<div class="sidebarlink">{text:link 4}</div>
</div>
<div id="container">
{block:Posts}
<div class="content">
[I've omitted the post types and their meta info for clarity]
</div>
{/block:Posts}
</div>
</div>
Any help at all would be greatly appreciated! If this has already been answered please direct me there as well, I'm not too well-versed in navigating stackoverflow yet.
please, I have a problem with terminal simulator. I want show one line in full length without wrapping of course but text (text-align: left of course). It's fine in desktop but if you will smaller the window you will see horizontal scrollbar. I solve this with max-width: 100vw but then scrollbar is still visible below the text. It's for desktop. I think that this is solved. But have you some better ideas for terminal emulator? What library is standard used which can copy your code, etc...? Thank for advice
My html scratch
<div class="terminal">
<pre class="terminal">cd ~
mkdir Projects
git clone https://github.com/zrebec/JavaLearning/ThisIsVeryVeryVeryLongURLPathToDestination/DesignPatterns.git
/zeroscratch.sh init</pre>
</div>
and css scratch
.terminal {
// Layout
padding: 5pt;
border-radius: .5em;
display: inline-block;
// Colors
background-color: $secondary;
color: $color5;
// Text
font-family: monospace;
font-weight: $font-weight-bold;
line-height: $terminal-line-height;
text-align: center;
}
.terminal pre {
// Layout
overflow-x: auto;
margin: -17px; // This is for compatibility with mobile devices
// Text
text-align: left;
}
Don't worry about variables, I'm using Sass for normal programming. But I have some questions please:
It's needed to have negative margin? I read that it's for mobile browser compatibility. And yes, otherwise page is scroll-able which is really ugly. But the question is, existing most modern solutions for terminal emulator?
It's better use <pre> or <textarea> for terminal simulator? Thank you
Full my code is on my codepen
Thanks for any advice
PS: My desire is avoid Javascript or Bootstrap for now. Thank you for understand
Best Regards
If I understood well, please check if this is the behavior you're wanting to happen :
.terminal {
width: 90%;
height: 100px;
padding: 10px;
background: #000;
color: #0f0;
border-radius: 10px;
font-family: monospace;
text-align: left;
}
.terminal pre {
margin: 10px;
padding: 10px;
overflow-x: scroll;
overflow-y: hidden;
}
<div class="terminal">
<pre>cd ~
mkdir Projects
git clone https://github.com/zrebec/JavaLearning/ThisIsVeryVeryVeryLongURLPathToDestination/DesignPatterns.git
/zeroscratch.sh init</pre>
</div>
You had both items with the same class which was conflicting with the browser applying the styling. And if you want the scrollbar to appear only horizontally, just make sure also to hide the vertical bar with overflow-y: hidden;.
Here's a fiddle, so you can resize the window and see it working responsively. Hope it helped!
JSFiddle
i'm creating a responsive layout but i'm noticing a centering problem. I have three div (three boxes, each one next to the other) and i put them into a parent div to make the alignment. The strange thing is that on dreamweaver all works perfectly, but when i open the HTML file to test the page locally the centering is not correct. Here's the images so that you can understand better.
On Dreamweaver
click
When i open the HTML page locally
click
In the first screen as you can see, right and left spaces are perfectly equal, in the second screen left space is more narrow. I'd love to know why on dreamweaver is ok. Here's the code i used.
#infoInner {
margin-left: 0.5%;
margin-right: -0.5%;
}
.boxInfo {
padding: 2% 2%;
margin: 0 1.5%;
width: 26%;
border: 1px dashed white;
float: left;
}
Browsers by default tend to add styles to the document. This is why projects such as normalize.css exist to remove them, however, this is not the solution to your problem.
When a web browser displays code, it's the rendering engine that interprets the code to then lays it out to the screen. Chrome uses Blink, Safari uses Webkit, Internet Explorer uses Trident, and so on. After a bit of research, I see that Dreamweaver used the Presto rendering engine until version 3, and then moved to Webkit on version 4 / 5. I am not sure about the version DW6, I am also going to assume it is Webkit (EDIT WELCOMED). You should receive a similar result if you open your code up in Safari.
I recommend you open a new question with your code represented in a jsfiddle for members of SO to help you out and get it the way you want to look. However, from the description and the code posted it seems to be a rendering issue.
Further Reading:
http://en.wikipedia.org/wiki/Web_browser_engine
http://mashable.com/2014/02/26/browser-testing-tools/
https://www.youtube.com/watch?v=7bs9RGolIyI (More for the comedy)
Can you do that on this way:
<div class="wrapper">
<div class="item"></div>
<div class="item center"></div>
<div class="item"></div>
</div>
.wrapper {
text-align: center;
width: 100%;
}
.wrapper .item {
float: none;
display: inline;
width: 32%;
margin: 0px;
}
.wrapper .item.center{
margin-left: 1%;
margin-right: 1%;
}
I hope this help! :)
Please bear with me as I'm fairly new to hand coding my web pages. I applied my CSS and HTML from the website I created to skin a Blogger page to match look and feel. Everything appears fine when testing in FireFox release 17.0.1, but the background for my div #body_wrap fails to repeat more than a few times in IE 8.
I'm probably missing something simple, but I would appreciate any help in determining the cause. I would like to know if it's IE related or just poor code that FireFox is picking up the slack on.
Here is the link to the blog:
http://www.zenmotostore.blogspot.com/
Here is the CSS for the div containers involved:
#body_wrap {
width: 1074px;
margin: 0px auto;
padding: 0px;
position: relative;
background: url(http://www.zenmotostore.com/images/repeat_bgd_shadow_blog.png) top repeat-y;
clear: both;
}
#body_content_wrap {
width: 984px;
margin: 0px 45px 0px 45px;
padding: 0px;
padding-bottom: 7px;
background: #000000;
position: relative;
clear: both;
}
#scrollofzen_header {
width: 983px;
height: 191px;
margin: 0px 0px 0px 0px;
padding: 0px;
background: #000000 url(http://www.zenmotostore.com/images/scroll_of_zen_header.jpg) top center no-repeat;
position: relative;
clear: both;
}
The div #scrollofzen_header sits above the Blogger content code in the HTML. Both are contained in the #body_content_wrap div.
Let me know if I need to include more code here on the post. Thanks in advace for any help you might have!
Your problem seems to be with this CSS declaration:
.body-fauxcolumn-outer
{
background: url(http://www.zenmotostore.com/images/page_bgd_zen.jpg) #b8924f fixed no-repeat 50% top;
}
If I use the IE dev tools to disable this rule then the page seems to work fine (as I expect it to anyway).
Looks like it might be a clear issue. Depends on version of IE. You could look into css height: 100%;, or another way would be to add <div class="clear></div> as the last child element in #body_wrap.
.clear {
clear: both;
}
//then the markup
<div id="body_wrap">
//Your content and stuff
<div class="clear"></div>
<div> //close body_wrap
Internet explorer has a big problem with using images in css. Whenever I try to use them it doesn't work. Not since the very latest edition of IE have they allowed background-images.
You need to define a height for the div that you want to have a background-image
Background Images aren't supported IE8 or below
http://www.w3schools.com/cssref/pr_background-image.asp
For some reason my web page is not display correctly in Firefox version 14.0.1. It is displayed correctly in IE9, Safari, chrome. A friend of mine also said he experienced the same as me.
In Firefox if I zoom out or in the layout changes. But then the YouTube video begins to smear and pixelate. I asked a friend to check Firefox on their computer and the same thing happens.
http://wwww.streetstyles4all.co.uk/images/screen_shot.jpg
The screen shot from top left shows how the page loads. Top right shows after I zoom in or out, and bottom left is after I scroll up and down.
HTML:
The HTML for the section in question is:
<div id="homewallcontainer">
<div id="homesidenavcontainer">
<script type="text/javascript" src="http://forms.aweber.com/form/23/850302323.js"></script>
</div>
<div id="newsletterblurb">
<p>
Learn everything you need to get yourself going in the world of street dance, tips, facts, what to wear, music, videos and more. Just fill in the form above - simple!
</p>
</div>
<div id="contentcontainerhome2">
<h1>Street Styles 4 All is the place to be for street dance! With classes, DVD's that are sold worlwide, dancers for hire, streetwear...find out why you should choose Street Styles 4 All:
</h1>
<div id="homess4atrailer">
<iframe width="466" height="302" src="http://www.youtube.com/embed/QyhgZ6I_DHo" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
The CSS is:
#homewallcontainer {
background: url("images/wall.png") repeat scroll 0 0 transparent;
height: 542px;
margin-top: -1px;
width: 960px;
}
#homesidenavcontainer {
float: left;
margin-left: 41px;
margin-top: 110px;
width: 253px;
}
#homesidenavcontainer {
float: left;
margin-left: 41px;
margin-top: 110px;
width: 253px;
}
#contentcontainerhome2 {
float: right;
margin-right: 17px;
margin-top: 46px;
width: 528px;
}
#homess4atrailer {
margin-left: 56px;
padding: 38px 0 10px;
}
First: Your question/problem is extremely unclear. You don't have resizing issues, you just have a messed up website that's "looks correct" when you resize, right ? Is that what you want to say ?
You problem is: The site is build by amateurs. There are a lot of layout issues, but there's a simply solution:
Remove the position:relative; of #indexwrapper in ss4a4.css, around line 250+ !
The reason for the fault in Firefox seems to be the use of the HEIGHT attribute. It was applied to 2 divs, and after removing the HEIGHT and POSITION:RELATIVE attributes, replacing with FLOATS, MARGINS and PADDING to create the layout of all the divs and nested divs in the section in question corrected the firefox issue.
That section of the site was carelessly written!