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
Related
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! :)
So here's my problem:
Started working on a website and as the trend goes I went for responsive layout, using bootstrap (12 grid system). So I have to main elements in body which are a heading and an SVG path animation done with LazyLinePainter. So the problem I have is that the heading, is responsive, it stays in the middle no matter the size of the window, yet the animation refuses to do so. I've used same classes on both divs and can't come out with a solution to the problem so that's why I am writing here. I am posting both the html and css:
HTML
http://codepen.io/TresV/pen/bNNZjm.html
CSS
http://codepen.io/TresV/pen/bNNZjm.css
/*=======MAIN CSS=======*/
body {
background:#2ecc71;
}
#pencilandbrackets {
width: 31.5%;
display: block;
margin-top: -155px;
}
#title {
font-family: 'Oswald', sans-serif;
font-size: 4.13em;
position: fixed;
top:40%;
left:50%;
margin: -1.0em 0px 0px -3.2em;
color: #2c3e50;
display: block;
}
.lazy-line svg {
width:300% !important;
}
Here's a life version:
http://thecodehome.tk/new.html
NOTE: Hosting is unreliable so it may not be up at all times.
Thanks in advance for you time and effort!
I'm new at this and I don't know why the text inside my h1 tag goes to the right when I zoom in.
Here's the CSS code:
h1 {
font-family: 'Raleway', sans-serif;
border-bottom: 1px solid black;
border-top: 1px solid black;
margin-right: 500px;
margin-left: 500px;
text-align: center;
}
Also, I didn't use <div> because I didn't know what it was for when I began to code. I tried to change it but everything is build around my current technique.
Thanks.
Seeing as you are just beginning to code - this looks great!
I did the same thing when I first started and I'm pretty sure most people do. But Like the comments say - {margin: 0 auto} works best.
Divs are very, very important.
Use chrome's development tools - This is a good way to add and remove CSS rules quickly.
View -> Developer -> Developer Tools.
Navigate to the header through the collapsable menus, click it and note the associated rules on the right. Uncheck Your margin left and right to test the CSS rules.
You need to remove your margin-left: and right 500px;
I would STILL suggest something like this
<div id="container">
<h1> Your Header </h1>
</div>
This way, you can target JUST the h1 in the div of container in your css
#container h1 {
text-align:center
}
#container{
margin: 0 auto;
}
If this worked, please mark answered
Actually I'm new to web designing and I'm going to make my own social network and I'm using the amazing layout of Angelsmood.com music social network.
Everything is OK with designing except that I can't place the "Sign Up" button on the right place; it has a lot of margin on its right side. The problem is that there's no margin in my CSS code. Here's my code:
<div id="header_register">
Sign Up
<div>
Artists and their true fans are human angels.
Find them, connect with them and become one of them.
</div>
</div>
And Here's the CSS:
#header_register {
position: relative;
font-size: 12px;
}
#header_register a {
display: block;
height: 30px;
line-height: 30px;
background: ##810101;
color: #fff;
font-weight: bold;
font-size: 14px;
float: left;
text-decoration: none;
border: 1px #508F54 solid;
}
Please help me to fix this.
I made a fiddle and tried to fix your problem the best I could based on the information you gave us.
jsfiddle
Things I did... took your line-height out and moved the link after the div so you didn't have to use it... then I margin: 0 auto to center the <a> tag.
Instead of float: left;
I took it out added a width of the <a> tag so it did not span the width of the screen.
If you need this to function in a different way that I have illustrated ask and I will show you on the fiddle I posted.
I am currently finishing a site that the client wants to work on all browsers. However, there seems to be a CSS issue which I can not get around. The border around this page seems to start from the middle of the page, as opposed to surrounding the entire page. It works on all other browsers though. I am guessing that it is a float problem, but the #contact-form underneath has basically the same CSS applied to it but the border still surrounds it, while the #info seems to have broken out of the border.
The webpage in question is http://lunaskymoda.co.uk/contact-us/
The only validation error is with an unregistered keyword "Nextgen", but i doubt that is the problem. I have spent an entire day tackling this and cannot seem to come up with a reasonable explanation as to why this is happening.
the CSS for the possible HTML elements producing the error are:
#main #main-content {
border: 1px solid white;
display: block;
margin: 12px 0;
background: black;
}
.contact #main-content .info {
margin: 10px;
width: 300px;
font-size: 14px;
color: white;
float: right;
display: block;
}
You're not the first one to have issues with ie6 :)
The problem is of course the "clear: both" of the clear class not being honoured, so you need to hack it.
Here's a possible approach:
http://damienhowley.wordpress.com/2009/04/01/ie6-hack-replacing-clearboth/
You may also try to replace the <div class="clear"></div> by <br clear="all">.