The <div style=" and the <span style=" are two different parts, is there a name that each is called?

HTML & CSS
143

This won’t be visible on a tablet?

   <div style="width:266px" onclick="myc=document.getElementById('mycase'); myc.style.display='block'; this.style.display='none'">

    <div style="width: 256px; height: 330px; cursor: pointer; background-color:#000000;border-radius: 50px; border: 5px solid #0059dd;text-align: center;">
     
    <p style="font-family: 'Times New Roman'; font-size: 20px;color: #0059dd;line-height:114px;">[ ENJOY THE MUSIC]</p></div></div>
144

Depends on the final width of the page. Haven’t you kept that a corporate secret?

145

Width of my page is 1000px.

146

Sorry, asasass, but I have to sign off for tonigh. My vision very blurry and eyes need some rest.

147

ok. thanks for your help.

148

so a horizontal scrollbar for most computers and all other devices and so almost certainly will have lots of people leaving the site because it is too wide.

149

266px is too wide, really?

150

who said anything about a scrollbar. You lost me.

151

No one said that, 266px is just about narrow enough to fit all devices as a single column.

You said that your page is 1000px wide - that will not fit the 300px viewport on a small phone or even the 940px viewport used with many computers (where the browser uses half the screen and something else fills the other half).Your page needs to be responsive to a range of widths and that can mean having the external CSS use media queries to rearrange the content to fit. It can’t be done using style attributes in the HTML - yet another reason for not doing the CSS that junk way.

1 Like
152

I don’t care about a phone.

153

But the 70% of your visitors who are using their phone do - their opinion is far more important than yours.

154

How many times have I/we told you never never never use html for the way it looks as that’s the job of css.

Always use the correct html and then style it as you wish.

Your section is still incorrect as I gave the perfect solution already and yet you have now nested a q element inside a blockquote which is redundant and then you changed the cite into an em which is non semantic.

Your exact layout can be produced with the code I gave you and styled simply with css.

Here is is styled.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.quote{
	background:black; 
	color:#fff;
	width: 605px;
	margin:0;
	font-family:'Times New Roman';
	font-size:16px;	
}
.quote p,.quote footer{display:inline;margin:0}
.quote cite{font-style:italic}
.quote p:before {content: '“'; content: open-quote;}
.quote p:after {content: '”'; content: close-quote;}
</style>
</head>

<body>
<blockquote class="quote">
  <p>Never let society to turn you into a grain of sand on the beach. Be different, be individual. Refuse to look alike with others. Leave your herd, only then you will have a real name and till then your name will remain as the grain sand.</p>
  <footer> ~ <cite>Mehmet Murat ildan</cite> </footer>
</blockquote>
</body>
</html>

That give the exact same look as your original but is now semantically correct. There’s no need to change anything in the above so don’t do it :slight_smile:

4 Likes
155

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.