I'm playing around with the box models on my test webpage.
Everything is working properly, except when I resize my browser.
I am trying to get the title to cut in half and appear underneath the first bit of the title if the browser is resized to cover about half of the title.
This, however, is proving a problem.
Here is my code for this specific problem:
#header1 {
color: darkorange;
width: 500px;
height: 30px;
min-width: 300px;
min-height: 30px;
max-width: 500px;
max-height: 70px;
}
Currently, when I resize my browser, a part of the title disappears behind the edges of the browser.
I'm guessing I misunderstand the working of max/min-height/width.
Do I need to use the overflow command here?
<h1 id="header1">
Welcome to Luc's Amazing Website!
</h1>
<br />
Tell me if you need more code, I don't know how much is exactly needed.
It's hard to say without seeing more of code, though following should be enough to achieve the result you are looking for.
#header1 {
color: darkorange;
min-height: 30px;
max-width: 500px;
max-height: 70px;
}
see the example in fiddle, https://jsfiddle.net/sh0fevt1/2/
To achieve this you need to place both parts in separate boxes. Also width: 500px; was not enough to fit the whole title in a single row.
#header1 {
color: darkorange;
}
#header1 span {
display: inline-block;
}
<h1 id="header1">
<span>Welcome to Luc's</span> <span>Amazing Website!</span>
</h1>
<br />
Related
I am working on this task where I need to put the divs in the required positions. The final result should be this:
.
I have the following code:
HTML:
<div class="activity">
<h2>Activity 5</h2>
<section class="hint"><input type="checkbox" > <h3>Hint 5</h3><i></i><div><p>Grid is <strong>not</strong> the right way to do this. In fact there is only one way to really do that...and that is with float. Remember that we float the thing we want the text to wrap around. Also remember to start by making all the shapes the right size and shape.</p><h4>Properties used:</h4><ul><li>float: left;</li></ul></div></section>
Wrap the text around the square like in this image. This is one case where Grid is NOT the right way to solve this one and will in fact make it harder if you try to use it!
<div class="content5" >
<div class="red5" ></div>
<div class="green5" ></div>
<div class="yellow5">Step 01: Continue creating the main page for your chosen web site by modifying the CSS file you created in week 9's Adding Classes and IDs to Your Website assignment. This week, you will position all of the content on your main page using the CSS positioning techniques taught in KhanAcademy. When you are done, your webpage layout should reflect what you outlined in the wireframe you designed in the assignment Your Own Site Diagram and Wireframe in week 3. <br />
If you have changed your mind on how you want the content of your main page laid out, take an opportunity to update your wireframe before completing this assignment (it is much easier to experiment with different layouts in a wireframe than it is to do so by modifying the CSS). Also, if you find that you are having trouble with using CSS positioning, feel free to review the concepts at the learn layout site: http://learnlayout.com/. You should be able to apply these principles to your site. For futher help, refer back to the Max Design site used in the beginning of the course for an example of how to implement your site design.</div>
<div class="blue5"></div>
</div>
</div>
CSS:
.content5 {
/* This is the parent of the activity 5 boxes. */
position: relative;
}
.red5 {
width: 100%;
height: 100px;
background-color: red;
}
.green5 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
}
.yellow5 {
width: 100%;
height: auto;
background-color: gold;
}
.blue5 {
width: 100%;
height: 100px;
background-color: blue;
}
The code I have so far looks like this: I have tried a couple of things to make the text appear next to the div but they haven't worked. The HTML should not be modified. And I need to use CSS for this task, not bootstrap or something else. Thanks!
Add this to .green5 would work.
I've tried it and it actually works well.
.green5 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
I've seen a very cool slider that I'd like to recreate, however, I wanna try it with pure HTML and CSS first. (Original one is javascript only, but its several years old and from a quite unprofessional source.) This is just a test of concept, so there's no effort put in crossbrowser-stuff etc.
Also, I don't know how to call it so I've no idea how to google it.
The idea is to have let's say 5 pictures in a box with equal widths. On hovering one of these the non-active ones should shrink allowing the active one to be fully displayed. Here's what I tried:
#showcase {
position: relative;
width: 760px; /* 750px + 10px to prevent flickering */
height: 200px;
}
#showcase:hover > .jewelry {
width: 75px;
}
.jewelry {
width: 150px;
height: 100%;
float: left;
transition: width 1s;
}
.jewelry:hover {
width: 450px !important;
}
.jewelryOtherHovered {
width: 75px;
}
#jewelry1 {
margin-left: 5px;
background-color: red;
}
#jewelry2 {
background-color: yellow;
}
#jewelry3 {
background-color: green;
}
#jewelry4 {
background-color: blue;
}
#jewelry5 {
background-color: pink;
}
<div id="showcase">
<div id="jewelry1" class="jewelry" onMouseOver="(0)" onmouseout=""> </div>
<div id="jewelry2" class="jewelry"></div>
<div id="jewelry3" class="jewelry"></div>
<div id="jewelry4" class="jewelry"> </div>
<div id="jewelry5" class="jewelry"></div>
</div>
Needless to say, it doesn't work the way I want it to. Try hovering the yellow block and when its half done go to the green one. That results in a wrong overall width. (Pink one doesn't remain to be stuck on the right side, hope you get what I mean.) Then hover from the red one very fast to the yellow one and then go out of the box at the bottom. In that case this is were the pink one is shown.
Question being, does anyone know how to fix it or does anyone have a better approach? Thanks for your help :-)
What are your reasons for avoiding javascript/jQuery?
From what I understand you want the following:
when none are active: the width to be each 20%
when one is active:
-the active: say 60%
-the others: 10% each
-total: 100%
http://jsfiddle.net/messedUP90/ahmdo124/
I just edited the values. There appears to be a few lines that not necessary that you could cut out.
I have a header which I constructed like this:
<header class="top">
<a href="">
<span class="right">Stichting Delftsche Opera Compagnie presenteert</span>
<h1 class="right">Carmen</h1>
<h2 class="right">Een opera door Krashna Musika en de TU Delft</h2>
</a>
</header>
This should look like this, as someone made this in Adobe Illustrator
Then I applied some css and got to this (in the original there is a Dutch spelling mistake, this one is corrected, the scale is not completely equal either):
The rules:
.top {
display: block;
width: 800px;
float: right;
}
.top a {
background-image: url('../img/logo.jpg');
background-size: 150px 150px;
background-repeat: no-repeat;
padding-left: 150px;
height: 175px;
display: block;
overflow: hidden;
}
.top .right {
text-align: justify;
width: 650px;
}
.top span, .top h2 {
color: #E02C33;
font-size: 1.8em;
}
.top h1 {
color: #B02025;
font-size: 4.7em;
text-transform: uppercase;
}
I have two issues here:
How can I justify both the <span> and <h2> to their equal lengths (my justify is not working as expected)
How can I constraint "CARMEN" such the width and height are pre defined, the spacing between characters is rendered by the browser
The problem with justify is that the last line is usually no justified, because the letter spacing would be too long.
If you can use CSS3, there are new attributes, which make this possible:
http://www.css3.com/css-text-justify/
If the header always stays the same, you can also adjust the font-size and letter-spacing attributes, until it fits.
One important thing is that while creating graphics initially in adobe photo shop or illustrator etc. is different and when we implement in actual webpage the output may vary little bit in some cases. So we have to write css like that so we can accomplish the desired design. Thanks.
see fiddle for code and demo
Fiddle: http://jsfiddle.net/ybf25/3/
Demo: http://jsfiddle.net/ybf25/3/embedded/result/
Note: As i don't have the Rose image so i was not able to create Demo as your given image in question.
See screen shot for output: Please open the screen shot in new window to see clear image.
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">.
Simple problem, though apparently not a simple solution.
Example here: http://myhideout.eu/new/
Basically the site consist of two columns, though with no wrappers or anything like it, as I'd really like to do with as little of the sort as possible, partly for the sake of simplicity, but also to make use of the HTML5 semantics, which in my mind don't really include divs, no matter how appropriately they are be named.
However, I'd like to have the sidebar fill up the full height of the adjacent column, which is not as easy as I first thought it would be. I know it's an old problem, but I was sure I had solved it before.
Anyhow, I tried to figure out how to do it without using wrappers or JavaScript. JavaScript is a no go, but that's another story. I was sure that there would be some sort of smart CSS3 feature or something similar, that would solve my problem, without the need for wrappers, but my search for this much need feature was a failure of epic proportions.
So I said to my self: "Damn it! Oh well, just have to use wrappers then."
I was sure it would work. I tried different configurations, but no matter what I did, I couldn't get it to work without setting an absolute height of the surrounding wrapper. Just imagine my disappointment, failing once again when I was sure I had done it before. So again I went searching for a solution to suit my needs. Though a lot more material turned up this time, it was still a failure. The few solutions I found was questionable to say the least.
So, now I'm here again, asking yet another one of those questions which undoubtedly have been asked a quadrillion times before. I am sorry about this, but I really don't know where else to go.
I do hope you can help.
Thanks in advance and best regards.
edit:
This works exactly as I want it too:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0 auto;
width: 800px;
}
#wrapper {
position: relative;
width: 800px;
}
body > header, body > footer {
background-color: red;
width: 800px;
}
#wrapper > article {
margin-right: 200px;
width: 600px;
background-color: blue;
}
#wrapper > aside {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<header>This is a header</header>
<div id="wrapper">
<article>
This is the content<br /><br /><br /><br />left<br /><br /><br /><br />left
</article>
<aside>
And this is the sidebar! I dynamically make myself bigger based on the content on the left!
</aside>
</div>
<footer>This is a footer</footer>
</body>
</html>
Only problem left is getting rid of that damn div tag ;)
edit:
the css table display properties have been pointed out to me, and it really seems to be what I'm looking for, as the smart solution, but with multiple elements in one row, and only one in the other, I can't figure out how it should be done.
If IE6 compatibility is not a requirement, then I usually will usually do the following html:
<div class="container">
<div class="content">
This is the content
</div>
<div class="sidebar">
And this is the sidebar! I dynamically make myself bigger based on the content on the left!
</div>
</div>
And this is the CSS:
.container { position:relative; }
.content {margin-right:<SIDEBAR WIDTH HERE>;}
.sidebar {position:absolute; top:0; bottom:0; right:0; width:???; }
JSFiddle example: http://jsfiddle.net/geC3w/
This works in all modern browsers and Internet Explorer 7 and above, it's also immensely simple, as long as IE6 compatibility isn't a requirement
If IE7 compatibility is not a requirement, use display: table-cell;:
body {
margin: 0 auto;
width: 800px;
}
#wrapper {
position: relative;
width: 800px;
}
body > header, body > footer {
background-color: red;
}
#wrapper > * {
display: table-cell;
}
#wrapper > article {
width: 600px;
background-color: blue;
}
#wrapper > aside {
width: 200px;
background-color: green;
}
Working example.